ECMAScript 是一种用于编写 Web 应用程序的脚本语言，它是 JavaScript 的标准化版本。自 1997 年发布第一版以来，ECMAScript 已经经历了多次更新，其中包括了许多重要的语言特性和功能。本文将介绍 ECMAScript 的版本演变趋势，从 ES5 到 ES11，逐一介绍每个版本的新增特性和改进，并包含示例代码。
ES5
ES5 是 ECMAScript 的第五个版本，于 2009 年发布。它引入了一些重要的语言特性，包括：
严格模式
ES5 引入了严格模式，可以通过在代码开头添加 "use strict"; 来启用。严格模式会对代码进行更严格的限制，可以帮助开发者避免一些常见的错误和陷阱。
"use strict";
JSON 支持
ES5 引入了对 JSON 的原生支持，可以使用 JSON.parse() 和 JSON.stringify() 来解析和序列化 JSON 数据。
var json = '{"name": "Alice", "age": 18}';
var obj = JSON.parse(json);
console.log(obj.name); // "Alice"
console.log(JSON.stringify(obj)); // '{"name":"Alice","age":18}'数组扩展方法
ES5 引入了一些数组扩展方法，包括 Array.prototype.forEach()、Array.prototype.map()、Array.prototype.filter()、Array.prototype.reduce() 等。
-- -------------------- ---- ------- --- --- - --- -- --- -------------------- ------ - ------------------ --- -- - -- - -- - --- ------ - ---------------- ------ - ------ ---- - -- --- -------------------- -- --- -- --
Function.prototype.bind()
ES5 引入了 Function.prototype.bind() 方法，可以用来改变函数的 this 指向。
function sayHi() {
console.log("Hi, " + this.name);
}
var obj = { name: "Alice" };
var sayHiToAlice = sayHi.bind(obj);
sayHiToAlice(); // "Hi, Alice"ES6
ES6 是 ECMAScript 的第六个版本，于 2015 年发布。它引入了许多重要的语言特性，包括：
let 和 const
ES6 引入了 let 和 const 关键字，用于声明块级作用域变量和常量。
-- -------------------- ---- ------- --- - - -- ----- -- - -------- - --- - - -- --------------- -- - - --------------- -- -
箭头函数
ES6 引入了箭头函数，可以更方便地定义匿名函数。
var arr = [1, 2, 3]; var newArr = arr.map((item) => item * 2); console.log(newArr); // [2, 4, 6]
模板字符串
ES6 引入了模板字符串，可以更方便地拼接字符串。
var name = "Alice";
var str = `Hello, ${name}!`;
console.log(str); // "Hello, Alice!"解构赋值
ES6 引入了解构赋值，可以更方便地从数组或对象中取出值。
var arr = [1, 2, 3];
var [a, b, c] = arr;
console.log(a, b, c); // 1 2 3
var obj = { name: "Alice", age: 18 };
var { name, age } = obj;
console.log(name, age); // "Alice" 18Promise
ES6 引入了 Promise，可以更方便地处理异步操作。
-- -------------------- ---- -------
-------- ----------- -
------ --- ---------------- --------- ------- -
------------------- -- -
----------------
-- ------
---
-
------------------------- ------ -
------------------ -- ------
---ES7
ES7 是 ECMAScript 的第七个版本，于 2016 年发布。它引入了一些重要的语言特性，包括：
Array.prototype.includes()
ES7 引入了 Array.prototype.includes() 方法，可以用来判断数组是否包含某个元素。
var arr = [1, 2, 3]; console.log(arr.includes(2)); // true console.log(arr.includes(4)); // false
指数运算符
ES7 引入了指数运算符 **，可以用来计算幂次方。
console.log(2 ** 3); // 8 console.log(Math.pow(2, 3)); // 8
ES8
ES8 是 ECMAScript 的第八个版本，于 2017 年发布。它引入了一些重要的语言特性，包括：
async/await
ES8 引入了 async/await，可以更方便地处理异步操作。
-- -------------------- ---- -------
----- -------- ----------- -
------ --- ---------------- --------- ------- -
------------------- -- -
----------------
-- ------
---
-
----- -------- ------ -
--- ---- - ----- ------------
------------------ -- ------
-
-------Object.values() 和 Object.entries()
ES8 引入了 Object.values() 和 Object.entries() 方法，可以用来获取对象的值和键值对数组。
var obj = { name: "Alice", age: 18 };
console.log(Object.values(obj)); // ["Alice", 18]
console.log(Object.entries(obj)); // [["name", "Alice"], ["age", 18]]ES9
ES9 是 ECMAScript 的第九个版本，于 2018 年发布。它引入了一些重要的语言特性，包括：
Rest/Spread 属性
ES9 引入了 Rest/Spread 属性，可以更方便地操作数组和对象。
-- -------------------- ---- ------- -- ---- -- --- --- - --- -- -- --- --- --- -- -------- - ---- -------------- -- ------ -- - - --- -- -- ------ -- --- ---- - - ----- -------- ---- -- -- --- ---- - - ------- -------- -- --- ---- - - -------- ------- -- ------------------ -- - ----- -------- ---- --- ------- -------- -
Promise.finally()
ES9 引入了 Promise.finally() 方法，可以用来指定 Promise 完成时的回调函数。
-- -------------------- ---- -------
-----------
-------------- ------ -
------------------
--
--------------- ------- -
---------------------
--
----------------- -- -
--------------------
---ES10
ES10 是 ECMAScript 的第十个版本，于 2019 年发布。它引入了一些重要的语言特性，包括：
Array.prototype.flat() 和 Array.prototype.flatMap()
ES10 引入了 Array.prototype.flat() 和 Array.prototype.flatMap() 方法，可以更方便地操作数组。
-- -------------------- ---- ------- -- ---------------------- --- --- - --- --- --- ------- ------------------------- -- --- -- -- -- -- ------------------------- --- --- - --- -- --- --- ------ - -------------------- ------ - ------ ----- - --- --- -------------------- -- --- -- --
String.prototype.trimStart() 和 String.prototype.trimEnd()
ES10 引入了 String.prototype.trimStart() 和 String.prototype.trimEnd() 方法，可以用来去除字符串开头和结尾的空格。
var str = " Hello, World! "; console.log(str.trimStart()); // "Hello, World! " console.log(str.trimEnd()); // " Hello, World!"
ES11
ES11 是 ECMAScript 的第十一个版本，于 2020 年发布。它引入了一些重要的语言特性，包括：
可选链操作符
ES11 引入了可选链操作符 ?.，可以更方便地处理可选属性。
var obj = { name: "Alice", address: { city: "Beijing" } };
console.log(obj.address?.city); // "Beijing"
console.log(obj.address?.country); // undefined空值合并操作符
ES11 引入了空值合并操作符 ??，可以更方便地处理空值。
var x = null; var y = x ?? "default"; console.log(y); // "default"
结论
ECMAScript 的版本演变趋势中，每个版本都引入了许多重要的语言特性和功能。开发者可以根据自己的需求和项目的兼容性要求，选择使用适合的 ECMAScript 版本。同时，学习 ECMAScript 的版本演变趋势，也有助于开发者更好地理解 JavaScript 的语言特性和发展历程。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6766108b76af2b9a20f258b0