网站排名软件利搜怎么样图片制作在线

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，允许你在代码执行过程中根据需要加载模块。动态导入的主要作用包括：

1. 按需加载：可以根据条件或用户操作动态加载模块，从而减少初始加载时间，提高应用性能。
2. 懒加载：对于不常用的功能或页面，可以在需要时再加载，避免一次性加载大量资源。
3. 条件加载：可以根据运行时的条件决定是否加载某个模块，例如根据用户的权限或设备类型。
4. 异步加载：动态导入返回一个 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 值

7.globalThis

globalThis 无论在什么环境中执行，始终指向全局对象。