前言
就根据这个表，我把要点都列一下，还不会的赶紧学起来吧。
image.png
ES2016
指数运算
至今未用到过，略。
Array.prototype.includes
很好用，现在数组和字符串都支持这个方法。
ES2017
async/await
史诗级API，可以看我的：
函数最后一个参数尾部支持逗号
优点：
-
参数可以分行写，分行注释
-
git标记变化更直观，毕竟分行了
然而，在编辑器自带格式化的当前大环境下，这个特性你可以不去管。
Object.getOwnPropertyDescriptors
业务开发用不到，框架开发用得到。
String.prototype.{padStart,padEnd}
- padStart()的常见用途是为数值补全指定位数。下面代码生成 10 位的数值字符串。
'1'.padStart(10, '0') // "0000000001"
'12'.padStart(10, '0') // "0000000012"
'123456'.padStart(10, '0') // "0000123456"
- padStart()还可以将字符串自身加入到模板的后部中，这样如果数据源格式不统一，处理之后可以变成统一的：
'09-12'.padStart(10, '2023-MM-DD') // "2023-09-12"
'2023-09-12'.padStart(10, '2023-MM-DD') // "2023-09-12"
- padEnd()也是这样的思路。
Object.values/Object.entries
常用，收集对象的键值为数组，然后遍历数组。
ES2018
异步迭代( for await of)
虽然用的少，但是该用的时候必须用。
Promise.prototype.finally
超级好用。
正则表达式支持 unicode 属性
需要你对unicode字符有深入了解，不常用。
正则表达式反向肯定(否定) 预查(?<= 和 ?<!)
JS的正则终于快要接近完全体了，喜讯！
扩展运算符
神器级增强。
正则表达式命名组
不常用，除非你的业务经常需要玩正则。
原本正则匹配是：
const RE_DATE = /(\d{4})-(\d{2})-(\d{2})/;
const matchObj = RE_DATE.exec('1999-12-31');
const year = matchObj[1]; // 1999
const month = matchObj[2]; // 12
const day = matchObj[3]; // 31
这里有几个缺点：
- 要找到一个分组的位置，你必须要去数括号的位置，有时嵌套起来会更令人头疼。
- 后面维护代码的同学阅读起来，还要根据下标找到正则里面对应的括号，并且要再次阅读括号里面的正则才知道含义。
- 当你调整正则捕获分组的数量、顺序或嵌套时，你必要还要对下面的代码做调整。
说白了，用下标就很弱智。
现在：
const RE_DATE = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{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{4})变成了(?<year>\d{4})，也就是在括号的开头增加了?<year>，这就给分组加上了有意义的标记，以后按照matchObj.groups.year就绝对错不了了。
正则表达式点号匹配任何字符
其实是说有些特殊字符从前不支持，现在支持了，好事。
ES2019
Array.prototype.{flat,flatMap)
数组降维操作，该用就用，挺爽的。
String.prototype.{trimStart,trimEnd)
只删除头部或尾部空白字符，不常用，但真用的时候挺好用。
合理的JSON.stringify
还是针对unicode的，也就是补了补漏洞。知道有这事就行了。
Object.fromEntries
是Object.entries(obj)的逆方法。用于将符合要求的数组转成对象，也可以用于将Map转为对象。
Function.prototype.toString() 修正
从ES2019开始，Function.prototype.toString()将从头到尾返回源代码中的实际文本片段。这意味着还将返回注释、空格和语法详细信息。但一般无卵用。
Symbol.prototype.description
业务中连Symbol都很少用，这个可以不管。
.catch()可以不传参数
知道就行了，编辑器一般会告诉你可以不写。
ES2020
import.meta
一般在底层框架中有用到，具体解释可以看 https://www.bookstack.cn/read/es6-3rd/spilt.10.docs-proposals.md，在业务中，你也可以具体了解一下并巧妙使用它。
空值合并运算符( 比如 : a = b ?? “default")
类似于||，但是??的左侧只判断是否为null或undefined，不判断其他值，如果是0则返回0，空串也返回空串，false也返回false。
var x = 0 || 15;
console.log(x); // 15
var y = 0 ?? 15;
console.log(y); // 0
var x = false || 15;
console.log(x); // 15
var y = false ?? 15;
console.log(y); // false
可选链(比如 : a?.b )
很棒的新特性，是对连缀的增强。
var ob = {a: 1};
console.log(ob.b.c); // 错误
var ob = {a: 1};
console.log(ob.b?.c); // undefined
globalThis
统一Node.js环境和浏览器环境的根对象。
Promise.allSettled
Promise.all只有全部成功才会进入then()，现在Promise.allSettled无论成功失败都会进入.then()。
BigInt
大整型，它是新增的基本数据类型，用于工业、银行之类领域的大数计算。
JS整数范围是[-2^53, 2^53]，即[-9007199254740991,9007199254740991]，在这个范围之外就是失真。你可以判断一下某个数是否失真：
Number.isSafeInteger(9007199254740991); // true
Number.isSafeInteger(9007199254740992); // false
大整型用尾部加n表示：
var x = 11111111111111111111111111111111111111111n;
var y = x + 1n;
console.log(x); // 11111111111111111111111111111111111111111n
console.log(y); // 11111111111111111111111111111111111111112n
其他细节不多说。
import()
模块异步加载，返回Promise。
String.prototype.matchAll
matchAll不完全是match + /g，而是生成一个迭代器。必须用for ... of ...去迭代它。日常不常用。
ES2021
数字分隔符
仅仅是为了让程序员看起来更清晰一点：
let num = 1_000_000;
console.log(num); //output: 1000000
逻辑运算符赋值
也就是这三个：??=、&&=、||=，其中常用||=，很好用。
- 最常用的是
||=：
// 老的写法
user.id = user.id || 1;
// 新的写法
user.id ||= 1;
- 其次常用的是
&&=，其中&&就很罕见，它意思跟||相反，左边为假值就短路取该假值，日常几乎用不到：
var x = 0;
x = x && 3;
console.log(x); // 0
x &&= 3;
console.log(x); // 0
var x = 1;
x = x && 3;
console.log(x); // 3
x &&= 3;
console.log(x); // 3
-
??=更罕见，是空值合并运算符的运算符赋值。
var x = 0;
x = x ?? 3;
console.log(x); // 0
x ??= 3;
console.log(x); // 0
var x = 1;
x = x ??= 3;
console.log(x); // 1
x ??= 3;
console.log(x); // 1
WeakRef
业务代码几乎不用。
Promise.any
任意一个Promise变成了已解决状态，则立即返回第一个已解决的Promise。
String.prototype.replaceAll
replaceAll()可以在不使用正则表达式的情况下替换字符串中指定的所有字符，有两个参数：初始字符串、需要替换的字符串。
ES2022
异常链
业务代码中没什么用，不要把异常搞的那么复杂。
类静态块
不适用class的话，不需要管。
Object.hasOwn
和hasOwnProperty用途一样，写法有区别，hasOwn是Object的静态方法。它们都用于判断一个属性是否属于一个对象：
let obj = {
name:'张三',
}
console.log(obj.hasOwnProperty('name')) // true
现在我们可以用Object.hasOwn()：
let obj = {
name:'张三',
}
console.log(Object.hasOwn(obj, 'name')) // true
.at 返回指定索引的元素
支持负值，这就是它的唯一好处。
// 返回 4
[1, 2, 3, 4].at(-1)
顶层 await
function fn() {
return Promise.resolve();
}
// 以前需要通过 IIFE 实现
(async function () {
await fn();
})();
// 支持顶层 await 后，可以直接调用
await fn();
正则表达式切片 /d
通过正则匹配，我们只能拿到匹配到的字符串，通过切片，也就是加d，可以拿到这些字符串在原字符串的位置。m1会增加一个属性叫indices，里面会标记每一个匹配项在原字符串的位置。
const re1 = /a+(z)?/d;
const s1 = "xaaaz";
const m1 = re1.exec(s1);
console.log(m1);
ES2023
数组新增4个非破坏性方法
目前有4个方法可以不修改原数组，只生成新数组。
arr.toSorted() 可接收比较函数
arr.toReversed() 无参数
arr.toSpliced() splice()是返回被删除的元素，而这个是返回删完之后的样子
arr.with(index, ‘新值’) 相当于先按下标赋值，然后返回修改后的新数组
const array = ['c', 'o', 'n', 'a', 'r', 'd', 'l', 'i'];
const result = array.toSorted();
console.log(array); // 不变
console.log(result);
其他不再举例。
WeakMap 支持 Symbol 作为 key
不多说。
Hashbang 语法
是Node.js专用语法，用于指定用哪个本地程序运行该js文件。下方代码表示用环境变量下的node指向的程序来执行本JS文件。
#!/usr/bin/env node
console.log('hashbang');
这样直接在命令行敲本文件的文件名，就会执行JS。
findLast / findLastIndex
从数组尾部开始查找，findLast会返回找到的第一个，findLastIndex会返回找到的第一个的下标，而且是负值。
网友评论