2024-12-12-【工程化】ES6及之后版本特性

🚀 ES6+ 版本 JavaScript 特性详解

ES6（ECMAScript 2015）是 JavaScript 的一次重大更新，后续每年都有新版本发布（如 ES2016 ~ ES2024），持续为语言带来更强大、简洁和现代化的能力。

本文档整理了 ES6 至 ES2024（截至 2024 年）的主要特性，并附上核心解读，帮助你系统掌握现代 JavaScript。

🧩 一、ES6（ECMAScript 2015）—— 里程碑式更新

1. let 和 const（块级作用域变量）

• let：块级作用域变量，解决了 var 的变量提升、重复声明等问题。
• const：声明常量，不可重新赋值（但对对象/数组内部属性可修改）。

let a = 10;
const PI = 3.14;

---

2. 箭头函数（Arrow Functions）

• 更简洁的函数语法，自动绑定当前 this。
• 不能作为构造函数，没有自己的 arguments。

const add = (a, b) => a + b;

---

3. 模板字符串（Template Literals）

• 支持多行字符串和变量嵌入，使用反引号 ` 与 ${}。

const name = "Tom";
console.log(`Hello, ${name}！`);

---

4. 解构赋值（Destructuring Assignment）

• 从数组或对象中提取值并赋值给变量，语法简洁。

// 数组解构
const [a, b] = [1, 2];

// 对象解构
const { name, age } = { name: "Tom", age: 20 };

---

5. 默认参数（Default Parameters）

• 函数参数可设置默认值。

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

---

6. 剩余参数与展开运算符（Rest & Spread）

• ... 用于收集剩余参数（Rest）或展开数组/对象。

// Rest 参数
function sum(...nums) {}

// Spread 展开
const arr = [1, 2];
const newArr = [...arr, 3]; // [1, 2, 3]

---

7. 对象字面量增强

• 属性和方法简写、计算属性名。

const name = "Tom";
const obj = {
  name,
  sayHi() {
    console.log("Hi");
  },
  [Math.random() > 0.5 ? "a" : "b"]: 100,
};

---

8. 类（Class）

• 语法糖，让面向对象编程更直观（底层仍是基于原型）。

class Person {
  constructor(name) {
    this.name = name;
  }
  sayHi() {
    console.log(`Hi, I'm ${this.name}`);
  }
}

---

9. 模块化（Modules: import / export）

• 支持模块导入导出，需构建工具或现代环境支持。

// 导出
export const name = "Tom";
export default function () {}

// 导入
import myFunc, { name } from "./module.js";

---

10. Promise

• 处理异步操作，支持链式调用，解决回调地狱。

fetch(url)
  .then((res) => res.json())
  .then((data) => console.log(data))
  .catch((err) => console.error(err));

---

11. Symbol

• 唯一且不可变的原始数据类型，常用作对象属性键，防止冲突。

const sym = Symbol("unique");
const obj = { [sym]: "value" };

---

12. Map 与 Set

• Map：键值对集合，键可以是任意类型。
• Set：值集合，自动去重。

const map = new Map();
map.set("key", "value");

const set = new Set([1, 2, 2]); // Set(2) {1, 2}

---

🧩 二、ES2016（ES7）

1. Array.prototype.includes

• 判断数组是否包含某值，返回布尔值。

[1, 2, 3].includes(2); // true

2. 指数运算符（**）

• 幂运算的简洁写法。

const result = 2 ** 3; // 8

---

🧩 三、ES2017（ES8）

1. async / await

• 更优雅地处理异步代码，基于 Promise。

async function getData() {
  const res = await fetch(url);
  const data = await res.json();
  return data;
}

2. Object.values(obj)

• 返回对象所有可枚举属性值组成的数组。

Object.values({ a: 1, b: 2 }); // [1, 2]

3. Object.entries(obj)

• 返回对象自身可枚举的键值对数组（二维数组）。

Object.entries({ a: 1, b: 2 }); // [['a',1], ['b',2]]

4. 字符串填充：padStart() 与 padEnd()

• 填充字符串到指定长度。

"5".padStart(2, "0"); // '05'

---

🧩 四、ES2018（ES9）

1. 异步迭代（for-await-of）

• 用于遍历异步可迭代对象（如流、异步生成器）。

for await (const item of asyncIterable) {
  console.log(item);
}

2. 对象的 Rest / Spread

• 可以使用 ... 展开或收集对象属性。

const obj = { a: 1, ...{ b: 2 } };
const { a, ...rest } = obj;

3. 正则增强

• 命名捕获组、反向断言、dotAll 模式（/s）

---

🧩 五、ES2019（ES10）

1. Array.prototype.flat() / flatMap()

• 扁平化嵌套数组。

[1, [2, [3]]].flat(2); // [1, 2, 3]

2. Object.fromEntries()

• 与 Object.entries() 相反，键值对数组转对象。

Object.fromEntries([
  ["a", 1],
  ["b", 2],
]); // { a:1, b:2 }

3. 字符串修剪：trimStart() / trimEnd()

• 去除字符串开头/结尾空白。

---

🧩 六、ES2020（ES11）

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

• 避免访问 null/undefined 中的属性时报错。

const value = obj?.prop?.subProp;

2. 空值合并操作符（Nullish Coalescing） ??

• 仅当左侧为 null 或 undefined 时返回右侧默认值。

const foo = bar ?? "default";

3. BigInt

• 表示任意精度整数，解决 Number 类型精度限制。

const bigNum = 9007199254740991n;

4. 动态 import()

• 异步按需加载模块，返回 Promise。

import("./module.js").then((module) => {});

5. globalThis

• 通用全局对象，替代 window / global 等。

console.log(globalThis);

---

🧩 七、ES2021（ES12）及以后

ES2021（ES12）

• String.prototype.replaceAll()
• Promise.any()
• 逻辑赋值运算符：&&=, ||=, ??=
• 数字分隔符：1_000_000

ES2022（ES13）

• 顶层 await
• 私有类字段：#fieldName
• Array.at(index)：支持负数索引，如 arr.at(-1)

ES2023（ES14）

• Array.findLast() / findLastIndex()
• Object.hasOwn()
• Hashbang 语法标准化

ES2024（ES15，最新）

• 装饰器改进
• 正则表达式新特性
• （截至 2024 年，特性还在标准化中）

---

✅ 版本特性速查表

版本	核心特性（部分）
ES6 (2015)	let/const、箭头函数、模板字符串、解构、默认参数、class、模块、Promise、Map/Set、Symbol
ES2016	Array.includes、** 幂运算符
ES2017	async/await、Object.values/values、padStart/end
ES2018	异步迭代、对象 Rest/Spread、正则增强
ES2019	flat()/flatMap()、Object.fromEntries()、trimStart/End
ES2020	可选链 ?.、空值合并 ??、BigInt、动态 import、globalThis
ES2021	replaceAll、Promise.any、逻辑赋值、数字分隔符
ES2022	顶层 await、私有字段 #、Array.at
ES2023	findLast、Object.hasOwn
ES2024	装饰器、正则等（进行中）

---

📌 学习建议

• 优先掌握 ES6 核心特性（let/const、箭头函数、解构、Promise、class、模块等）。
• 逐步学习 ES2017~ES2024 的实用特性（如 async/await、可选链、空值合并、顶层 await 等）。
• 使用 Babel / Vite / Webpack / TypeScript 等工具来支持新特性并兼容旧环境。