ES新特性

optional chaining

本质：语法糖

年份：2020

optional chaining 可选链。主要解决你调一个方法 ，数组，或者对象的某一个属性。发现方法数组，对象不存在。然后会报 Uncaught ReferenceError 。

原来我们处理的方式

let value = obj ? obj.name:undefined;

现在我们有了可选链之后的解决办法：

let value = lili?.name;
let value1 = arr?.[3];
let value2 = fun?.(...arg);

不仅对对象可用，数组方法都可以同样适用。

Nullish coalescing Operator

本质：语法糖

年份：2020

Nullish coalescing Operator 空位合并运算符。主要解决原本的为空默认值。

原本写法

let a = lii || "aaa";

新写法

let a = lii ?? "aaa";

String.prototype.matchAll

年份：2020

String.prototype.matchAll 可以获取一个字符串正则匹配出的所有值。这简化了之前要匹配所有值的方法。值得注意的是matchAll返回的并不是一个数组，而是一个迭代器。

[...'-a-a-a'.matchAll(/-(a)/ug)]
// [["-a", "a", index: 0, input: "-a-a-a", groups: undefined],["-a", "a", index: 2, input: "-a-a-a", groups: undefined],["-a", "a", index: 4, input: "-a-a-a", groups: undefined]]

import()

年份：2020

import() 语句看上是一个函数，实际上它并不是一个函数，而是一个特殊的语句。它为我们提供了一种动态引入js模块的方式，无论在浏览器当中还是在node当中都同样适用。

值得注意的是它返回的是一个promise对象，你同样可以对他使用async/await。

const main = document.querySelector("main");
  for (const link of document.querySelectorAll("nav > a")) {
    link.addEventListener("click", e => {
      e.preventDefault();

      import(`./section-modules/${link.dataset.entryModule}.js`)
        .then(module => {
          module.loadPageInto(main);
        })
        .catch(err => {
          main.textContent = err.message;
        });
    });
  }

BigInt

BigInt是为了解决JS当中最大的安全数字是2^53，当你的计算超出了这个界限他的表现就会变得很奇怪。

const max = Number.MAX_SAFE_INTEGER;
// 9007199254740991
console.log(max + 1); // 9007199254740992
console.log(max + 2); // 9007199254740992
console.log(max + 3); // 9007199254740994
console.log(Math.pow(2, 53) == Math.pow(2, 53) + 1); // true

因此我们引入了BigInt,来解决这个问题。

const previousMaxSafe = BigInt(Number.MAX_SAFE_INTEGER);
// ↪ 9007199254740991n

const maxPlusOne = previousMaxSafe + 1n;
// ↪ 9007199254740992n

const theFuture = previousMaxSafe + 2n;
// ↪ 9007199254740993n, this works now!

const multi = previousMaxSafe * 2n;
// ↪ 18014398509481982n

const subtr = multi – 10n;
// ↪ 18014398509481972n

const mod = multi % 10n;
// ↪ 2n

const bigN = 2n ** 54n;
// ↪ 18014398509481984n

bigN * -1n
// ↪ –18014398509481984n

值得注意的是，当你的数据是BigInt的时候。你进行计算时，数字都得是BigInt类型的。

Promise.allSettled

年份：2020

Promise.allSettled(arr) 这个方法是为了更加方便的进行debug来看每一个Promise的执行结果。

Array.prototype.{flat,flatmap}

年份：2019

Array.prototype.flat([depth]) 将数组平整成一维的数组，接受一个参数depth，决定平整的层数，默认只平整一层。接受Infinity关键词表示无限深度。

Array.prototype.flatmap([callback],thisArg) 将数组平整后再对每个数调用callback函数(类似map方法)。
后面的thisArg暂时不知道啥意思。

注意：他们返回的都是一个新的数组，原数组不会被改变。数组中空的位置会被跳过。

String.prototype.{trimStart,trimEnd}

年份：2019

去除开始/结束位置的空白字符串。返回新的字符串。

let str = "   ssss   ";
let start = str.trimStart(); // "ssss   ";
let end = str.trimEnd();// "   ssss";

正则匹配s(匹配所有)标记

年份：2018

正则匹配中.代表匹配所有字符，但是在之前当中它无法匹配某些换行符。因此提出一个新的s模式，表示让.可以匹配所有字符。(之前一直使用[\s|\S]来代替)

/foo.bar/.test('foo\nbar');
// → false

/foo[^]bar/.test('foo\nbar');
// → true

正则匹配命名捕捉组

年份：2018

原本正则匹配的组都只能通过数组序号来访问，这让你捕获到的组难以使用，也难以理解。因此通过增加为捕获组增加命名，可以让正则匹配更易理解也更方便重构。

let re = /(\d{4})-(\d{2})-(\d{2})/u;
let result = re.exec('2020-01-02');
// ['2020-01-02','2020','01','02',index: 0,input: '2020-01-02',]

let re = /(?\d{4})-(?\d{2})-(?\d{2})/u;
let result = re.exec('2015-01-02');
// [
  '2015-01-02',
  '2015',
  '01',
  '02',
  index: 0,
  input: '2015-01-02',
  groups: [Object: null prototype] { year: '2015', month: '01', day: '02' }
]

可以通过结构的方式来获取各命名补货组。

反向引用

通过命名后的捕获组反向引用。可以在正则表达式中通过\k构造访问已命名组。

let duplicate = /^(?.*).\k$/u;
duplicate.test('a*b'); // false
duplicate.test('a*a'); // true

命名引用也可以与编号引用同时使用

let triplicate = /^(?.*).\k.\1$/u;
triplicate.test('a*a*a'); // true
triplicate.test('a*a*b'); // false

替换对象

命名捕获组可以传递给String.prototype.replace方法，如果这个值是一个String。那么可以在其中使用$来进行替换。

let re = /(?\d{4})-(?\d{2})-(?\d{2})/u;
let result = '2015-01-02'.replace(re, '$/$/$');
// result === '02/01/2015'

对象解构和扩展

年份：2018

允许通过...的语法将解构时剩下的属性解构进一个对象。同时也允许通过...将对象扩展到一个对象当中。

let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
x; // 1
y; // 2
z; // { a: 3, b: 4 }

let n = { x, y, ...z };
n; // { x: 1, y: 2, a: 3, b: 4 }

正则表达式中的Unicode属性转义

年份：2018

Unicode标准为每个符号分配各种属性和属性值。例如，要获得仅在希腊语脚本中使用的符号集，可以在Unicode数据库中搜索脚本属性设置为希腊语的符号。但是之前在ECMAScript当中我们是没法做这样的匹配的。

只能够通过一些库去解决这个问题，但是引入第三方库会带来一些新的问题。比如，引入大小过大，运行时解析对效率的损失。编译器解决使得难以阅读等等。

因此添加表单\p{}和\p{}的Unicode属性转义。Unicode属性转义是一种新的转义序列，可以用在设置了u标志的正则表达式中。

const regexGreekSymbol = /\p{Script=Greek}/u;
regexGreekSymbol.test('π');
// → true