javascript中 es10,es11,es12特性介绍

原创

小焱写作

发布于 2026-03-26 15:06:38

430

JavaScript ES10、ES11、ES12 核心特性详解

这三个版本是 ES2019(ES10)、ES2020(ES11)、ES2021(ES12)，是现代 JS 开发最常用的进阶语法，我按版本整理最实用、高频使用的特性，附带代码示例，方便你直接上手。

一、ES10 (ES2019) 核心特性

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

扁平化数组，解决多维数组嵌套问题

// flat(深度)：默认扁平化1层，传入 Infinity 扁平化所有层
const arr1 = [1, [2, [3, [4]]]];
console.log(arr1.flat()); // [1,2,[3,[4]]]
console.log(arr1.flat(Infinity)); // [1,2,3,4]

// flatMap()：先 map 再 flat(1层)
const arr2 = ["Hello World", "JavaScript ES10"];
console.log(arr2.flatMap(item => item.split(" "))); 
// ["Hello","World","JavaScript","ES10"]

2. `Object.fromEntries()`

把键值对数组/Map 转为对象（和 Object.entries() 相反）

// 数组转对象
const entries = [["name", "小明"], ["age", 20]];
console.log(Object.fromEntries(entries)); // {name: "小明", age: 20}

// Map转对象
const map = new Map([["a", 1], ["b", 2]]);
console.log(Object.fromEntries(map)); // {a:1, b:2}

3. `String.prototype.trimStart()` / `trimEnd()`

精准去除字符串开头/结尾空格（替代 trimLeft/trimRight，标准写法）

const str = "  Hello ES10  ";
console.log(str.trimStart()); // "Hello ES10  "
console.log(str.trimEnd()); // "  Hello ES10"

4. 可选 `catch` 参数

try/catch 中，catch 可以不写错误参数

try {
  // 代码逻辑
} catch {
  // 无需接收 error 对象
  console.log("出错了");
}

5. `Symbol.prototype.description`

获取 Symbol 的描述文本（只读属性）

const sym = Symbol("ES10特性");
console.log(sym.description); // "ES10特性"

二、ES11 (ES2020) 核心特性（⭐ 高频实用）

1. 可选链操作符 `?.`

解决：读取嵌套对象属性时，防止报错

const user = { name: "小红", info: { age: 18 } };

// 传统写法：需要层层判断
const age1 = user && user.info && user.info.age;
// ES11 可选链
const age2 = user?.info?.age; // 18
// 不存在的属性，返回 undefined 不报错
const phone = user?.info?.phone; // undefined

2. 空值合并运算符 `??`

判断：值为 null/undefined 时才使用默认值 （区别于 ||：|| 会把 0、""、false 都判定为假）

// ?? 只对 null/undefined 生效
const a = 0;
console.log(a ?? 100); // 0 （正确）
console.log(a || 100); // 100 （错误）

const b = null;
console.log(b ?? "默认值"); // "默认值"

3. 动态导入 `import()`

异步加载模块，实现按需加载（优化性能）

// 用到时再加载，而不是一开始全部加载
import("./utils.js").then(module => {
  module.fun();
});

4. `Promise.allSettled()`

等待所有 Promise 执行完成（无论成功/失败），获取每个结果状态

const p1 = Promise.resolve("成功");
const p2 = Promise.reject("失败");

Promise.allSettled([p1, p2]).then(res => {
  console.log(res);
  // [{status: "fulfilled", value: "成功"}, {status: "rejected", reason: "失败"}]
});

5. 全局对象 `globalThis`

统一全环境的全局对象：

浏览器：window / self
Node.js：global
Web Worker：self

// 所有环境通用
console.log(globalThis === window); // 浏览器中为 true

6. `BigInt`

支持超大整数（超过 JS 安全整数范围 2^53-1 的数值）

const bigNum = 123456789012345678901234567890n;
const bigNum2 = BigInt(123);

三、ES12 (ES2021) 核心特性

1. 逻辑赋值运算符 `||=` / `&&=` / `??=`

逻辑运算 + 赋值 二合一，简化代码

// 1. ??= ：值为 null/undefined 时赋值
let a = null;
a ??= "默认值"; // 等价于 a = a ?? "默认值"
console.log(a); // "默认值"

// 2. ||= ：值为假时赋值
let b = 0;
b ||= 10; // 10

// 3. &&= ：值为真时赋值
let c = 5;
c &&= c+1; // 6

2. `String.prototype.replaceAll()`

全局替换字符串无需正则，直接替换所有匹配项

const str = "a+b+c";
// 传统：必须用正则 g 模式
console.log(str.replace(/\+/g, "-")); 
// ES12：直接替换所有
console.log(str.replaceAll("+", "-")); // "a-b-c"

3. 数字分隔符 `_`

让大数字更易读，不影响数值本身

const num = 1_000_000_000; // 等价于 1000000000
console.log(num === 1000000000); // true

4. `Promise.any()`

返回第一个成功的 Promise，全部失败才 rejected

const p1 = Promise.reject("err1");
const p2 = Promise.resolve("成功2");

Promise.any([p1, p2]).then(res => {
  console.log(res); // "成功2"
});

5. 私有类字段 `#`

类的私有属性/方法，外部无法访问

class Person {
  #age = 18; // 私有属性
  getAge() {
    return this.#age;
  }
}

const p = new Person();
console.log(p.getAge()); // 18
console.log(p.#age); // 报错，无法访问私有属性

总结

ES10：数组扁平化、对象键值对互转、精准去空格、简化 catch；
ES11：可选链 ?.、空值合并 ??（开发必备）、Promise.allSettled；
ES12：逻辑赋值、replaceAll、数字分隔符、私有类属性。

这三个版本的特性是现代前端开发必掌握的内容，日常业务开发使用率极高。

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

vuejs2

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

vuejs2

登录后参与评论

0 条评论

热度