es6新增特性总结

定义

ES6是ECMA为JavaScript制定的第6个标准版本，标准委员会决定，标准在每年6月正式发布并作为当年的正式版本，接下来的时间里就在此版本的基础上进行改动，直到下一年6月草案就自然变成新一年的版本，这样一来就无需以前的版本号，只要用年份标记即可。ECMAscript 2015是在2015年6月发布ES6的第一个版本。以此类推，ECMAscript 2016是ES6的第二个版本、 ECMAscript 2017是ES6的第三个版本。

ES6既是一个历史名词也是一个泛指，含义是5.1版本以后的JavaScript下一代标准，目前涵盖了ES2015、ES2016、ES2017、ES2018、ES2019、ES2020。

所以很多文章提到的es7,es8等，实质上都是不规范的概念，从ES1到ES6，每个标准都是花了好几年甚至十多年才制定下来，你一个ES6到ES7，ES7到ES8，才用了一年，按照这样的定义下去，那不是很快就ES20了。用正确的概念来说ES6目前涵盖了ES2015、ES2016、ES2017、ES2018、ES2019、ES2020。

另外，ES6更新的内容主要分为以下几点

• 表达式：声明、解构赋值

• 内置对象：字符串扩展、数值扩展、对象扩展、数组扩展、函数扩展、正则扩展、Symbol、Set、Map、Proxy、Reflect

• 语句与运算：Class、Module、Iterator

• 异步编程：Promise、Generator、Async

更新内容

1.声明

ES2015

• const：声明常量，必须立马赋值
• let：声明变量，可立马赋值或使用时赋值

注意

• 不允许重复声明，未定义就使用会报错，出现暂时性死区，不存在变量提升
• const实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动。对于简单类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址，因此等同于常量。
  
  但对于复合类型的数据（主要是对象和数组），变量指向的内存地址，保存的只是一个指向实际数据的指针，const只能保证这个指针是固定的（即总是指向另一个固定的地址），至于它指向的数据结构是不是可变的，就完全不能控制了。

const foo = {};

// 为 foo 添加一个属性，可以成功
foo.prop = 123;
foo.prop // 123

// 将 foo 指向另一个对象，就会报错
foo = {}; // TypeError: "foo" is read-only

ES2017

共享内存和原子操作：由全局对象SharedArrayBuffer和Atomics实现，将数据存储在一块共享内存空间中，这些数据可在JS主线程和web-worker线程之间共享

ES2020

globalThis：作为顶层对象，指向全局环境下的this

• Browser：顶层对象是window

• Node：顶层对象是global

• WebWorker：顶层对象是self

• 以上三者：通用顶层对象是globalThis

ES提案

• do表达式：封装块级作用域的操作，返回内部最后执行表达式的值(do{})

• throw表达式：直接使用throw new Error()，无需()或{}包括

• !#命令：指定脚本执行器(写在文件首行)

2.解构赋值

• 字符串解构：const [a, b, c, d, e] = "hello"

• 数值解构：const { toString: s } = 123

• 布尔解构：const { toString: b } = true

• 对象解构

  • 形式：const { x, y } = { x: 1, y: 2 }
  • 默认：const { x, y = 2 } = { x: 1 }
  • 改名：const { x, y: z } = { x: 1, y: 2 }

• 数组解构

  • 规则：数据结构具有Iterator接口可采用数组形式的解构赋值
  • 形式：const [x, y] = [1, 2]
  • 默认：const [x, y = 2] = [1]

• 函数参数解构

  • 数组解构：function Func([x = 0, y = 1]) {}
  • 对象解构：function Func({ x = 0, y = 1 } = {}) {}

应用场景

• 交换变量值：[x, y] = [y, x]
• 返回函数多个值：const [x, y, z] = Func()
• 定义函数参数：Func([1, 2])
• 提取JSON数据：const { name, version } = packageJson
• 定义函数参数默认值：function Func({ x = 1, y = 2 } = {}) {}
• 遍历Map结构：for (let [k, v] of Map) {}
• 输入模块指定属性和方法：const { readFile, writeFile } = require("fs")

注意

• 匹配模式：只要等号两边的模式相同，左边的变量就会被赋予对应的值
• 解构赋值规则：如果等号右边的值不是对象或数组，就先将其转为对象
• 解构默认值生效条件：属性值严格等于undefined
• 解构遵循匹配模式
• 解构不成功时变量的值等于undefined
• undefined和null无法转为对象，因此无法进行解构

let x;
{x} = {x: 1};
// SyntaxError: syntax error

这段代码会报错，因为JavaScript引擎会将{x}理解成一个代码块，从而发生语法错误。

只有不将大括号写在行首，避免JavaScript将其解释为代码块，才能解决这个问题。

3.字符串拓展

ES2015

• Unicode表示法：大括号包含表示Unicode字符(\u{0xXX}或\u{0XXX}),有了这种表示法之后，JavaScript 共有 6 种方法可以表示一个字符。

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

• 字符串遍历：可通过for-of遍历字符串

for (let codePoint of 'foo') {
  console.log(codePoint)
}
// "f"
// "o"
// "o"

//这个遍历器最大的优点是可以识别大于0xFFFF的码点，传统的for循环无法识别这样的码点。

let text = String.fromCodePoint(0x20BB7);

for (let i = 0; i < text.length; i++) {
  console.log(text[i]);
}
// " "
// " "

for (let i of text) {
  console.log(i);
}
// "