ES小版本整理

ECMAScript 2016

• Array.proptotype.includes
• 指数运算符

2**10; // 1024
Math.pow(2, 10) //1024
1
2

ECMAScript2017

• Object.values
• Object.entries
• Object.getOwnPropertyDescriptors
• String.proptotype.padStart String.proptotype.padEnd
• async

const obj = { a:1, b:2 };
console.log(Object.values(obj)); // [1,2]
console.log(object.entries(obj)); // [[a, 1], [b, 2]]
const string1 = 'a';
const string2 = 'b';
console.log(string1.padStart(5, '0')); // '0000a'
console.log(string2.padEnd(5, '0')); // 'b0000'
1
2
3
4
5
6
7

ECMAScript2018

• await
• Promise.finally
• Rest 属性
• RegExp特性 ：
  Unicode 属性转义 (\p{…})
  后行断言（Lookbehind Assertions） (?<= ) 和 (? 命名捕获组（Named Capture Groups）
  s (dotAll) 标志
  推荐参考：ES9的新特性:正则表达式RegExp

//Rest
const {a, b, ...c} = { a:1, b:2, x:3, y:4 };
console.log(a,b,c); // 1,2{x:3,y4}
1
2
3

ECMAScript2019

• Array.prototype.flat – flat(depth = 1) : any[]
• Array.prototype.flatMap
• Object.fromEntries
• String.prototype.trimStart
• String.prototype.trimEnd
• Symbol.prototype.description
• 可忽略的catch参数
• Array的稳定排序
• JSON.stringify
• JSON被归为ECMAScript子集
• Function的toString

const array1 = [1,2,[3,4],[[5,6]]];
console.log(array1.flat(0));  // '[1,2,[3,4],[[5,6]]]'
const array2 = [1,2,[3,4],[[5,6]]];
console.log(array2.flat()); // '[1,2,3,4,[5,6]]'
const array3 = [1,2,[3,4],[[5,6]]];
console.log(array3.flat(2)); // '[1,2,3,4,5,6]'

const array4 = [1,2,3];
console.log(array4.flatMap(x=> x)) // '[1,2,3]'
console.log(array4.flatMap(x=> [x])) // '[1,2,3]'
console.log(array4.flatMap(x=> [[x]])) // '[[1],[2],[3]]'
const array5 = [1,2,3];
console.log(array5.flatMap((x,i) => new Array(i+1).fill(x))); // [1,2,2,3,3,3]

const obj = Object.fromEntries([[a,1],[b,2]]);
console.log(obj); // {a:1,b:2}

const sym = new Symbol('hahaha');
console.log(sym.description); // 'hahaha'

try{
}catch{
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

ECMAScript2020

• Optional Chaining 可选链式调用
• Nullish Coalescing 空值合并
• Private Fields 私有字段
• Static Fields 静态字段
• Top Level Await 顶级 Await
• Promise.allSettled 方法
• Dynamic Import 动态引入
• MatchAll 匹配所有项
• globalThis 全局对象
• BigInt

const obj = { person: {name: 'f'} };
console.log(obj.teacher?.name); // undefined


const number = 0;
const num = number ?? 1;
console.log(num); // 0  仅合并 null&undefined

//等待多个 promise 返回结果时，我们可以用 Promise.all([promise_1, promise_2])。但问题是，如果其中一个请求失败了，就会抛出错
//误。然而，有时候我们希望某个请求失败后，其他请求的结果能够正常返回。针对这种情况 ES11 引入了 Promise.allSettled 
promise_1 = Promise.resolve('hello')
promise_2 = new Promise((resolve, reject) => setTimeout(reject, 200, 'problem'))
Promise.allSettled([promise_1, promise_2]).then(([promise_1_result, promise_2_result]) => {
   console.log(promise_1_result) // 输出：{status: 'fulfilled', value: 'hello'}
   console.log(promise_2_result) // 输出：{status: 'rejected', reason: 'problem'}
})


//JavaScript 可以在不同环境中运行，比如浏览器或者 Node.js。浏览器中可用的全局对象是变量 window，但在 Node.js 中是一个叫做 
//global 的对象。为了在不同环境中都使用统一的全局对象，引入了 globalThis 。
// 浏览器
window == globalThis // true
 
// node.js
global == globalThis // true
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

ECMAScript2021

• String.prototype.replaceAll
• Promise.any
• 新增逻辑操作赋值符 ||= &&= ??=
• WeakRefs
• 下划线 (_) 分隔符
• Intl.ListFormat
• Intl.DateTimeFormat API 中的 dateStyle 和 timeStyle 的配置项

Promise.any() ：返回第一个 fullfilled 的 promise ，若全部 reject，则返回一个带有失败原因的 AggregateError。
WeakRefs：使用弱引用对象，该弱引用不会阻止 GC，并且可以在 GC 前使用 WeakRef.prototype.deref ( ) 解除该引用。

a ||= b; // 等同于 a = a || b
c &&= d; // 等同于 c = c && d
e ??= f; // 等同于 e = e ?? f
const x = 2_3333_3333  // 233333333
1
2
3
4

ECMAScript2022

• Object.hasOwn
• Array.prototype.at String.prototype.at
• error.cause
• 正则表达式匹配索引