随着前端技术的不断发展，JavaScript 也在不断地更新和完善。ES6/ES7/ES8/ES9 是 JavaScript 的四个重要版本，其中包含了很多新的语法和 API，为我们的开发工作带来了很大的便利。本文将为大家汇总 ES6/ES7/ES8/ES9 中常用的 API，并通过实例来进行讲解，以便于大家更好地掌握这些新特性。
ES6 常用 API
let 和 const
ES6 中新增了两个关键字 let 和 const，用于声明变量和常量。let 声明的变量只在块级作用域内有效，而 const 声明的常量则不能被重新赋值。这样可以有效避免变量污染和意外修改常量的情况。
// let 示例
function test() {
let a = 1;
if (true) {
let a = 2;
console.log(a); // 2
}
console.log(a); // 1
}
// const 示例
const PI = 3.1415926;
PI = 3; // TypeError: Assignment to constant variable.箭头函数
ES6 中引入了箭头函数，可以简化函数的书写。箭头函数不需要 function 关键字，而且可以省略 return 关键字。同时，箭头函数的 this 指向是固定的，不会因为执行环境的改变而改变。
// 普通函数和箭头函数的对比
function add(a, b) {
return a + b;
}
let add = (a, b) => a + b;
// this 指向问题的对比
let obj = {
count: 0,
add: function() {
setInterval(function() {
this.count++;
console.log(this.count);
}, 1000);
}
};
let obj = {
count: 0,
add: function() {
setInterval(() => {
this.count++;
console.log(this.count);
}, 1000);
}
};模板字符串
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 是一种键值对的集合，可以快速查找某个键对应的值。
// Set 示例
let set = new Set([1, 2, 3, 3]);
console.log(set); // Set {1, 2, 3}
// Map 示例
let map = new Map();
map.set('name', 'Tom');
map.set('age', 18);
console.log(map.get('name')); // TomES7 常用 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 的，可以让我们使用同步的方式来处理异步操作。
// Promise 示例
function fetchData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Data');
}, 1000);
});
}
fetchData().then(data => console.log(data));
// async/await 示例
async function fetchData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Data');
}, 1000);
});
}
async function test() {
let data = await fetchData();
console.log(data);
}
test();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 属性可以将对象或数组展开成单独的属性。
// Rest 属性示例
let obj = { name: 'Tom', age: 18, gender: 'male' };
let { name, ...rest } = obj;
console.log(rest); // { age: 18, gender: 'male' }
let arr = [1, 2, 3, 4, 5];
let [a, b, ...rest] = arr;
console.log(rest); // [3, 4, 5]
// Spread 属性示例
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let arr3 = [...arr1, ...arr2];
console.log(arr3); // [1, 2, 3, 4, 5, 6]
let obj1 = { name: 'Tom' };
let obj2 = { age: 18 };
let obj3 = { ...obj1, ...obj2 };
console.log(obj3); // { name: 'Tom', age: 18 }总结
ES6/ES7/ES8/ES9 中新增了很多新的语法和 API，为我们的开发工作带来了很大的便利。本文介绍了其中一些常用的 API，并通过实例来进行讲解。希望本文对大家学习和使用这些新特性有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65bd8261add4f0e0ff736474