javasccript Es5以后到目前为止更新方法功能总结，JavaScript各版本核心特性摘要（ES6-ES15）ES6(2015)是重大升级，引入let

嚒
66 阅读9分钟

​

目录：

✅ ES6 / ES2015（最关键的一次更新）

✅ ES7 / ES2016 数组includes方法、指数运算符

✅ ES8 / ES2017 async/await异步方案、Object.values/entries

✅ ES9 / ES2018 异步迭代器、正则增强

✅ ES10 / ES2019 数组flat/flatMap、Object.fromEntries

✅ ES11 / ES2020 可选链?.、空值合并??、Promise.allSettled

✅ ES12 / ES2021 replaceAll、Promise.any、逻辑赋值运算符

✅ ES13 / ES2022 顶层await、类字段声明

✅ ES14 / ES2023 数组非破坏性方法(toSorted等)

✅ ES15 / ES2024（正在推进，还没完全定稿）

✅ ES6 / ES2015（最关键的一次更新）

这是 ES5 之后最重要的升级

  • let / const（块级作用域变量声明）
  • 箭头函数 ()=>{}（简写 + 自动绑定 this）
  • 模板字符串 `Hello, ${name}`
  • 解构赋值 const {a, b} = obj、数组解构 [x, y] = arr
  • 默认参数 function f(x = 1) {}
  • 扩展运算符 ...（对象 / 数组展开与收集）
  • for...of（用于遍历可迭代对象）
  • Map 和 Set 数据结构
  • class 类的语法
  • Promise（异步处理）【Promise 技术快速入门】
  • import / export（模块化）

✅ ES7 / ES2016 数组includes方法、指数运算符

  • Array.prototype.includes()：判断数组中是否存在某个值
  • 指数运算符 **（例：2 ** 3 === 8） Math.pow(a, b) 的简写语法
console.log(2 ** 3); // 8  → 2 * 2 * 2
console.log(5 ** 2); // 25 → 5 * 5
console.log(9 ** 0.5); // 3 → √9

转存失败，建议直接上传图片文件

✅ ES8 / ES2017 async/await异步方案、Object.values/entries

  • async / await（基于 Promise 的异步语法糖）
  • Object.values() / Object.entries()
const user = { name: "Alice", age: 25, gender: "female" };
console.log(Object.values(user));
// 👉 ["Alice", 25, "female"]

console.log(Object.entries(user));
// 👉 [["name", "Alice"], ["age", 25], ["gender", "female"]]

转存失败，建议直接上传图片文件

  • String.prototype.padStart() / padEnd() 字符串“填充”对齐
"5".padStart(3, "0")   // "005"
"5".padEnd(3, "0")     // "500"

"abc".padStart(6, "-") // "---abc"
"abc".padEnd(6, "-")   // "abc---"

转存失败，建议直接上传图片文件

✅ ES9 / ES2018 异步迭代器、正则增强

  • ...rest 运算符支持对象剩余参数
  • 异步迭代器 for await...of
for await (const item of asyncIterable) {
  // 每次 item 是 await 出来的值
}

// 异步生成器   
async function* asyncGenerator() {
  const values = [1, 2, 3];
  for (const v of values) {
    await new Promise(resolve => setTimeout(resolve, 1000));
    yield v;
  }
}

(async () => {
  for await (const num of asyncGenerator()) {
    console.log("Received:", num);
  }
})();

// Received: 1
// Received: 2
// Received: 3

// 按块异步读取大文件（node）
const fs = require('fs');

async function readFileByLine(path) {
  const rl = require('readline').createInterface({
    input: fs.createReadStream(path),
    crlfDelay: Infinity
  });

  for await (const line of rl) {
    console.log('Line:', line);
  }
}

转存失败，建议直接上传图片文件

// 命名识别  增强写法
const re = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;
const match = re.exec("2025-07-31");

console.log(match.groups.year);  // "2025"
console.log(match.groups.month); // "07"

转存失败，建议直接上传图片文件

// ----传统
const result = /(\d{4})-(\d{2})-(\d{2})/.exec("2025-07-31");
console.log(result[1]); // "2025" 年

转存失败，建议直接上传图片文件

✅ ES10 / ES2019 数组flat/flatMap、Object.fromEntries

  • Array.prototype.flat() / flatMap()  扁平数据，多维数据展开为一维数组
  • Object.fromEntries()（配合 Object.entries() 用）
// 场景一
Object.fromEntries([["a", 1], ["b", 2]])
// => { a: 1, b: 2 }


// 场景二
const user = {
  id: 123,
  name: "Alice",
  password: "secret"
};

// 去掉 password 字段
const safeUser = Object.fromEntries(
  Object.entries(user).filter(([key]) => key !== "password")
);

// { id: 123, name: "Alice" }

转存失败，建议直接上传图片文件

  • trimStart() / trimEnd() 清除字符串开头或结尾的空白字符

✅ ES11 / ES2020 可选链?.、空值合并??、Promise.allSettled

  • 可选链操作符 ?.
  • 空值合并运算符 ?? let result = a ?? b  如果 a 是 null 或 undefined，返回 b；否则返回 a；
  • Promise.allSettled() 专门用于“我不管成功失败，全部跑完后告诉我每个的状态”的场景。
const p1 = Promise.resolve("✅ 成功");
const p2 = Promise.reject("❌ 失败");
const p3 = Promise.resolve("✅ 又成功");

Promise.allSettled([p1, p2, p3]).then(results => {
  console.log(results);
});

// 输出
[
  { status: "fulfilled", value: "✅ 成功" },
  { status: "rejected", reason: "❌ 失败" },
  { status: "fulfilled", value: "✅ 又成功" }
]

转存失败，建议直接上传图片文件

✅ ES12 / ES2021 replaceAll、Promise.any、逻辑赋值运算符

// ----- 多个请求，哪个先成功就用哪个
const p1 = Promise.reject("❌");
const p2 = new Promise(resolve => setTimeout(() => resolve("✅ p2"), 100));
const p3 = new Promise(resolve => setTimeout(() => resolve("✅ p3"), 200));

Promise.any([p1, p2, p3]).then(result => {
  console.log(result); // ✅ "p2"
});

// ------ 失败情况（都失败才失败）
const p1 = Promise.reject("fail 1");
const p2 = Promise.reject("fail 2");

Promise.any([p1, p2]).catch(error => {
  console.log(error instanceof AggregateError); // true
  console.log(error.errors); // ["fail 1", "fail 2"]
});

转存失败，建议直接上传图片文件

  • WeakRef / FinalizationRegistry（高级内存管理） 主要用于高性能缓存、资源清理、避免内存泄漏等 简单了解入门
  • 逻辑赋值运算符：&&=, ||=, ??=
运算符等价于说明
&&=a = a && b如果 a 是真值，才赋值 b
`=`
??=a = a ?? b如果 a 是 null 或 undefined，才赋值 b

🔹 1. &&= 示例（“如果已有，就更新”）

let name = "Alice";
name &&= "Bob"; // name 是真值 → 更新为 "Bob"
console.log(name); // Bob

let username = "";
username &&= "Default"; // username 是假值 → 不变
console.log(username); // ""

转存失败，建议直接上传图片文件

🔹 2. ||= 示例（“如果没有，就补上默认值”）

let count = 0;
count ||= 10; // count 是假值 → 更新为 10
console.log(count); // 10

let level = 5;
level ||= 1; // level 是真值 → 保持不变
console.log(level); // 5

转存失败，建议直接上传图片文件

🔹 3. ??= 示例（“空才赋值，不影响 0 / false”）

let title = null;
title ??= "Untitled"; // 是 null → 更新
console.log(title); // "Untitled"

let value = 0;
value ??= 42; // 不是 null/undefined → 不变
console.log(value); // 0

转存失败，建议直接上传图片文件

场景推荐使用
有值才覆盖（类似 if (a)）&&=
没值就填默认值（如“空字符串”）`
只考虑 null / undefined??=

✅ ES13 / ES2022 顶层await、类字段声明

  • 顶层 await（模块顶层直接用 await） 简化模块初始化时异步操作
// -------以前
// ❌ 顶层不能直接 await（ES2021 之前）
const data = await fetchData(); // 报错！

// ✅ 只能这么写
(async () => {
  const data = await fetchData();
})();

// ----- 现在   ✅ 注意：只能在 ES 模块（ESM）中用！
// ✅ 只要这个 JS 文件是模块（type="module" 或 .mjs）
const res = await fetch('https://api.example.com/data');
const data = await res.json();
console.log(data);

转存失败，建议直接上传图片文件

要点说明
哪些地方能用？模块最外层（ES module 中）
用来干啥？模块初始化时先 await 异步数据、动态导入库等
有什么好处？写法更自然，不需要包一层 IIFE 或异步函数
  • 类字段声明语法（public 和 private）  目的是让你在 class 里直接声明属性，不用都写在构造函数里

✅ ES14 / ES2023 数组非破坏性方法(toSorted等)

  • Array.prototype.toSorted(), toReversed(), with()（ 都是 不修改原数组，而是返回新数组的“非破坏性”方法，非常适合函数式编程并避免副作用 ）
方法作用是否修改原数组
toSorted()返回排序后的新数组否
toReversed()返回反转后的新数组否
with()返回修改指定元素的新数组否
  • Symbol.prototype.description 方便读取 Symbol 的描述字符串，而不用再通过 toString() 截取

✅ ES15 / ES2024（正在推进， 还没完全定稿 ）

  • 主要是一些补充，比如 Set.prototype.intersection()、union() 等集合操作方法。

​ 原文地址-原创

avatar
文章
阅读
粉丝