ES7、ES8、ES9、ES10、ES11、ES12 新特性汇总合集_es 版本变化总结

在过去几年里，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
1
2
3

2. 指数运算符 **

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

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

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]]
1
2
3

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

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

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

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'));
1
2
3
4

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 }
1
2
3
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]
1
2
3
4
5
6

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 }
1
2
3

5.ES11（ECMAScript 2020）

1. Optional Chaining (可选链)

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

const obj = {
  foo: {
    bar: {
      baz: 42
    }
  }
};

console.log(obj.foo?.bar?.baz); // Output: 42
1
2
3
4
5
6
7
8
9

2. Nullish 合并运算符

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

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

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"
1
2
3
4
5
6
7
8

以上就是ES7、ES8、ES9、ES10、ES11、ES12 新特性汇总合集啦有用就点个赞吧~