JavaScript各个版本新增特性

参考链接：

• 最全 ECMAScript 攻略 (opens new window)
• ES6，ES7，ES8，ES9，ES10新特性一览 (opens new window)
• 该来的还是来了，盘点 ES12 中有新特性！ (opens new window)
• 玩转 ECMAScript 攻略 (opens new window)
• 你将会用到的ES2020新特性 (opens new window)

ES2015(ES6)

• let与const。
• 箭头函数（无论是箭头函数还是bind，每次执行都是返回的新的函数的引用）。
• class类。
• 模块（import、export）。
• 模板字符串语法。
• 函数参数默认值。
• rest参数（剩余参数...），可以展开数组，展开对象是在ES9支持的。
• 数组、对象的解构。
• Promise。
• 对象属性的简写，值与属性名相同可简写。
• for...of。
• 生成器generator。
• Map，Set，WeakMap，WeakSet。
• Symbol。
• Proxy。
• Reflect。

ES2016(ES7)

• 数组方法Array.prototype.includes(value, fromIndex)：判断一个数组是否包含一个指定的值。indexOf无法判断NaN（永远返回-1），但是includes可以。如果数组含有empty空值，includes会识别为undefined，indexOf不会。

  const arr = [1, 2, 3, NaN, , , 123];
  console.log(arr.indexOf(NaN)); // -1
  console.log(arr.indexOf(undefined)); // -1
  console.log(arr.includes(NaN)); // true
  console.log(arr.includes(undefined)); // true
  

• Exponentiation operator：求幂运算**，2 ** 10等价于Math.pow(2, 10)。

ES2017(ES8)

• async、await。
• Object.values(obj)，（Object.keys(obj)一直都有的，连IE都支持）。
• Object.entries(obj)返回一个给定对象自身可枚举属性的键值对数组（和for...in顺序一样，区别在于for...in循环枚举原型链中的属性）。
• String padding：padStart()、padEnd()，填充字符串到当前长度，都是接收两个参数targetLength目标长度与填充字符串（默认为空格，如果不够会重复多次，如果超出只保留左侧部分）。
• 函数参数列表结尾允许逗号，重新排列项目更简单，因为如果最后一项更改其位置，则不必添加和删除逗号。它可以帮助版本控制系统跟踪实际发生的变化。参考 (opens new window)
• Object.getOwnPropertyDescriptors(obj)：获取一个对象的所有自身属性的描述符，方便将一个对象深度拷贝给另一个对象，同时可以将getter、setter拷贝。
• ShareArrayBuffer与Atomics对象，用于从内存共享位置读取和写入。

ES2018(ES9)

• Asynchronous Iteration：异步迭代。

  // 不能正常运行 循环本身依旧保持同步，并且在内部的异步函数之前全部调用完成
  async function process(array) {
    for (const i of array) {
      await doSomething(i);
    }
  }
  
  // ES9引入的异步迭代器(asynchronous iterators),await可以和for...of一起使用
  async function process1(array) {
    for await (const i of array) {
      doSomething(i);
    }
  }
  

• Rest/Spread Properties，rest参数和扩展运算符，这项特性在ES6中已经引入，但是ES6中的作用对象仅限于数组，现在可以操作对象。

• 正则表达式命名捕获组，语法：?<name>，在打开捕获括号后立即命名。

  // 原来的通过索引获取匹配分组，每个括号就是一组
  const RE_DATE = /([0-9]{4})-([0-9]{2})-([0-9]{2})/;
  
  const matchObj = RE_DATE.exec('1999-12-31');
  // 0是字符串本身
  const year = matchObj[1]; // 1999
  const month = matchObj[2]; // 12
  const day = matchObj[3]; // 31
  
  // 正则表达式命名捕获组
  const RE_DATE = /(?<year>[0-9]{4})-(?<month>[0-9]{2})-(?<day>[0-9]{2})/;
  
  const matchObj = RE_DATE.exec('1999-12-31');
  const year = matchObj.groups.year; // 1999
  const month = matchObj.groups.month; // 12
  const day = matchObj.groups.day; // 31
  

• 正则表达式反向断言。

  // 先行断言
  // 与后面跟着有数字的非数字匹配，但不跟数字匹配，\D代表非数
  const reLookahead = /\D(?=\d+)/;
  const match1 = reLookahead.exec('$123.45');
  console.log(match1[0]); // $
  
  // 反向断言
  // 与非数后面的数字匹配，但不会跟前面的非数匹配
  const reLookahead = /(?<=\D)[\d\.]+/;
  const match = reLookahead.exec('$123.45');
  console.log(match[0]); // 123.45
  

• 正则表达式dotAll模式：正则表达式中点.匹配除回车外的任何单字符，标记s改变这种行为，允许行终止符的出现。

  /hello.world/.test('hello\nworld'); // false
  /hello.world/s.test('hello\nworld'); // true
  

• 正则表达式Unicode转义：使用\p{}通过提及大括号内的Unicode字符属性来匹配字符，在正则表达式中使用标记u(unicode)设置。

  // 两种匹配汉字的方法 后面这个更简单好记 且新增有的特殊汉字第一种无法匹配
  const oldReg = /[\u4e00-\u9fa5]/;
  const newReg = /\p{Script=Han}/u;
  

• 非转义序列的模板字符串：移除对ECMAScript在带标签的模版字符串中转义序列的语法限制。

  `\u{54}`; // 'T'
  String.raw`\u{54}`; // '\u{54}'
  
  const name = 'Bob';
  String.raw`Hi\n${name}!`; // "Hi\nBob!"，内插表达式还可以正常运行
  

• Promise.finally()。

ES2019(ES10)

• Array.prototype.sort()：现在必须是稳定排序，以前是由浏览器自己决定。

• 行分隔符（U +2028）和段分隔符（U +2029）符号现在允许在字符串文字中，与JSON匹配。

• 更友好的JSON.stringify：如果输入超出范围的Unicode编码，在原先JSON.stringify会返回格式错误的Unicode字符串，现在可以输出一个有效的Unicode序列（UTF-8表示）。

• 新增了Array的flat()和flatMap()方法：flat指定深度扁平化数组，flatMap返回一个函数的返回值扁平化一层后组成的数组（等效于对返回值执行深度为1的flat）。

• 新增了String的trimStart()和trimEnd()方法。

• Object.fromEntries()：把键值对列表转换为一个对象。执行与Object.entries互逆的操作。

• Symbol.prototype.description：返回创建Symbol(desc)时的描述desc。

  console.log(Symbol('desc').description);
  // expected output: "desc"
  

• Function.prototype.toString()现在返回精确字符，包括空格和注释。

• 简化try {} catch {}，修改catch绑定，现在可以不用捕获错误。

  try {} catch (error) {} // 以前
  try {} catch {} // 现在
  

ES2020(ES11)

• String.prototype.matchAll：matchAll返回的是一个迭代器，通过这个迭代器我们可以快速的获取匹配的所有内容。正则表达式必须有global修饰，否则报错。

• 新的基本数据类型BigInt：一种内置对象，它提供了一种方法来表示大于 $2^{53}$ - 1 的整数。可以表示任意大的整数。

• Promise.allSettled：所有任务都敲定之后触发，返回新的Promise，包含所有resolve和reject的结果。

• golbalThis：标准的方式去获取不同环境下的全局对象。在浏览器侧，全局对象可能是window或者self或者this或者frames；在node，全局对象可以从global或者this获取； 在非严格模式下，方法里面的 this 指向全局对象，但是在严格模式下又是 undefined。

• for-in mechanics：以前在不同的引擎下for in循环出来的内容顺序是可能不一样的，现在标准化了。

• Optional Chaining可选链运算符。

  const price = result && result.body && result.body.data && result.body.data.price;
  // 可选链
  const price = result?.body?.data?.price
  

• Nullish coalescing Operator空值合并运算符：解决替换undefined，null为默认值的问题，避免了以前使用||运算符遇到false，0，''的问题。

  const data = {
    name: '',
    male: false,
    age: null,
  };
  
  const name1 = data.name || 'zhangsan';
  const name2 = data.name ?? 'zhangsan';
  const age = data.age ?? '20';
  
  console.log(name1, name2, age);
  // zhangsan '' 20
  

• 异步加载模块：import()。

  import('./logger.js').then((module) => { });
  let module = await import('/modules/my-module.js');
  

ES2021(ES12)

• String.prototype.replaceAll：String.prototype.replaceAll()允许我们用一个不同的值替换字符串中的所有子串实例，而不需要使用全局正则表达式。

• Promise.any与AggregateError：Promise.any()返回第一个完成的promise的值。如果所有传递给Promise.any()作为参数（作为数组）的Promise都被拒绝，则抛出一个AggregateError异常。AggregateError是一个新的Error子类，它对单个错误进行分组。每个AggregateError实例都包含一个对异常数组的引用。

• WeakRefs与FinalizationRegistry对象：WeakRef是弱引用的意思。弱引用的主要用途是实现大型对象的缓存或映射。可以让内存很快被垃圾回收。FinalizationRegistry类在垃圾收集之后运行自定义收集器。

• Logical Assignment Operators：逻辑赋值运算符。

  • x &&= y 等价于 x && (x = y)
  • x ||= y 等价于 x || (x = y)
  • x ??= y 等价于 x = x ?? (x=y)

• Numeric separators：数字分隔符（1_000）：允许我们在数字之间添加下划线(_)字符，使数字更具可读性。分隔符可以用于数字的整数部分和小数部分。不仅可以用在整数和浮点数中，也可以用在二进制、十六进制、八进制字面量中。分隔符也适用于BigInt数字。分隔符只是为了可读性。所以，它可以放在数字内的任何地方。

ES2022(ES13)

• Class Fields ( Private instance methods and accessors , Class Public Instance Fields & Private Instance Fields , Static class fields and private static methods )

  • 私有属性和私有方法，#关键字加名称。
  • 私有属性也可以设置getter和setter方法。

• 正则之/d修饰符，indices是一个索引数组，其中包含每个捕获的子字符串的一对开始索引和结束索引。

  const re1 = /a+(?<Z>z)?/d;
  
  // indices are relative to start of the input string:
  const s1 = "xaaaz";
  const m1 = re1.exec(s1);
  m1.indices[0][0] === 1;
  m1.indices[0][1] === 5;
  

• 顶层await。