随着前端技术的发展和变化，JavaScript 作为前端开发的基础语言，也在不断地更新和完善，继 ES5 后，ES6 ~ ES10 带来了许多新的特性和改进，使得 JavaScript 代码更加简洁、易读、高效。本文将回顾最近几年 JavaScript 的变化，并介绍其中一些重要的特性，以及如何使用它们来写出更好的代码。
ES6（2015）
ES6 是 JavaScript 中的一个重大更新，带来了大量的新特性。这些特性包括：
1. let 和 const 声明
ES6 引入了两个新的变量声明关键字：let 和 const。在之前的版本中，使用 var 声明的变量只有函数作用域或全局作用域，而 let 和 const 可以声明块级作用域的变量。其中，let 声明的变量可以被修改，const 声明的变量则不能。这样可以避免意外修改变量的值，提高代码的可维护性。
-- -------------------- ---- ------- -- -- --- ---- --- - - --- - --- - - -- --------------- -- - - --------------- -- -- -- -- ----- ---- ----- -- - ---------- -- - -- -- ------- ----- ----
2. 模板字符串
模板字符串是 ES6 提供的一种新的字符串语法，用反引号 ` 括起来，可以包含变量和表达式。与传统字符串不同的是，模板字符串可以换行以及插入变量，更加灵活。
// 使用模板字符串
let name = "Alice";
let str = `Hello ${name}, today is ${new Date().toISOString()}.`;
console.log(str);
// 输出：Hello Alice, today is 2022-09-20T07:00:00.000Z.3. 箭头函数
箭头函数是 ES6 中的又一新特性，它可以更简洁地声明函数，避免了 this 绑定问题。箭头函数是匿名的，并且不能用作构造函数。
// 使用箭头函数 let arr = [1, 2, 3]; let double = arr.map(x => x * 2); console.log(double); // [2, 4, 6]
4. 类与继承
ES6 引入了类和继承的概念，一种更加面向对象的编程方式。使用 class 声明类，extends 关键字声明继承关系，super 关键字表示父类的构造函数。
-- -------------------- ---- -------
-- ------
----- ------ -
----------------- -
--------- - -----
-
------- -
--------------------- - - ----- - ---------
-
-
----- --- ------- ------ -
------- -
--------------------- - - ---------
-
-
--- - - --- --------------
---------- -- ------ ------5. 模块化导入和导出
ES6 使得 JavaScript 代码可以按照模块的方式组织，使用 import 和 export 关键字实现模块化导入和导出。这样可以更好地管理代码，提高代码的复用性和可维护性。
// 使用模块化导入和导出
export function sum(a, b) {
return a + b;
}
import { sum } from './module.js';
console.log(sum(1, 2)); // 3ES7 ~ ES10（2016 ~ 2019）
在 ES6 发布后的几年，JavaScript 又陆续发布了 ES7 至 ES10 的版本，其中包含了许多小的改进和新特性。这里我们简单罗列一下：
1. ES7 中的数组 includes
ES7 引入了数组的 includes 方法，用于判断一个元素是否包含在数组中。
// 使用数组的 includes 方法 let arr = [1, 2, 3]; console.log(arr.includes(2)); // true console.log(arr.includes(4)); // false
2. ES8 中的 async/await
ES8 中引入了 async/await 关键字，用于更方便地处理异步操作。async 表示函数返回一个 Promise 对象，await 表示暂停异步函数的执行，直到 Promise 对象的状态变为 resolved 或 rejected。
// 使用 async/await 处理异步操作
async function fetchUser(id) {
let url = `https://api.example.com/users/${id}`;
let response = await fetch(url);
let user = await response.json();
return user;
}3. ES9 中的对象扩展方法
ES9 引入了一些对象扩展方法，包括 Object.values、Object.entries 和 Object.fromEntries。这些方法使得操作对象更加方便。
// 使用对象扩展方法
let 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]]
let arr = [['a', 1], ['b', 2], ['c', 3]];
console.log(Object.fromEntries(arr)); // { a: 1, b: 2, c: 3 }4. ES10 中的可选链运算符
ES10 引入了一种新的运算符 ?，称为可选链运算符，可以更方便地访问嵌套对象或数组的属性或元素，避免了代码中的繁琐判断。
// 使用可选链运算符
let user = { name: "Alice", address: { street: "123 Main St." } };
console.log(user.address?.street); // '123 Main St.'
console.log(user.address?.city); // undefined总结
JavaScript 的不断更新与发展，为我们带来了越来越多的可能性和创新。越来越多的新特性和语法使得代码更加优雅、清晰，同时也提升了开发效率和代码可维护性。作为前端开发者，我们需要不断学习和了解这些新技术，以便更好地应对日益增长的需求和挑战，写出更加高效、可读、可维护的代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64704a86968c7c53b0e6bf2c