从 ES6 到 ES11，你需要知道的新特性
JavaScript 是一种动态的、弱类型的编程语言，常用于前端开发。它自问世以来，一直在不断地发展和完善，其中 ECMAScript（简称 ES）是 JavaScript 标准的核心。ES6（ES2015）是 ECMAScript 的第六个版本，于 2015 年发布。自此以后，每年都会发布一个新版本，ES7（ES2016）、ES8（ES2017）、ES9（ES2018）、ES10（ES2019）和 ES11（ES2020）。
本文将介绍从 ES6 到 ES11 的新特性，帮助你更好地了解和使用 JavaScript。内容详细且有深度和学习以及指导意义，并包含示例代码。
- ES6
ES6 引入了许多新的特性，包括箭头函数、模板字符串、解构赋值、let 和 const 关键字、类和模块等等。以下是一些常用的新特性：
1.1 箭头函数
箭头函数是 ES6 中的一个新特性，它可以简化函数的书写方式。箭头函数的语法如下：
// ES5
function add(a, b) {
return a + b;
}
// ES6
const add = (a, b) => a + b;箭头函数可以省略 function 关键字，而且如果函数体只有一条语句，可以省略 return 关键字。
1.2 模板字符串
模板字符串是 ES6 中的另一个新特性，它可以让我们更方便地拼接字符串。模板字符串的语法如下：
// ES5
var name = 'Tom';
var greeting = 'Hello, ' + name + '!';
// ES6
const name = 'Tom';
const greeting = `Hello, ${name}!`;模板字符串使用反引号（`）包裹，可以在其中使用 ${} 来嵌入变量或表达式。
1.3 解构赋值
解构赋值是 ES6 中的一个新特性，它可以让我们更方便地从对象或数组中获取值。解构赋值的语法如下：
-- -------------------- ---- ------- -- --- --- ------ - - ----- ------ ---- -- -- --- ---- - ------------ --- --- - ----------- -- --- ----- ------ - - ----- ------ ---- -- -- ----- - ----- --- - - -------
解构赋值使用花括号（{}）包裹，可以将要获取的属性名作为变量名。
1.4 let 和 const 关键字
let 和 const 是 ES6 中引入的两个新关键字，它们可以让我们更好地控制变量的作用域和可变性。
let 关键字用于声明变量，它的作用域是块级作用域，只在当前代码块中有效。const 关键字用于声明常量，它的值不能被重新赋值，但是如果常量是一个对象或数组，可以修改其属性或元素的值。
-- -------------------- ---- ------- -- --- --- - - -- -- ------ - --- - - -- - --------------- -- - -- --- --- - - -- -- ------ - --- - - -- - --------------- -- - ----- - - -- - - -- -- --
1.5 类和模块
ES6 引入了类和模块的概念，让 JavaScript 更像面向对象编程语言。类可以用来创建对象，模块可以用来组织代码。
-- -------------------- ---- -------
-- -
----- ------ -
----------------- ---- -
--------- - -----
-------- - ----
-
---------- -
------------------- -- ---- -- ------------- --- ----------- ----- -------
-
-
----- ------ - --- ------------- ----
------------------
-- --
-- -------
------ ----- --- - --- -- -- - - --
------ ----- -------- - --- -- -- - - --
-- ------
------ - ---- -------- - ---- ------------
------------------ ---- -- -
----------------------- ---- -- -- ES7
ES7 引入了一些新特性，包括 Array.prototype.includes() 和指数运算符。
2.1 Array.prototype.includes()
Array.prototype.includes() 方法用于判断数组中是否包含某个元素。它返回一个布尔值，表示数组是否包含该元素。
const arr = [1, 2, 3]; console.log(arr.includes(2)); // true console.log(arr.includes(4)); // false
2.2 指数运算符
指数运算符是 ES7 中的一个新特性，它可以用来计算一个数的幂次方。
console.log(2 ** 3); // 8
- ES8
ES8 引入了一些新特性，包括 async/await 和 Object.values() / Object.entries()。
3.1 async/await
async/await 是 ES8 中的一个新特性，它可以让我们更方便地处理异步操作。async 函数返回一个 Promise 对象，await 可以等待 Promise 对象的结果。
-- -------------------- ---- -------
-- ---
-------- ----------- -
------ ------------------
-------------- -- ----------------
---------- -- -----------
-
-- ---
----- -------- ----------- -
----- -------- - ----- -------------------
----- ---- - ----- ----------------
------ ----------
-
----- ---- - ----- ------------
------------------3.2 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]]- ES9
ES9 引入了一些新特性，包括 Rest/Spread 属性和 Promise.finally()。
4.1 Rest/Spread 属性
Rest/Spread 属性可以让我们更方便地操作对象和数组。
-- -------------------- ---- ------- -- -- ----- ---- - - -- -- -- -- -- - -- ----- ---- - - -------- -- - -- ------------------ -- - -- -- -- -- -- -- -- - - -- -- ----- ---- - --- -- --- ----- ---- - --------- -- --- ------------------ -- --- -- -- -- --
4.2 Promise.finally()
Promise.finally() 方法用于指定 Promise 结束时的回调函数，无论 Promise 成功还是失败都会执行。
fetch('/api/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error))
.finally(() => console.log('fetch finished'));- ES10
ES10 引入了一些新特性，包括 Array.prototype.flat() 和 Array.prototype.flatMap()。
5.1 Array.prototype.flat()
Array.prototype.flat() 方法用于将多维数组转化为一维数组。
const arr1 = [1, 2, [3, 4]]; const arr2 = arr1.flat(); console.log(arr2); // [1, 2, 3, 4]
5.2 Array.prototype.flatMap()
Array.prototype.flatMap() 方法可以将数组的每个元素先进行映射，然后再将结果压缩成一个新数组。
const arr1 = [1, 2, 3]; const arr2 = arr1.flatMap(x => [x * 2]); console.log(arr2); // [2, 4, 6]
- ES11
ES11 引入了一些新特性，包括可选链操作符和空值合并操作符。
6.1 可选链操作符
可选链操作符可以让我们更方便地访问对象的属性或方法，避免了因为属性或方法不存在而导致的错误。
-- -------------------- ---- -------
----- ------ - -
----- ------
---- ---
-------- -
----- ---------
-
--
--------------------------------- -- -------
------------------------------------ -- --
----------------------------------- -- -------
-------------------------------------- -- ---------6.2 空值合并操作符
空值合并操作符可以让我们更方便地设置默认值。
const name = person.name || 'Unknown'; const age = person.age ?? 0;
空值合并操作符（??）只在左侧的值为 null 或 undefined 时才会返回右侧的值。
总结
本文介绍了从 ES6 到 ES11 的新特性，包括箭头函数、模板字符串、解构赋值、let 和 const 关键字、类和模块、Array.prototype.includes()、指数运算符、async/await、Object.values() / Object.entries()、Rest/Spread 属性、Promise.finally()、Array.prototype.flat()、Array.prototype.flatMap()、可选链操作符和空值合并操作符。这些新特性可以让我们更方便地编写 JavaScript 代码，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65595e52d2f5e1655d3c9ca1