ECMAScript 11 新特性

ECMAScript 11 新特性

ECMAScript 6 新特性(一)

ECMAScript 6 新特性(二)

ECMAScript 7~10 新特性

ECMAScript 11 新特性(本文)

1. 私有属性

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

js 复制代码
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。

js 复制代码
// 声明两个 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() 方法返回一个包含所有匹配正则表达式的结果迭代器

js 复制代码
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,而不是抛出错误。

js 复制代码
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,可以方便地进行异步操作,如在模块加载完成后执行某些操作。
js 复制代码
import('./modulePath.js')
  .then((module) => {
  // 使用模块中的功能
})
  .catch((err) => {
  // 处理加载错误
});
js 复制代码
const btn = document.getElementById("btn");

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

6. 新数据类型

BigInt 大整数

js 复制代码
// BigInt 大整型
const num = 123n;
console.log(num, typeof num);

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

js 复制代码
let sum = 520;
console.log(BigInt(sum));
// console.log(BigInt(1.2)); // 报错,不能将小数转换为 BigInt

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

js 复制代码
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 无论在什么环境中执行,始终指向全局对象

相关推荐
Eiceblue1 小时前
【免费.NET方案】CSV到PDF与DataTable的快速转换
开发语言·pdf·c#·.net
m0_555762902 小时前
Matlab 频谱分析 (Spectral Analysis)
开发语言·matlab
像风一样自由20202 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
浪裡遊3 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
lzb_kkk4 小时前
【C++】C++四种类型转换操作符详解
开发语言·c++·windows·1024程序员节
好开心啊没烦恼4 小时前
Python 数据分析:numpy,说人话,说说数组维度。听故事学知识点怎么这么容易?
开发语言·人工智能·python·数据挖掘·数据分析·numpy
简佐义的博客4 小时前
破解非模式物种GO/KEGG注释难题
开发语言·数据库·后端·oracle·golang
Liudef064 小时前
2048小游戏实现
javascript·css·css3
程序员爱钓鱼4 小时前
【无标题】Go语言中的反射机制 — 元编程技巧与注意事项
开发语言·qt