ES6 学习笔记

参考文献：http://es6.ruanyifeng.com/#docs/string 阮一峰的 ES6 入门

let和const命令

let

1、let声明的变量只在其代码块内有效，不进行变量提升，不能重复定义。 2、暂时性死区，变量声明前不可用。报ReferenceError。使用let声明变量时，只要变量在还没有声明完成前使用，就会报错。let x = x 报错就属于这个情况，在变量x的声明语句还没有执行完成前，就去取x的值，导致报错”x 未定义“。 3、块级作用域。ES6 引入了块级作用域，明确允许在块级作用域之中声明函数。行为方式如下：

• 允许在块级作用域内声明函数。
• 函数声明类似于var，即会提升到全局作用域或函数作用域的头部。
• 同时，函数声明还会提升到所在的块级作用域的头部。 *尽量不在块级作用域中定义函数，要用则书写为函数表达式形式。

const

1、声明一个只读的常量。不可改变其值（指针的指向）。一旦声明不可改变。const声明的常量只在其代码块内有效，不进行变量提升，不能重复定义。

顶层对象

变量提升形成顶层对象

变量的解构赋值

数组的解构赋值

1、实质是模式匹配，按顺序排序，解构不成功的变量会赋值undefined。需要Iterator接口。

let [a, b, c ] = [1,2,3]

2、解构可以设置默认值，内部是用“===”去判断是否是undefined来决定是否赋默认值。

let [a,b='a'] = [1,2] 

对象的解构赋值

对象的属性没有次序，变量必须与属性同名，才能取到正确的值。取不到值得赋值undefined。

let { bar, foo } = { foo: "aaa", bar: "bbb" };

let { foo: baz } = { foo: 'aaa', bar: 'bbb' };

上面代码中，foo是匹配的模式，baz才是变量。真正被赋值的是变量baz，而不是模式foo。 对象的解构也可以指定默认值。

字符串得解构赋值

转成类数组进行解构赋值

数值和布尔值得解构

转换成对象进行解构

函数参数得解构赋值

参数在传入后，形参和实参之间进行解构。函数参数也可以设置默认值。

圆括号问题

三种解构不可以用圆括号：

• 变量声明语句的模式部分
• 函数参数的模式部分
• 赋值语句的模式

    let [(a)] = [1];

    function f([(z)]) { return z; }

    ({ p: a }) = { p: 42 };

只可以在赋值语句的非模式部分使用圆括号。

用途

• 交换变量的值
• 从函数返回多个值
• 函数参数的定义
• 提取json数据
• 函数参数的默认值
• 遍历Map结构

扩展

字符串扩展

Unicode

大括号表示法与四字节的 UTF-16 编码是等价的。
JavaScript 共有 6 种方法可以表示一个字符

'\z' === 'z'  // true
'\172' === 'z' // true
'\x7A' === 'z' // true
'\u007A' === 'z' // true
'\u{7A}' === 'z' // true

方法

codePointAt() 定义在字符串的实例对象上。
传入参数为字符在字符串中的位置，但是由于中文和英文存储字节的不同，参数的确定会有一些困扰。故一般结合for...of去遍历使用。可以用该方法来测试字符是2字节还是4字节。（将获得的Unicode值和0xFFFF比较）
String.fromCharCode() 传入一个Unicode值，转为字符。定义在String对象上。 遍历器接口 新增了遍历器接口，可以使用for...of进行遍历。可以识别大于0xFFFF的码点。 normalize() 正规化 includes()、startsWith()、endsWith() includes()、startsWith()第二个参数是匹配的开始位置。 endsWith() 的第二个参数代表前n个字符。 repeat() 一个参数，参数会先转成数字然后运行取整运算。为负数和无穷时会报错。 padStart(),padEnd() pad 是“垫”的意思。 两个参数，字符串的 length 和 padText 字符串模板 ${}格式 如果使用模板字符串表示多行字符串，所有的空格和缩进都会被保留在输出之中。 String.raw() 转义“\”

正则的扩展 未精读

方法： match() replace() search() split()

数值的扩展

二进制：0o 八进制：0b 极小的常量： Number.EPSILON (能够接受的误差范围) isFinite()、isNaN()、isInteger parseInt()、parseFloat() Number.isSafeInterger() MAX_SAFE_INTEGER、MIN_SAFE_INTEGER Math.trunc() 去除小数部分 Math.sign() 判断是正负和正负0 Math.cbrt() 立方根 Math.clz32() 32位二进制表示 指数运算 **

函数的扩展

1）默认值 2）解构赋值默认值的结合使用 3）length属性 没有指定默认值的参数个数 4）rest 剩余参数 5) 函数内部可以设置严格模式 6) name属性，返回函数名 7) 箭头函数 this指向的固定化，并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有自己的this，导致内部的this就是外层代码块的this。正是因为它没有this，所以也就不能用作构造函数。 8) 尾调用、尾递归、函数柯里化

数组的扩展

1） 扩展运算符"..." 扩展运算的应用：

• 复制数组
• 合并数组 const a4 = [...a1, ...a2]; 浅拷贝
• 与解构结合生成数组，但是只能用在解构的最后一位 let [a1,...rest] = [1,2,3,4,5]
• 正确转换字符串 包括四字节的Unicode字符
• 将带有Iterator接口的转成数组

2）Array.from() 转成数组 三个参数：数据源，对数据成员的map，this绑定 3）Array.of() 对Array()行为不统一的扩展 4）copyWith(replaceStart,copyStart,copyEnd)将原数组的一部分替换成指定部分 5）find,findIndex 优化了indexOf无法识别NaN比较 6）fill() 7）entries、keys、values、includes 8）flat()、flatMap() 拉平嵌套 （google暂未实现）

对象的扩展

1. 属性的简洁表示法 对象的属性和方法简写
2. 属性名表达式 用"[]"装变量，但是不能用在属性简写里。
3. 方法的 name 属性 指向方法的名字
4. 属性的可枚举性和遍历 for...in...返回的包含继承的可枚举属性 .keys、.stringify、.assign只对自身的可枚举的属性
5. super 关键字 目前因为识别机制的问题只能用在函数简写方式里
6. 对象的扩展运算符 解构赋值和“...”运算符

新增的方法：

1. Object.is() 严格相等，包括NaN===NaN，但是+0 !== -0
2. Object.assign(target, source1, source2)
3. Object.getOwnPropertyDescriptors()
4. 。proto属性，Object.setPrototypeOf()，Object.getPrototypeOf()
5. Object.keys()，Object.values()，Object.entries()
6. Object.fromEntries()

作者简介：莫冥，芦苇科技web前端开发工程师 专注于前端领域框架、交互设计、图像绘制、数据分析等研究，访问 www.talkmoney.cn 了解更多。