ES7、ES8、ES9、ES10、ES11、ES12 新特性汇总合集

在过去几年里，ECMAScript 标准不断更新，引入了许多令人激动的功能和改进。让我们来看看从 ES7 到 ES12 各个版本带来的重要变化：

1. ES7（ECMAScript 2016）

1. Array.prototype.includes 方法

Array.prototype.includes 方法用于判断数组是否包含特定元素，并返回相应的布尔值。

const array = [1, 2, 3, 4, 5];
console.log(array.includes(3)); // 输出：true
console.log(array.includes(6)); // 输出：false

2. 指数运算符 **

指数运算符 ** 可以用于计算幂运算。

console.log(2 ** 3); // 输出：8（2的3次方）

2. ES8（ECMAScript 2017）

1. Object.values 和 Object.entries 方法

Object.values 和 Object.entries 方法分别用于获取对象的值数组和键值对数组。

const obj = { a: 1, b: 2, c: 3 };
console.log(Object.values(obj)); // 输出：[1, 2, 3]
console.log(Object.entries(obj)); // 输出：[['a', 1], ['b', 2], ['c', 3]]

2. 字符串填充方法 padStart 和 padEnd

padStart 和 padEnd 方法用于在字符串的开头或结尾填充指定字符，以达到指定的长度。

const str = '123';
console.log(str.padStart(5, '0')); // 输出：00123
console.log(str.padEnd(5, '0')); // 输出：12300

3. ES9（ECMAScript 2018）

1. Promise.finally 方法

Promise.finally 方法用于指定不管 Promise 对象最后状态如何都会执行的操作。

fetch('https://api.example.com/data').then(response => response.json()).catch(error => console.error(error)).finally(() => console.log('Request completed'));

2. Rest/Spread 属性

Rest/Spread 属性让您可以更方便地操作对象和数组。

const { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
console.log(x); // 输出：1
console.log(y); // 输出：2
console.log(z); // 输出：{ a: 3, b: 4 }

4. ES10（ECMAScript 2019）

1. Array.prototype.flat() 和 Array.prototype.flatMap()

Array.prototype.flat() 方法用于将多维数组（嵌套数组）"扁平化"为一维数组，而 Array.prototype.flatMap() 方法则在执行 flat 后，再对每个元素执行一个映射函数，最后将结果组合成一个新数组。

const arr = [1, 2, [3, 4]];
const flatArr = arr.flat();
console.log(flatArr); // Output: [1, 2, 3, 4]const newArr = arr.flatMap(x => [x * 2]);
console.log(newArr); // Output: [2, 4, 6, 8]

2. Object.fromEntries()

Object.fromEntries() 方法可以将一个键值对列表转换为一个对象。

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

5.ES11（ECMAScript 2020）

1. Optional Chaining (可选链)

可选链操作符 ?. 可以简化访问深层嵌套属性时的代码，避免因为中间属性不存在而抛出错误。

const obj = {foo: {bar: {baz: 42}}
};console.log(obj.foo?.bar?.baz); // Output: 42

2. Nullish 合并运算符

Nullish 合并运算符 ?? 可以用来提供默认值，但只有在值为 null 或 undefined 时才会生效。

const foo = null ?? 'default';
console.log(foo); // Output: 'default'

5.ES12（ECMAScript 2021）

1. Promise.allSettled()

Promise.allSettled() 方法接收一组 Promise 对象，等所有 Promise 都已解决（settled）后返回一个 Promise 对象，该对象包含每个 Promise 的结果。

const promises = [Promise.resolve('Success'),Promise.reject('Error'),
];Promise.allSettled(promises).then(results => results.forEach(result => console.log(result.status, result.value)))// Output: "fulfilled Success" 和 "rejected Error"