JavaScript 是一门非常流行的编程语言，它对互联网发展做出了重要贡献。随着时间的推移，JavaScript 的发展也越来越快，各个版本都有许多新功能被加入进来。现在，我们来一起总结一下 JavaScript 的新特性，包括 ES6, ES7, ES8, ES9, ES10 和 ES11。
ES6
ES6 (ECMAScript 2015) 是 JavaScript 的第六个正式版本，也是一个非常重要的版本。它引入了大量的新特性，例如模板字符串、箭头函数、let 和 const 声明、类和继承、解构、迭代器和生成器等等。
下面列举一些 ES6 的新特性及其示例代码：
模板字符串
模板字符串可以让我们在字符串中使用变量和表达式，而无需使用 + 连接符和转义字符。我们只需要把文本和变量用 ${} 包裹起来即可。例如：
const name = 'Alice';
console.log(`Hello ${name}!`);箭头函数
箭头函数是一个非常方便的语法糖，它可以让我们更简洁地定义函数。箭头函数可以省略 return 关键字和花括号，从而减少了代码的复杂度。例如：
const add = (x, y) => x + y; console.log(add(1, 2)); // 输出 3
let 和 const 声明
let 和 const 声明是 ES6 中新增的关键字，它们可以让我们更好地控制变量的作用域和生命周期。
-- -------------------- ---- ------- --- - - -- ----- - - -- - --- - - -- ----- - - -- -------------- --- -- -- - - - -------------- --- -- -- - -
类和继承
ES6 引入了类和继承的概念，让 JavaScript 更加接近面向对象编程的范式。例如：
-- -------------------- ---- -------
----- ------ -
----------------- -
--------- - -----
-
----- -
------------------------- -- ----------
-
-
----- --- ------- ------ -
----------------- -
------------
-
------ -
------------------------- -- -----------
-
-
----- --- - --- -----------
---------- -- -- --- -- -------
----------- -- -- --- -- --------解构
解构可以让我们方便地取出对象或数组中的某些属性或元素。例如：
const person = {
name: 'Alice',
age: 18,
gender: 'female',
};
const { name, age } = person;
console.log(name, age); // 输出 Alice 18ES7
ES7 (ECMAScript 2016) 是 JavaScript 的第七个正式版本。它引入了一些小而实用的新特性，例如指数运算符和 Array.prototype.includes() 方法。
指数运算符
指数运算符可以让我们更方便地进行幂运算。例如：
console.log(2 ** 3); // 输出 8
Array.prototype.includes()
Array.prototype.includes() 方法可以让我们更方便地判断某个元素是否在数组中。例如：
const arr = [1, 2, 3]; console.log(arr.includes(2)); // 输出 true
ES8
ES8 (ECMAScript 2017) 是 JavaScript 的第八个正式版本。它引入了一些新特性，例如 async/await、Object.entries() 和 Object.values() 方法。
async/await
async/await 可以让我们更方便地编写异步代码。async 函数返回一个 Promise 对象，而 await 关键字可以让我们等待 Promise 对象的完成。例如：
-- -------------------- ---- ------- ----- -------- ----- - ----- ------- - ----- --------------------- ----- ----- - ----- --------------- ----- ------- - ----- --------------------- ----- ----- - ----- --------------- ------ - ------ ----- -- - ------------------- -- - -------------------- ---
Object.entries() 和 Object.values()
Object.entries() 和 Object.values() 方法可以让我们更方便地读取对象的属性和值。
const obj = { x: 1, y: 2, z: 3 };
console.log(Object.entries(obj)); // 输出 [ ['x', 1], ['y', 2], ['z', 3] ]
console.log(Object.values(obj)); // 输出 [ 1, 2, 3 ]ES9
ES9 (ECMAScript 2018) 是 JavaScript 的第九个正式版本。它引入了一些新特性，例如 rest/spread 属性、Promise.prototype.finally() 方法和正则表达式命名捕获组。
rest/spread 属性
rest/spread 属性可以让我们更方便地处理对象、数组和函数的参数。
-- -------------------- ---- ------- ----- ---- - - -- -- -- - -- ----- ---- - - -- -- ------- -- ------------------ -- -- - -- -- -- -- -- - - ----- ---- - --- -- --- ----- ---- - --------- -- --- ------------------ -- -- --- -- -- -- -- -------- ------ -------- - -------------- ------ - ------ -- -- --- -- -- - --- -- --
Promise.prototype.finally()
Promise.prototype.finally() 方法可以让我们在 Promise 对象完成时执行一些代码，无论它是成功还是失败。
fetch('/api/data').then((result) => {
console.log(result);
}).catch((error) => {
console.error(error);
}).finally(() => {
console.log('Done.');
});正则表达式命名捕获组
正则表达式命名捕获组可以让我们更方便地获取匹配到的字符串和子串。
const re = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;
const str = '2021-09-20';
const match = str.match(re);
console.log(match.groups.year); // 输出 2021
console.log(match.groups.month); // 输出 09
console.log(match.groups.day); // 输出 20ES10
ES10 (ECMAScript 2019) 是 JavaScript 的第十个正式版本。它引入了一些新特性，例如 Array.prototype.flat() 和 Array.prototype.flatMap() 方法、String.prototype.trimStart() 和 String.prototype.trimEnd() 方法、Object.fromEntries() 方法等。
Array.prototype.flat() 和 Array.prototype.flatMap()
Array.prototype.flat() 和 Array.prototype.flatMap() 方法可以让我们更方便地处理嵌套数组和映射数组。
const arr1 = [1, [2, 3], [4, [5, 6]]]; console.log(arr1.flat()); // 输出 [1, 2, 3, 4, [5, 6]] const arr2 = [1, 2, 3]; console.log(arr2.flatMap(x => [x * 2])); // 输出 [2, 4, 6]
String.prototype.trimStart() 和 String.prototype.trimEnd()
String.prototype.trimStart() 和 String.prototype.trimEnd() 方法可以让我们更方便地处理字符串的前后空格。
const str = ' hello world! '; console.log(str.trimStart()); // 输出 'hello world! ' console.log(str.trimEnd()); // 输出 ' hello world!'
Object.fromEntries()
Object.fromEntries() 方法可以让我们更方便地从键值对数组创建对象。
const arr = [['x', 1], ['y', 2], ['z', 3]];
const obj = Object.fromEntries(arr);
console.log(obj); // 输出 { x: 1, y: 2, z: 3 }ES11
ES11 (ECMAScript 2020) 是 JavaScript 的第十一个正式版本。它引入了一些新特性，例如可选链操作符、空值合并操作符、String.prototype.matchAll() 方法等。
可选链操作符
可选链操作符可以让我们更方便地访问对象的某个属性或方法，而不必担心对象不存在的情况。
const obj = { x: { y: { z: 1 } } };
console.log(obj?.x?.y?.z); // 输出 1
console.log(obj?.a?.b?.c); // 输出 undefined空值合并操作符
空值合并操作符可以让我们更方便地处理空值或未定义值。
const obj = { x: 1 };
const x = obj.x ?? 2;
const y = obj.y ?? 2;
console.log(x, y); // 输出 1 2String.prototype.matchAll()
String.prototype.matchAll() 方法可以让我们更方便地查找字符串中的所有匹配项，并且可以访问每个匹配项的详细信息。
-- -------------------- ---- ------- ----- -- - ------------------------------------------------ ----- --- - ------------------------ ----- ------- - ----------------- --- ------ ----- -- -------- - ------------------------------ ------------------- ------------------ - -- -- ------ ---- ---- -- -- ------ ---- ----
总结
以上就是 JavaScript 新特性的总结。每个版本都有一些不同的特性，它们可以让我们更方便地编写代码、更高效地运行代码，也可以让我们更好地控制代码的结构和逻辑。学习这些新特性对于打造高效的前端应用程序非常有帮助，但也需要注意新特性的兼容性和正确使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fce09895b1f8cacdcab409