当前位置：首页 > news >正文

ECMAScript 11 新特性

news 来源：原创 2025/4/28 2:35:09

ECMAScript 11 新特性

ECMAScript 6 新特性（一）

ECMAScript 6 新特性（二）

ECMAScript 7~10 新特性

ECMAScript 11 新特性（本文）

1. 私有属性

在类的内部，通过在属性前添加 # 来表示私有属性。

class Person {
  name;
  // 私有属性
  #age;
  #weight;

  constructor(name, age, weight) {
    this.name = name;
    this.#age = age;
    this.#weight = weight;
  }
}

// 实例化对象
const girl = new Person("小红", 18, 50);
console.log(girl.name); // 小红
// 访问私有属性
// console.log(girl.#age); // 报错，私有属性不能直接访问，可以通过类方法间接访问

2. Promise.allSettled

Promise.allSettled() 方法用于并发执行多个 Promise，并返回一个 Promise，该 Promise 的状态由所有 Promise 的状态决定。

Promise.allSettled() 方法不会对 Promise 进行 reject 处理，即使某个 Promise 已经被 reject，Promise.allSettled() 方法也会将该 Promise 的状态设置为fulfilled。

该方法与 Promise.all() 方法类似，但 Promise.all() 方法只要有一个 Promise 被 reject，则该 Promise 就会被 reject。

// 声明两个 Promise
const p1 = new Promise((reasolve, reject) => {
  setTimeout(() => {
    reasolve("商品数据 - 1");
  }, 1000);
});
const p2 = new Promise((reasolve, reject) => {
  setTimeout(() => {
    // reasolve("商品数据 - 2");
    reject("商品数据 - 2");
  }, 1000);
});

// 调用 Promise.allSettled() 方法并传入两个 Promise
const result = Promise.allSettled([p1, p2]);
console.log(result);
// 输出结果：
// [
//     {status: "fulfilled", value: "商品数据 - 1"},
//     {status: "rejected", reason: "商品数据 - 2"}
// ]

3. 字符串扩展

String.prototype.matchAll() 方法返回一个包含所有匹配正则表达式的结果的迭代器。

let str = `<ul>
                <li>
                    <a>肖申克的救赎</a>
                    <p>上映时间：1994-09-10</p>
                </li>
                <li>
                    <a>阿甘正传</a>
                    <p>上映时间：1994-06-05</p>
                </li>
            </ul>`;

let reg = /<li>.*?<a>(.*?)<\/a>.*?<p>(.*?)<\/p>/gs;

// 调用方法
const result = str.matchAll(reg);
// console.log(result); // 可迭代对象
// 遍历迭代器
//   for (const v of result) {
//       console.log(v);
//   }

// 使用扩展运算符将迭代器转换为数组
const arr = [...result];
console.log(arr);

4. 可选链操作符

在 ES11 中使用 .? 表示可选链操作符，用于访问对象属性，如果链式调用的任何一个属性不存在，则会返回 undefined，而不是抛出错误。

function main(config) {
  // const dbHost = config && config.db && config.db.host;
  const dbHost = config?.db?.host;
  console.log(dbHost);
}

main({
  db: {
    host: "localhost",
    port: 3306
  },
  cache: {
    host: "127.0.0.1",
    port: 6379
  },
});

解释代码 config?.db?.host：当获取到属性 config 时才会继续向下读取 config.db 的值，若能读取到 config.db 的值，才会继续向下读取 config.db.host 的值，在读取过程中，若不存在当前值，不会报错，直接返回 undefined。

5. 动态 import 导入

在JavaScript中，动态导入（import()）是一种在运行时按需加载模块的方式。与静态导入（import 语句）不同，动态导入返回一个 Promise，允许你在代码执行过程中根据需要加载模块。动态导入的主要作用包括：

按需加载：可以根据条件或用户操作动态加载模块，从而减少初始加载时间，提高应用性能。
懒加载：对于不常用的功能或页面，可以在需要时再加载，避免一次性加载大量资源。
条件加载：可以根据运行时的条件决定是否加载某个模块，例如根据用户的权限或设备类型。
异步加载：动态导入返回一个 Promise，可以方便地进行异步操作，如在模块加载完成后执行某些操作。

import('./modulePath.js')
  .then((module) => {
  // 使用模块中的功能
})
  .catch((err) => {
  // 处理加载错误
});

const btn = document.getElementById("btn");

btn.onclick = () => {
  // 动态导入
  import("./hello.js").then((module) => {
    console.log(module);
    module.hello();
  });
};

6. 新数据类型

BigInt 大整数

// BigInt 大整型
const num = 123n;
console.log(num, typeof num);

BigInt 函数形式，也可以将整数转换为大整数类型，但是不能转换浮点数

let sum = 520;
console.log(BigInt(sum));
// console.log(BigInt(1.2)); // 报错，不能将小数转换为 BigInt

大整数的主要作用：用于大数值运算。

let max = Number.MAX_SAFE_INTEGER; // 最大安全整数
console.log(max);
console.log(max + 1);
console.log(max + 2); // 已经溢出，结果不再是安全整数

console.log(BigInt(max));
console.log(BigInt(max) + 1n);
console.log(BigInt(max) + 2n); // 不会溢出，结果为 BigInt 值