写在前面

本系列为在我读完阮一峰老师的《ES6标准入门》第二版之后，所做的阅读笔记的整理。

许多初学ES6, 同时和我一样初次阅读阮老师的这本书的时候, 读第一遍会越发的困惑, 因为阮老师上面说的很多的定义,方法,之前都是没有见过的, 读到后面才发现, 哦~原来是这样.

有一句话叫做”大神的世界我们不懂”, 所以我在初读第一遍《ES6标准入门》这本书的时候,也是踩了不少坑,读书的时候查阅了不少的资料.

所以,在这一系列的笔记教程中,我会从一个初学者的角度,向您讲述ES6的相关知识,在后面介绍的知识我会尽量不提前用,即使提前使用,也会同时做好标注,避免了阅读时各种查阅资料的烦恼.

系列博客将采用一个一个的样例，来说明书中的精华部分（当然，这只是我认为的），同时引导新手，快速入门ES6，并逐步将其投入到生产实践中。

同时,在阅读前也提醒您, 为了系统连贯性的学习ES6的基础知识,建议您从我的博客第一章开始阅读,当然,如果您对对应的知识已经有所了解,那么可以跳转到任意章节阅读,每一篇博客名中均有介绍该博客中涉及到的ES6的内容.

阮一峰老师的这本书是开源的，在其官方博客就可以下载到，但是我强烈建议大家去购买一本书, 一是方便自己查阅ES6中新增的众多API, 二也是表达一下对大神的敬仰.

ES6加强了对Unicode的支持,并扩展了字符串对象

ES6对Unicode的主要的新增支持是,已经开始支持32位的字符了,要知道在之前,32位的字符是会被JS判定为两个字符的.

codePointAt()方法,可以很方便地判定字符是由2字节还是4字节组成

1
2
3
4
5
6
7
8
9
10
11
12
13
14

let a = '\uD842\uDFB7'
console.log(a);  // 𠮷 在ES5中会被判定为两个字符
let b = '\u20BB7'
let c = '\u{20BB7}'
console.log(b) // □7  未被识别
console.log(c) // 𠮷
let d = '𠮷a'
console.log(d.length) // 3 把第一个字符当两个字符了
console.log(d.charAt(0)) // 乱码
console.log(d.charAt(1)) // 乱码
console.log(d.charAt(2)) // a
console.log(d.charAt(3)) // 
console.log(d.codePointAt(0)) // 134071
console.log(d.codePointAt(1)) // 57271

要知道在之前es5中定义的fromCharCode()方法中,只能够识别16位的字符,并将其转换为相应字符,但是当我们需要进行32位字符码点转换为字符的时候,就无能为力了,这个时候ES6定义了一个新的方法: fromCodePoint()

在ES6中新定义的for-of循环可以实现识别使用32位编码的字符

for of 循环也是ES6中新定义的循环方式,可以用来遍历数组,遍历的同时不同于for in循环,for of循环不会遍历到你定义的原型上的可枚举属性,去除了for in循环的糟粕, 同时也避免了forEach循环不能跳出循环队列的问题,for of是可以随时跳出循环队列的. 同样的for of循环也可以遍历数组,对象等.

1
2
3
4
5
6
7
8

let text = String.fromCodePoint(0x20bb7);
for (let i = 0; i < text.length; i++) {
	console.log(text[i])  // 乱码
	console.log(i)  // 1
}
for (let i of text) {
	console.log(i)  // 𠮷
}

ES5为字符串对象提供了charAt方法,返回给定位置的字符,该方法不能识别码点大于0xFFFF的字符

因此,ES7定义了at方法,用于识别码点大于0xFFFF的字符

但是,现在谷歌浏览器暂不支持, 需要通过babel转码

1
2

console.log('𠮷a'.charAt(0)) // 乱码
console.log('𠮷'.at(0))  // 报错

ES6新增了一些查找字符串的相应方法

includes() 返回布尔值,表示是否找到了参数字符串
startsWith() 返回布尔值,表示字符串是否在元字符串的头部
endsWith() 返回布尔值,表示参数自粗换是否在源字符串的头部
repeat() 返回一个新字符串,表示将原字符串重复n次

1
2
3
4
5

var str = 'hello'
console.log(str.startsWith('he')) // true
console.log(str.endsWith('lo')) // true
console.log(str.includes('lo')) // true
console.log(str.repeat(3))  // hellohellohello

ES6的模板字符串

使用变量直接添加到相应的字符串中 用法很简单,添加到相应的字符串中

需要注意的是,使用模板字符串的时候,需要使用反向引号将整体的字符串引起来,否则是无效的

模板字符串,其实就是模块化了的,放在${}里面的js代码

1
2
3
4
5
6

let name = 'Bob',
	time = 'today'
console.log(`hello ${name}, how are you ${time}?`) 
// hello Bob, how are you today?
console.log('hello ${name}') 
// hello ${name}

模板字符串还拥有更加灵活的用法

1
2
3
4
5
6
7
8
9

let a = 1,
	b = 2;
console.log(`${a} + ${b} = ${a+b}`)  // 1 + 2 = 3

function foo() {
	return 'hello'
}

console.log(`${foo()} world`) // hello world

(完)