🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》、《前端求职突破计划》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

自 2015 年 ES6（ECMAScript 2015）发布以来，JavaScript 语言经历了快速的发展和演变。ES6 及其后续版本（ES2016、ES2017 等）引入了许多强大的新特性和改进，极大地提升了 JavaScript 的表达能力和开发效率。本文将详细介绍 ES6 及以上版本新增的主要特性，帮助开发者更好地理解和应用这些新特性。

一、ES6 的新增特性

ES6 是 JavaScript 语言的一个重大更新，引入了许多新特性，包括语法糖、新数据结构、类、模块化支持等。以下是 ES6 的主要新增特性：

（一）语法糖

1. 箭头函数（Arrow Functions）

   • 简化了函数的书写方式，省略了 function 关键字，并且可以省略返回值的花括号（如果只有一条语句）。
   • 箭头函数不绑定自己的 this，而是继承自外部上下文的 this。

   const add = (a, b) => a + b;
   console.log(add(2, 3)); // 5
   

2. 模板字符串（Template Literals）

   • 使用反引号（`）定义字符串，支持多行字符串和嵌入表达式。

   const name = "Alice";
   const age = 30;
   const message = `Hello, my name is ${name} and I am ${age} years old.`;
   console.log(message);
   

3. 解构赋值（Destructuring Assignment）

   • 允许从数组或对象中提取数据并赋值给变量。

   const [a, b] = [1, 2];
   console.log(a, b); // 1 2
   
   const { name, age } = { name: "Alice", age: 30 };
   console.log(name, age); // Alice 30
   

4. 默认参数（Default Parameters）

   • 函数参数可以设置默认值，如果调用时未传入参数，则使用默认值。

   function greet(name = "Guest") {
     console.log(`Hello, ${name}!`);
   }
   greet(); // Hello, Guest!
   greet("Alice"); // Hello, Alice!
   

（二）新数据结构

1. let 和 const

   • let 和 const 提供了块级作用域（block scope），解决了 var 的作用域提升问题。
   • const 用于声明常量，声明后不能重新赋值。

   {
     let x = 1;
     const y = 2;
   }
   console.log(x); // ReferenceError: x is not defined
   console.log(y); // ReferenceError: y is not defined
   

2. Symbol

   • Symbol 是一种新的原始数据类型，用于创建唯一的标识符。

   const mySymbol = Symbol("mySymbol");
   console.log(mySymbol); // Symbol(mySymbol)
   

3. Map 和 Set

   • Map 是一个键值对集合，键可以是任意类型。
   • Set 是一个集合，存储唯一的值。

   const myMap = new Map();
   myMap.set("key1", "value1");
   console.log(myMap.get("key1")); // value1
   
   const mySet = new Set([1, 2, 3, 3]);
   console.log(mySet.size); // 3
   

（三）类（Classes）

• ES6 引入了类语法，用于定义构造函数和方法。

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

const alice = new Person("Alice", 30);
alice.greet(); // Hello, my name is Alice and I am 30 years old.

（四）模块（Modules）

• ES6 引入了模块化支持，允许开发者将代码拆分成多个模块，通过 import 和 export 语法进行导入和导出。

// math.js
export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

// main.js
import * as Math from "./math.js";
console.log(Math.add(2, 3)); // 5
console.log(Math.subtract(5, 2)); // 3

（五）其他特性

1. Promise

   • Promise 是一个用于异步编程的对象，表示一个尚未完成的操作。

   const myPromise = new Promise((resolve, reject) => {
     setTimeout(() => resolve("Promise resolved!"), 1000);
   });
   
   myPromise.then((result) => console.log(result)); // Promise resolved!
   

2. for...of 和 for...in

   • for...of 遍历可迭代对象（如数组、字符串等）的值。
   • for...in 遍历对象的键。

   const arr = [1, 2, 3];
   for (const value of arr) {
     console.log(value); // 1 2 3
   }
   
   const obj = { a: 1, b: 2 };
   for (const key in obj) {
     console.log(key); // a b
   }
   

二、ES2016（ES7）及以后版本的新增特性

在 ES6 的基础上，ES2016 及以后的版本继续引入了许多新特性，进一步完善了 JavaScript 的功能。以下是一些重要的新增特性：

（一）ES2016（ES7）

1. 指数运算符（Exponentiation Operator）

   • 使用 ** 表示指数运算。

   console.log(2 ** 3); // 8
   

2. Array.prototype.includes

   • 检查数组是否包含某个值。

   const arr = [1, 2, 3];
   console.log(arr.includes(2)); // true
   console.log(arr.includes(4)); // false
   

（二）ES2017（ES8）

1. async 和 await

   • async 函数用于声明异步函数，await 用于等待 Promise 的结果。

   async function fetchData() {
     const response = await fetch("https://api.example.com/data");
     const data = await response.json();
     return data;
   }
   
   fetchData().then((data) => console.log(data));
   

2. Object.values 和 Object.entries

   • Object.values 返回对象的值数组。
   • Object.entries 返回对象的键值对数组。

   const obj = { a: 1, b: 2 };
   console.log(Object.values(obj)); // [1, 2]
   console.log(Object.entries(obj)); // [["a", 1], ["b", 2]]
   

3. String.prototype.padStart 和 String.prototype.padEnd

   • padStart 和 padEnd 方法用于在字符串的开头或结尾填充指定的字符。

   const str = "hello";
   console.log(str.padStart(10, " ")); // "     hello"
   console.log(str.padEnd(10, " ")); // "hello     "
   

（三）ES2018（ES9）

1. 可选链操作符（Optional Chaining）

   • 使用 ?. 访问对象的属性时，如果对象为 null 或 undefined，不会抛出错误，而是返回 undefined。

   const person = { name: "Alice" };
   console.log(person?.address?.city); // undefined
   

2. Promise.prototype.finally

   • finally 方法用于在 Promise 的链式调用中，无论成功或失败，都会执行的回调函数。

   fetch("https://api.example.com/data")
     .then((response) => response.json())
     .catch((error) => console.error(error))
     .finally(() => console.log("Request finished"));
   

（四）ES2019（ES10）

1. Array.prototype.flat 和 Array.prototype.flatMap

   • flat 方法用于将多维数组展平为一维数组。
   • flatMap 方法先对数组的每个元素调用回调函数，然后将结果展平为一维数组。

   const arr = [1, [2, [3]]];
   console.log(arr.flat(2)); // [1, 2, 3]
   
   const arr2 = [1, 2, 3];
   console.log(arr2.flatMap((x) => [x, x * 2])); // [1, 2, 2, 4, 3, 6]
   

2. Object.fromEntries

   • 将键值对数组转换为对象。

   const entries = [["a", 1], ["b", 2]];
   console.log(Object.fromEntries(entries)); // { a: 1, b: 2 }
   

（五）ES2020（ES11）

1. BigInt

   • BigInt 是一种新的数值类型，用于表示大于 2^53 - 1 的整数。

   const bigNumber = BigInt(1234567890123456789012345678901234567890n);
   console.log(bigNumber); // 1234567890123456789012345678901234567890n
   

2. String.prototype.matchAll

   • 使用正则表达式匹配字符串的所有结果，并返回一个迭代器。

   const regex = /a/g;
   const str = "abacada";
   const matches = [...str.matchAll(regex)];
   console.log(matches); // [["a", index: 0, input: "abacada", groups: undefined], ...]
   

（六）ES2021（ES12）及以后版本

ES2021 及以后的版本继续引入了许多新特性，例如：

1. 逻辑赋值运算符（Logical Assignment Operators）

   • &&=、||= 和 ??= 用于逻辑赋值。

   let x;
   x ||= 10; // x = 10
   x &&= 20; // x = 10
   

2. Promise.any

   • Promise.any 方法返回一个 Promise，该 Promise 在传入的多个 Promise 中任意一个成功时立即成功。

   const promises = [Promise.reject("Error 1"), Promise.resolve("Success")];
   Promise.any(promises)
     .then((result) => console.log(result)) // Success
     .catch((error) => console.error(error));
   

三、总结

ES6 及其后续版本为 JavaScript 语言带来了许多强大的新特性，极大地提升了开发效率和代码的可读性。从语法糖（如箭头函数、模板字符串）到新数据结构（如 Map、Set），再到异步编程的支持（如 Promise、async 和 await），这些特性使得 JavaScript 成为一种更加现代化的编程语言。

随着 JavaScript 的不断发展，开发者需要持续学习和适应新的特性，以充分利用这些改进。通过掌握 ES6 及以上版本的新特性，开发者可以编写出更高效、更简洁且更易于维护的代码。