ES6（ECMAScript 2015）发布以来，JavaScript 得到了新的发展，也促进了前端技术的发展。我们现在已经有了 ES10 （ECMAScript 2019）的版本，这就意味着我们必须密切关注新功能和特性。这篇文章将介绍 ES6 到 ES10 的一些核心特性。
ES6
let 和 const
在 ES6 中，let 和 const 代替了 var，它们具有块级作用域并且不会被变量提升：
-- -------------------- ---- -------
-------- --------- -
--- - - --
--- - - --
----- - - --
-- ------ -
--- - - -- -- ------------ -
--- - - -- -- ----- -
----- - - -- -- ----- -
-
--------------- -- -- -
--------------- -- -- -
--------------- -- -- -
-模版字面量
ES6 通过模版字面量引入了一种更加方便的生成字符串的方式：
const name = "world";
console.log(`Hello, ${name}!`);解构赋值
ES6 允许我们使用解构赋值，从数组或对象中提取数据并赋值给变量：
-- -------------------- ---- ------- ----- --- - - ----- ------- ---- -- -- ----- - ----- --- - - ---- ------------------ -- -- ------ ----------------- -- -- -- ----- --- - --- -- --- ----- --- -- -- - ---- --------------- -- -- - --------------- -- -- - --------------- -- -- -
箭头函数
箭头函数提供了一种更加简洁的方式来定义函数，并且自动绑定了 this：
-- -------------------- ---- -------
----- ------ - --- -- --- - ----
----------------------- -- -- --
----- --- - -
----- -------
---- ---
------ -- -- -
---------------- -- ---- -- ----------------
---------------- ----------- ----- -------
-
--
------------ -- -- ---- -- ---- -- ----------- - ---- --------- ----- -----对象字面量扩展
ES6 引入了更加方便的对象字面量扩展语法：
-- -------------------- ---- -------
----- ---- - -------
----- --- - ---
----- --- - - ----- --- --
----- ---- - -
----- -
-------------------
--
----- -
-------------------
-
--模块
ES6 引入了一种新的模块语法，可以让我们更方便地组织代码，实现模块化：
-- -------------------- ---- ------- -- -- ------ - --- - ---- ---------- -- -- ------ ------- -------- ----------- -- - ------ - - -- - -- ------ ------ -------- ---- -------------
ES7
Array.prototype.includes
ES7 引入了 Array.prototype.includes 方法，用来检查数组中是否包含一个指定的值：
const arr = [1, 2, 3]; console.log(arr.includes(2)); // 输出 true console.log(arr.includes(4)); // 输出 false
ES8
async/await
ES8 引入了 async/await，使得异步编程变得更加简单：
async function getData() {
const response = await fetch("https://api.example.com/data");
const data = await response.json();
console.log(data);
}Object.values 和 Object.entries
ES8 引入了 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
Rest/Spread 属性
ES9 中，我们可以使用 Rest/Spread 属性来更加方便地操作数组和对象：
const arr = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [...arr, ...arr2];
console.log(arr3); // 输出 [1, 2, 3, 4, 5, 6]
const obj = { a: 1, b: 2, c: 3 };
const { a, ...rest } = obj;
console.log(rest); // 输出 { b: 2, c: 3 }Promise.finally
ES9 引入了 Promise.finally 方法，它能在 Promise 完成或失败后执行一些代码：
getData()
.then(data => console.log(data))
.catch(error => console.error(error))
.finally(() => console.log("finished"));ES10
Array.prototype.flat 和 Array.prototype.flatMap
ES10 引入了 Array.prototype.flat 和 Array.prototype.flatMap 方法，它们能够更加方便地压平数组和映射数组：
const arr = [1, [2, 3], [4, [5, 6]]]; const flatArr = arr.flat(2); console.log(flatArr); // 输出 [1, 2, 3, 4, 5, 6] const arr2 = [1, 2, 3]; const mappedArr = arr2.flatMap(x => [x * 2]); console.log(mappedArr); // 输出 [2, 4, 6]
Object.fromEntries
ES10 引入了 Object.fromEntries 方法，它能够从键值对数组中创建对象：
const entries = [
["a", 1],
["b", 2],
["c", 3]
];
const obj = Object.fromEntries(entries);
console.log(obj); // 输出 { a: 1, b: 2, c: 3 }总结
在这篇文章中，我们介绍了 ES6 到 ES10 的一些核心特性，它们包括 let 和 const、模版字面量、解构赋值、箭头函数、对象字面量扩展、模块、Array.prototype.includes、async/await、Object.values、Object.entries、Rest/Spread 属性、Promise.finally、Array.prototype.flat、Array.prototype.flatMap 和 Object.fromEntries。学习这些新特性将有助于您更好地理解现代 JavaScript，进而提高您的前端开发能力。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64689489968c7c53b08c2b79