随着前端技术的不断发展，JavaScript 也在不断地更新和完善。ES6/ES7/ES8/ES9 是 JavaScript 的四个重要版本，其中包含了很多新的语法和 API，为我们的开发工作带来了很大的便利。本文将为大家汇总 ES6/ES7/ES8/ES9 中常用的 API，并通过实例来进行讲解，以便于大家更好地掌握这些新特性。
ES6 常用 API
let 和 const
ES6 中新增了两个关键字 let 和 const，用于声明变量和常量。let 声明的变量只在块级作用域内有效，而 const 声明的常量则不能被重新赋值。这样可以有效避免变量污染和意外修改常量的情况。
-- -------------------- ---- -------
-- --- --
-------- ------ -
--- - - --
-- ------ -
--- - - --
--------------- -- -
-
--------------- -- -
-
-- ----- --
----- -- - ----------
-- - -- -- ---------- ---------- -- -------- ---------箭头函数
ES6 中引入了箭头函数，可以简化函数的书写。箭头函数不需要 function 关键字，而且可以省略 return 关键字。同时，箭头函数的 this 指向是固定的，不会因为执行环境的改变而改变。
-- -------------------- ---- -------
-- ------------
-------- ------ -- -
------ - - --
-
--- --- - --- -- -- - - --
-- ---- -------
--- --- - -
------ --
---- ---------- -
---------------------- -
-------------
------------------------
-- ------
-
--
--- --- - -
------ --
---- ---------- -
-------------- -- -
-------------
------------------------
-- ------
-
--模板字符串
ES6 中新增了模板字符串，可以方便地进行字符串的拼接和换行。模板字符串使用反引号（`）包裹，其中可以使用 ${} 来引用变量或表达式。
// 普通字符串和模板字符串的对比
let name = 'Tom';
let str1 = 'Hello, ' + name + '!';
let str2 = `Hello, ${name}!`;
// 换行示例
let str3 = `Hello,
${name}!`;解构赋值
ES6 中引入了解构赋值，可以方便地从数组或对象中提取数据并赋值给变量。解构赋值可以减少代码量，提高可读性。
// 数组解构赋值
let arr = [1, 2, 3];
let [a, b, c] = arr;
// 对象解构赋值
let obj = { name: 'Tom', age: 18 };
let { name, age } = obj;Set 和 Map
ES6 中新增了 Set 和 Map 两种集合类型。Set 是一种无序不重复元素的集合，可以用来去重。Map 是一种键值对的集合，可以快速查找某个键对应的值。
-- -------------------- ---- ------- -- --- -- --- --- - --- ------- -- -- ---- ----------------- -- --- --- -- -- -- --- -- --- --- - --- ------ --------------- ------- -------------- ---- ----------------------------- -- ---
ES7 常用 API
Array.prototype.includes
ES7 中新增了 Array.prototype.includes 方法，用于判断一个数组是否包含某个元素。这个方法比 indexOf 更加直观和方便。
let arr = [1, 2, 3]; console.log(arr.includes(2)); // true console.log(arr.includes(4)); // false
指数运算符
ES7 中新增了指数运算符 **，可以用来计算幂次方。这个运算符比 Math.pow 更加直观和方便。
console.log(2 ** 3); // 8 console.log(2 ** 4); // 16
ES8 常用 API
async/await
ES8 中引入了 async/await，用于简化异步操作的代码。async/await 是基于 Promise 的，可以让我们使用同步的方式来处理异步操作。
-- -------------------- ---- -------
-- ------- --
-------- ----------- -
------ --- ----------------- ------- -- -
------------- -- -
----------------
-- ------
---
-
--------------------- -- -------------------
-- ----------- --
----- -------- ----------- -
------ --- ----------------- ------- -- -
------------- -- -
----------------
-- ------
---
-
----- -------- ------ -
--- ---- - ----- ------------
------------------
-
-------Object.values 和 Object.entries
ES8 中新增了 Object.values 和 Object.entries 方法，用于获取对象的值和键值对数组。这两个方法可以方便地遍历对象的属性。
let obj = { name: 'Tom', age: 18 };
console.log(Object.values(obj)); // ['Tom', 18]
console.log(Object.entries(obj)); // [['name', 'Tom'], ['age', 18]]ES9 常用 API
Promise.prototype.finally
ES9 中新增了 Promise.prototype.finally 方法，用于在 Promise 状态改变后执行一些操作。这个方法和 then 不同，即使 Promise 被拒绝或者成功，finally 都会执行。
fetch('https://jsonplaceholder.typicode.com/todos/1')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error))
.finally(() => console.log('Fetch completed.'));Rest/Spread 属性
ES9 中引入了 Rest/Spread 属性，可以用于简化对象和数组的操作。Rest 属性可以将对象或数组的剩余属性合并成一个新的对象或数组。Spread 属性可以将对象或数组展开成单独的属性。
-- -------------------- ---- ------- -- ---- ---- --- --- - - ----- ------ ---- --- ------- ------ -- --- - ----- ------- - - ---- ------------------ -- - ---- --- ------- ------ - --- --- - --- -- -- -- --- --- --- -- -------- - ---- ------------------ -- --- -- -- -- ------ ---- --- ---- - --- -- --- --- ---- - --- -- --- --- ---- - --------- --------- ------------------ -- --- -- -- -- -- -- --- ---- - - ----- ----- -- --- ---- - - ---- -- -- --- ---- - - -------- ------- -- ------------------ -- - ----- ------ ---- -- -
总结
ES6/ES7/ES8/ES9 中新增了很多新的语法和 API，为我们的开发工作带来了很大的便利。本文介绍了其中一些常用的 API，并通过实例来进行讲解。希望本文对大家学习和使用这些新特性有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65bd8261add4f0e0ff736474