JavaScript 是一门动态语言，自问世以来一直在不断发展。自 ES5 发布以来，JavaScript 语言每年都会发布新的版本，增加一些新的功能来弥补它之前版本所没有的不足。本文将会介绍从 ES5 到 ES12，JavaScript 语言的演进历程，以及每个版本新增的功能，并给出相应的代码示例。
ES5
ES5（ECMAScript 5）是 JavaScript 发展历史上重要的里程碑。ES5 引入了一些新的语法特性，让 JavaScript 更加灵活、可维护和适应大规模开发。以下是 ES5 新增的主要特性：
严格模式
ES5 引入了严格模式，用于限制 JavaScript 代码的松散行为，强制执行更严格的语法和错误检查。使用严格模式，可以避免一些常见的错误，并提高代码的性能和安全性。要使用严格模式，可以在 JavaScript 文件或函数的头部添加 'use strict';。
// 严格模式
'use strict';
// 普通模式
function myFunction() {
x = 10;
}新的数组方法
ES5 引入了一些新的数组方法，比如 Array.prototype.forEach()、Array.prototype.map()、Array.prototype.filter() 等等，这些方法使得数组处理变得更加方便和简单。
-- -------------------- ---- ------- --- ------- - --- -- -- -- --- -- ------- ---- -------------------------------- - -------------------- --- -- --- ----- --- ---------- - ---------------------------- - ------ ------ - -- --- -- ------ ---- --- --------------- - ------------------------------- - ------ ------ - -- ---
JSON 支持
ES5 引入了对 JSON（JavaScript Object Notation）的支持，可以用内置函数 JSON.parse() 和 JSON.stringify() 把 JSON 数据转换成 JavaScript 对象或者字符串。
-- -------------------- ---- ------- --- ------ - - ----- ------ ---- -- -- -- - ---------------- --------- --- ------------- - ----------------------- -- ------------------------- -- - ------------ --------- --- ----------- - --------------------------
ES6
ES6（ECMAScript 6）发布于 2015 年，也被称为 ES2015，是 JavaScript 发展历程中一次重大的升级。ES6 引入了很多新的语言特性和 API，使得 JavaScript 在功能和性能上都有了很大的提升。以下是 ES6 新增的一些主要特性：
let 和 const
ES6 引入了 let 和 const 关键字，分别用于声明变量和常量，用法和 var 关键字比较相似，但是具有更细粒度的作用域控制和更好的性能。
// 用 let 声明变量 let x = 1; // 用 const 声明常量 const y = 2;
Arrow Function
ES6 允许使用箭头函数，使得函数定义变得更加简单明了。
// 用箭头函数定义函数 let sum = (a, b) => a + b;
模板字符串
ES6 引入了模板字符串，使得字符串的拼接变得更加方便和灵活。
// 模板字符串
let name = 'Tom';
let age = 20;
let message = `My name is ${name}, I am ${age} years old.`;解构赋值
ES6 允许使用解构赋值，使得数组和对象的操作变得更加方便和灵活。
// 数组解构赋值
let [a, b, c] = [1, 2, 3];
// 对象解构赋值
let {name, age} = {name: 'Tom', age: 20};ES7
ES7（ECMAScript 2016）发布于 2016 年，是 JavaScript 发展历程中一个小的更新。ES7 主要引入了一些新的语言特性，用于改善 JavaScript 的使用体验。
Array#includes
ES7 引入了 Array#includes 方法，用于检查数组中是否包含特定的元素。
let numbers = [1, 2, 3, 4, 5];
if (numbers.includes(4)) {
console.log('The array includes the number 4.');
}函数的 rest 参数
ES7 允许使用 ... 运算符，用于声明函数的 rest 参数，用于将多余的函数参数收集到一个数组中。
-- -------------------- ---- -------
-------- --------------- -
--- ------ - --
--- ---- ------ -- -------- -
------ -- -------
-
------ -------
-
------ -- -- --- -- --ES8
ES8（ECMAScript 2017）发布于 2017 年，主要引入了一些新的语言特性，用于改善 JavaScript 的使用体验。
对象属性名称表达式
ES8 允许使用对象属性名称表达式，用于更加方便灵活地定义对象属性。
let name = 'Tom';
let person = {
[name]: 'My name is Tom.'
};
console.log(person['Tom']); // My name is Tom.String#padStart 和 String#padEnd
ES8 引入了 String#padStart 和 String#padEnd 方法，用于填充字符串。
let str = 'hello'; str.padStart(10, '-'); // '-----hello' str.padEnd(10, '-'); // 'hello-----'
异步函数
ES8 允许使用 async/await 关键字，用于更加方便地编写异步的代码。
async function getData() {
let response = await fetch('https://jsonplaceholder.typicode.com/posts');
let data = await response.json();
return data;
}
getData().then(data => console.log(data));ES9
ES9（ECMAScript 2018）发布于 2018 年，主要引入了一些新的语言特性，用于改善 JavaScript 的使用体验。
Object Rest/Spread Properties
ES9 允许使用对象 Rest/Spread Properties，用于更加方便地操作对象。
let {a, b, ...rest} = {a: 1, b: 2, c: 3, d: 4};
console.log(a); // 1
console.log(b); // 2
console.log(rest); // {c: 3, d: 4}Promise.prototype.finally
ES9 引入了 Promise.prototype.finally 方法，用于在 Promise 执行结束后执行一些清理操作。
-- -------------------- ---- -------
--- ------- - --- ----------------- ------- -- -
--- ------ - ------------- - --- - --------- - -------
------------- -- -
-- ------- --- ---------- -
----------
- ---- -
---------
-
-- ------
---
--------------- -- ---------------- ------- -- ------------
--------- -- ---------------- ------- -- ------------
----------- -- ---------------- ------- -- -------------ES10
ES10（ECMAScript 2019）发布于 2019 年，主要引入了一些新的语言特性，用于改善 JavaScript 的使用体验。
Array#flat 和 Array#flatMap
ES10 引入了 Array#flat 和 Array#flatMap 方法，用于更加方便地处理嵌套数组。
let array = [[1, 2], [3, 4]]; console.log(array.flat()); // [1, 2, 3, 4] let newArray = [1, 2, 3].flatMap(x => [x * 2]); console.log(newArray); // [2, 4, 6]
String#trimStart 和 String#trimEnd
ES10 引入了 String#trimStart 和 String#trimEnd 方法，用于更加方便地去除字符串的头尾空格。
let str = ' Hello, World! '; console.log(str.trimStart()); // 'Hello, World! ' console.log(str.trimEnd()); // ' Hello, World!'
ES11
ES11（ECMAScript 2020）发布于 2020 年，主要引入了一些新的语言特性，用于改善 JavaScript 的使用体验。
Nullish 合并运算符
ES11 引入了 Nullish 合并运算符 ??，用于更加方便地处理空值。
-- -------------------- ---- ------- --- ---- - - ----- ------ ---- --- ------ --- -------- ---- -- --- -------- - --------- -- ------------ -- ----- --- ------- - -------- -- --- -- -- --- --------- - ---------- -- --- ------- -- -- --- ----------- - ------------ -- --- --------- -- --- --------
可选链操作符
ES11 引入了可选链操作符 ?.，用于更加方便地处理对象和数组的属性和方法。
-- -------------------- ---- -------
--- -------- - -
----- ------
-------- -
------- ----- -----
-------- -------
-
--
--- ---------- - ------------------------- -- ----- ----
--- ----------- - -------------------------- -- -------
--- --------- - ------------------------ -- ---------ES12
ES12（ECMAScript 2021）是即将发布的 JavaScript 最新版本，主要引入了以下新的语言特性。
Promise.any
ES12 引入了 Promise.any 方法，用于对多个 Promise 实例进行竞争，返回最先是 fulfilled 状态的 Promise 实例的结果。
let promise1 = new Promise((resolve) => setTimeout(resolve, 1000, 'Hello'));
let promise2 = new Promise((resolve) => setTimeout(resolve, 2000, 'World'));
let promise3 = new Promise((resolve, reject) => setTimeout(reject, 3000, 'Error'));
Promise.any([promise1, promise2, promise3])
.then((value) => console.log(value))
.catch((error) => console.log(error));数字分隔符
ES12 允许在数字中使用数字分隔符 _，用于更加方便地表示大的数字。
let million = 1_000_000; // 等同于 1000000 let billion = 1_000_000_000; // 等同于 1000000000
String#replaceAll
ES12 引入了 String#replaceAll 方法，用于替换字符串中所有的匹配项。
let str = 'The quick brown fox jumps over the lazy dog.';
console.log(str.replaceAll('the', 'a')); // 'The quick brown fox jumps over a lazy dog.'总结
JavaScript 是一门不断发展的语言，从 ES5 到 ES12，每个版本都引入了新的特性和语言支持，不断提升了它的性能和可用性。本文介绍了每个版本的主要特性，并提供了相应的代码示例，希望可以帮助你更好地了解和掌握 JavaScript。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d235a3b5eee0b525996c59