FE-06-ES6+ 与 ECMAScript 新特性演进

2026-09-26

字数统计: 1.9k字 | 阅读时长≈ 10分

FE-06-ES6+ 与 ECMAScript 新特性演进

本节目标：系统梳理 ES6 (2015) 到 ES2024 的关键新特性，掌握现代 JS 写法的”为什么”和”怎么用”。

1. ES 演进时间线

版本	年份	关键特性
ES5	2009	strict mode、JSON、Array methods
ES6/ES2015	2015	let/const、箭头函数、Promise、class、模块
ES2016	2016	`**` 指数、`Array.includes`
ES2017	2017	async/await、Object spread、`Object.values`
ES2018	2018	Rest/Spread、async iteration、`Promise.finally`
ES2019	2019	`Array.flat`、`Object.fromEntries`、`String.trimStart/End`
ES2020	2020	`??`、`?.`、`BigInt`、`Promise.allSettled`
ES2021	2021	逻辑赋值（`
ES2022	2022	class 字段、顶层 await、`Array.at`、Error cause
ES2023	2023	`Array.findLast`、`Array.toSorted`、hashbang 语法
ES2024	2024	`Array.groupBy`、`Promise.withResolvers`、Well-formed Unicode

2. ES6/2015：现代 JS 起点

2.1 let / const

// 块级作用域
{
  let x = 1;
  const y = 2;
}
// x 和 y 不可见

// const 不是"常量对象"，是"常量引用"
const obj = { a: 1 };
obj.a = 2;  // 允许
// obj = {}  // 错

2.2 解构赋值

// 数组
const [a, b, c] = [1, 2, 3];
const [first, ...rest] = [1, 2, 3, 4];  // first=1, rest=[2,3,4]
const [, second] = [1, 2];  // 跳过

// 对象
const { name, age } = { name: 'Alice', age: 25 };
const { name: n, age: a } = { name: 'Alice', age: 25 };  // 重命名
const { name, age = 18 } = { name: 'Alice' };  // 默认值

// 嵌套
const { address: { city } } = { address: { city: 'Beijing' } };

// 函数参数
function greet({ name, age }) { /* ... */ }
greet({ name: 'Alice', age: 25 });

2.3 模板字符串

const name = 'Alice';
const greeting = `Hello, ${name}!`;
const multi = `
  第一行
  第二行
`;

// 标签模板
function highlight(strings, ...values) {
  return strings.reduce((acc, s, i) => acc + s + (values[i] ? `**${values[i]}**` : ''), '');
}
highlight`Hello, ${name}!`;  // "Hello, **Alice**!"

2.4 箭头函数

const add = (a, b) => a + b;
const square = x => x * x;
const print = () => console.log('hi');

// 隐式返回对象（要加圆括号）
const make = (x, y) => ({ x, y });

2.5 默认参数、Rest、Spread

// 默认参数
function greet(name = 'World', message = `Hello, ${name}`) { /* ... */ }

// Rest
function sum(...nums) { return nums.reduce((a, b) => a + b, 0); }

// Spread
const arr = [1, 2, 3];
const arr2 = [...arr, 4, 5];

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

2.6 Map / Set / WeakMap / WeakSet

const map = new Map();
map.set('key', 'value');
map.get('key');
map.has('key');
map.size;
map.delete('key');

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

// WeakMap/WeakSet：键必须是对象，不阻止 GC
const wm = new WeakMap();
const key = {};
wm.set(key, 'value');
// key 被回收时，wm 里也自动删

2.7 Promise（见 FE-04）

2.8 class

class Animal {
  constructor(name) { this.name = name; }
  speak() { return `${this.name} makes a sound`; }
}

class Dog extends Animal {
  speak() { return `${this.name} barks`; }
}

2.9 模块化（见 FE-04）

2.10 Symbol / Iterator / Generator

const sym = Symbol('id');
const obj = { [sym]: 42 };

function* gen() {
  yield 1;
  yield 2;
  yield 3;
}
const it = gen();
it.next();  // { value: 1, done: false }

2.11 Proxy / Reflect

const handler = {
  get(target, key) {
    return key in target ? target[key] : 'default';
  },
  set(target, key, value) {
    target[key] = value;
    return true;
  },
};
const p = new Proxy({}, handler);
p.foo = 1;
p.foo;     // 1
p.missing; // 'default'

3. ES2016-2017：稳定期

// ES2016
console.log(2 ** 3);  // 8
[1, 2, 3].includes(2);  // true

// ES2017
async function f() { return 1; }
const arr = [3, 1, 2];
const obj = { a: 1, b: 2 };
Object.values(obj);  // [1, 2]
Object.entries(obj); // [['a', 1], ['b', 2]]
// 字符串填充
'5'.padStart(3, '0');  // '005'
'5'.padEnd(3, '0');    // '500'
// async/await（见 FE-04）

4. ES2018-2019：迭代与对象

// ES2018
// 对象 rest/spread
const { a, ...rest } = { a: 1, b: 2, c: 3 };  // rest = { b: 2, c: 3 }

// async 迭代
async function* gen() { yield 1; yield 2; }
for await (const v of gen()) { console.log(v); }

// Promise.finally
fetch('/api').then(r => r.json()).finally(() => hideLoading());

// ES2019
// Array.flat / flatMap
[1, [2, 3], [4, [5]]].flat(2);     // [1, 2, 3, 4, 5]
[1, 2, 3].flatMap(x => [x, x*2]);  // [1, 2, 2, 4, 3, 6]

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

// 可选 catch
try { /* ... */ } catch { /* err 已绑定 */ }

// JSON 增强
JSON.stringify({ a: 1 }, null, 2);  // 缩进

5. ES2020：可空性 + BigInt

// 可选链 ?.
const street = user?.address?.street;
const result = obj.method?.();  // 方法可能不存在
const arr = obj.list?.[0];

// 空值合并 ??
const port = config.port ?? 8080;       // null/undefined 才用默认值
const port2 = config.port || 8080;      // 0/''/false 也会用默认值（不要用）

// BigInt
const big = 9007199254740993n;       // 字面量
const big2 = BigInt('9007199254740993');
big + 1n;  // 9007199254740994n
// 不能和 Number 混算

// Promise.allSettled
const results = await Promise.allSettled([p1, p2, p3]);
results.forEach(r => {
  if (r.status === 'fulfilled') console.log(r.value);
  else console.log(r.reason);
});

// 动态 import
const { default: Chart } = await import('./chart.js');

// globalThis
globalThis.fetch = myFetch;  // 跨环境通用

6. ES2021：逻辑赋值与便利

// 逻辑赋值
a ||= b;   // a = a || b
a &&= b;   // a = a && b
a ??= b;   // a = a ?? b

// 数字分隔符（提高可读性）
const billion = 1_000_000_000;
const hex = 0xFF_FF_FF;

// String.replaceAll
'hello world'.replaceAll('o', '0');  // 'hell0 w0rld'

// Promise.any（第一个成功）
const result = await Promise.any([p1, p2, p3]);

// WeakRef / FinalizationRegistry（高级）
const ref = new WeakRef(obj);
// ref.deref() 可能返回 obj（如果还没 GC）

// 简化逻辑（Logical OR assignment）
function foo(opts) {
  opts.timeout ||= 5000;     // 没设就用 5000
  opts.retry ??= 3;          // null/undefined 才设
}

7. ES2022：class 升级 + 顶层 await

// class 公有字段
class Counter {
  count = 0;             // 实例字段
  static instances = 0;   // 静态字段
  #private = 'secret';   // 真正的私有字段（# 前缀）

  constructor() {
    Counter.instances++;
  }

  increment() {
    this.count++;
  }
}

// class 静态块
class MyClass {
  static {
    // 类加载时执行一次
    console.log('MyClass loaded');
  }
}

// 顶层 await（ESM 模块）
// 以前：必须包在 async function 里
const data = await fetch('/api/config').then(r => r.json());

// Array.at
[1, 2, 3, 4, 5].at(-1);  // 5
[1, 2, 3, 4, 5].at(0);   // 1

// Error cause
try {
  doSomething();
} catch (err) {
  throw new Error('Failed to do something', { cause: err });
}

// Object.hasOwn
const obj = { a: 1 };
Object.hasOwn(obj, 'a');  // true

8. ES2023：findLast + hashbang

// Array.findLast / findLastIndex
const arr = [1, 2, 3, 4, 5];
arr.findLast(x => x < 4);   // 3
arr.findLastIndex(x => x < 4); // 2

// toSorted / toReversed / toSpliced / with（非破坏性）
const a = [3, 1, 2];
const b = a.toSorted();           // [1, 2, 3]，a 不变
const c = a.with(0, 100);         // [100, 1, 2]
const d = a.toSpliced(1, 1, 99);  // [3, 99, 2]

// hashbang（shebang）
#!/usr/bin/env node
// 允许在 .js 顶层用 #! 开头（仅 ESM）

// Symbol 作为 WeakMap key
const sym = Symbol('id');
const wm = new WeakMap();
wm.set(sym, 'value');  // 现在支持

9. ES2024：分组 + Promise.withResolvers

// Array.groupBy / groupByMap
const people = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 25 },
  { name: 'Carol', age: 30 },
];
const byAge = people.groupBy(p => p.age);
// { 25: [Alice, Bob], 30: [Carol] }

const byAgeMap = people.groupByMap(p => p.age);
// Map(2) { 25 => [Alice, Bob], 30 => [Carol] }

// Promise.withResolvers
const { promise, resolve, reject } = Promise.withResolvers();
// 不再需要 new Promise 包一层

// Well-formed Unicode
// 字符串方法现在正确处理"孤立"的 surrogate pair

// RegExp v flag（设置 + 匹配 unicode 属性）
const re = /\p{RGI_Emoji}/v;
re.test('😀');  // true

10. 实战：现代 JS 写一个 Promise 并发控制器

// 限制并发数的 Promise 调度器
class PromisePool {
  constructor(max) { this.max = max; this.active = 0; this.queue = []; }

  add(fn) {
    return new Promise((resolve, reject) => {
      this.queue.push({ fn, resolve, reject });
      this.#next();
    });
  }

  #next() {
    if (this.active >= this.max || this.queue.length === 0) return;
    const { fn, resolve, reject } = this.queue.shift();
    this.active++;
    fn().then(resolve, reject).finally(() => {
      this.active--;
      this.#next();
    });
  }
}

// 用法
const pool = new PromisePool(3);
const urls = [...];  // 100 个 URL
await Promise.all(urls.map(url =>
  pool.add(() => fetch(url).then(r => r.json()))
));

小结

ES6/2015 是分水岭——之后的版本大多是”补丁和便利”，核心范式在 ES6 就定下了。

推荐的学习路径：

熟练 ES6（let/const、解构、箭头、Promise、class、模块）
熟悉 ES2017（async/await）
了解 ES2020（??、?.、BigInt）
偶尔看看新版本（按需）

Polyfill 策略：

现代项目：browserslist 配 "last 2 versions"，新特性直接用
兼容性项目：用 core-js、Babel 转译
Node.js：LTS 版本支持到 ES2022 左右

下一节讲前端工程化：Webpack / Vite / Rollup / esbuild。

本文作者： CoderSong
本文链接： https://jack-song-gif.github.io/2026/09/26/FE-06-ES6+与ECMAScript演进/
版权声明： 本博客所有文章除特别声明外，均采用 MIT 许可协议。转载请注明出处！