ECMAScript日常总结--ES2020(ES11)

ECMAScript日常总结–ES2020(ES11)

1.BigInt数据类型

BigInt是一种新的基本数据类型，用于表示任意精度的整数。这使得JavaScript可以更好地处理超出Number类型范围的大整数。在 JavaScript 中，普通的数字类型（Number）有一个上限，当整数达到这个上限时，可能会导致精度丢失。BigInt 的引入解决了这一问题，允许表示任意大的整数，而不受精度限制。但与普通数字类型相比，BigInt 会导致一些运算的性能损耗，因此在不需要超过普通数字类型表示范围的情况下，仍然建议使用普通数字类型。

1. 创建 BigInt：

   • 使用 n 后缀或 BigInt() 构造函数来创建 BigInt。

     const a = 123456789012345678901234567890123456789n;
     const b = BigInt("123456789012345678901234567890123456789");
     

2. 基本运算：

   • BigInt 支持基本的数学运算，如加法、减法、乘法和除法。BigInt 与普通数字类型不可混合运算，需要都是 BigInt 或者通过 BigInt() 转换为 BigInt。

     const a = 123n;
     const b = 456n;
     const sum = a + b;
     const product = a * b;
     

3. 比较运算符：

   • BigInt 可以使用比较运算符（ <, >, <=, >=）进行比较。BigInt 与普通数字类型之间也可以进行比较。

     const a = 123n;
     const b = 456;
     console.log(a < b); // true
     

4. 转换为字符串和数字：

   • 可以使用 toString() 方法将 BigInt 转换为字符串，也可以使用 Number() 将 BigInt 转换为普通数字类型。需要注意，转换为数字类型时，可能发生精度丢失。

     const a = 123456789012345678901234567890123456789n;
     const b = a.toString();
     const c = Number(a); // 注意可能的精度丢失
     

5. 位运算：

   • BigInt 还支持位运算，如按位与、按位或和按位异或等操作。

     const a = 0b1101n; // 13
     const b = 0b1010n; // 10
     const c = a & b; // 0b1000n (8)
     const d = a | b;  // 0b1111n (15)
     

2.可选的链式操作符(?.)

• 可选的链式操作符使得在对象深层次的属性或方法调用中，当遇到null或undefined时，不会抛出错误，而是直接返回undefined。

// 在没有可选链式操作符之前
const value = user && user.address && user.address.street;

// 使用可选链式操作符
const value = user?.address?.street;

3.空值合并运算符(??)

• 空值合并运算符用于提供默认值，只有在变量为null或undefined时才会使用默认值。

// 在没有空值合并运算符之前
const value = (input !== null && input !== undefined) ? input : defaultValue;

// 使用空值合并运算符
const value = input ?? defaultValue;

4.动态导入 Import

• 动态导入允许在运行时按需加载模块，而不是在应用程序启动时一次性加载所有模块。这有助于提高性能和减少启动时间。

// 动态导入模块
const module = await import('module-name');

if (condition) {
  import('element-ui/lib/button').then((Button) => {
    // 使用 Button 组件
  });
}

5.全局对象globalThis

• globalThis提供了一个标准的方式来获取全局 this 值（在浏览器中是 window，在 Node.js 中是 global）。

// 在浏览器中
console.log(globalThis === window); // true

// 在Node.js中
console.log(globalThis === global); // true

6.String.matchAll()字符串正则匹配

String.matchAll()允许在字符串上使用正则表达式进行全局匹配，并返回一个包含所有匹配结果的迭代器。每个迭代器元素都是一个包含匹配信息的对象。特别适用于需要在字符串中找到所有匹配项的场景。这对于处理复杂的字符串模式匹配任务非常有用。

语法：

const a = string.matchAll(regexp);

• string: 要进行匹配的字符串。
• regexp: 一个正则表达式，用于在字符串中进行匹配。

返回值：

返回一个包含所有匹配结果的迭代器。每个迭代器元素都是一个包含匹配信息的对象，具有以下属性：

• 0：匹配的整个子串。
• index：匹配的子串在原始字符串中的起始索引。
• input：原始字符串。

const a = 'Hello a, Hello A';
const b = /Hello/g;
const c = a.matchAll(b);

for (const match of c) {
  console.log(111,match[0]);      // 匹配的整个子串
  console.log(222,match.index);   // 匹配子串的起始索引
  console.log(333,match.input);   // 原始字符串
}

//111 Hello
//222 0
//333 Hello a, Hello A
//111 Hello
//222 13
//333 Hello a, Hello A

1. matchAll 方法返回的是一个迭代器，如果要获取数组，可以使用 Array.from 或者扩展运算符 ...。

   const matchesArray = Array.from(matches);
   // 或者
   const matchesArray = [...matches];
   

2. 由于 matchAll 返回迭代器，可以使用 for...of 或者 forEach 来遍历匹配结果。

7.import.meta对象

• import.meta对象提供了关于当前模块的信息，包括模块的URL等。这对于在模块中动态获取模块信息很有用。

console.log(import.meta.url);

8.Promise.allSettled()

Promise.all() 方法只适合所有异步操作都成功的情况，如果有一个操作失败，就无法满足要求。Promise.allSettled()方法，用来确定一组异步操作是否都结束了（不管成功或失败）。

二者都用于批量异步任务。Promise.allSettled 的参数接受一个 Promise 的数组，返回一个新的 Promise。与 Promise.all() 不同，Promise.allSettled() 不会在任何 Promise 被拒绝时立即拒绝，而是等待所有 Promise（包括被解决和被拒绝的）都被处理后才返回结果。也就是说当 Promise.allSettled 全部处理完成后，我们可以拿到每个 Promise 的状态，而不管其是否处理成功。这个方法对于需要等待一组异步任务完成，而不关心它们中是否有被拒绝的情况的场景非常有用。

语法：

Promise.allSettled(iterable);

• iterable：一个可迭代对象，包含要处理的 Promise。

返回值：

返回一个 Promise，该 Promise 在所有给定的 Promise 都已被解决或被拒绝后才会解决。解决时，返回一个包含每个 Promise 结果的对象数组，每个对象都有 status 字段表示状态，可能的值为 "fulfilled" 或 "rejected"，以及 value 或 reason 字段表示对应的值或原因。

const promises = [
  Promise.resolve(1),
  Promise.reject("Error"),
  Promise.resolve(3)
];

Promise.allSettled(promises)
  .then(results => {
    results.forEach(result => {
      if (result.status === 'fulfilled') {
        console.log(`Fulfilled: ${result.value}`);
      } else {
        console.log(`Rejected: ${result.reason}`);
      }
    });
  });

即使有一个 Promise 被拒绝，Promise.allSettled() 也会等待所有 Promise 处理完成后返回结果。

1. Promise.allSettled() 返回的 Promise 总是解决的，不会拒绝。这意味着即使其中某个 Promise 被拒绝，它仍会等待其他所有 Promise 处理完毕后返回。

2. 返回的结果是一个包含每个 Promise 结果的对象数组，每个对象都包含 status 字段和对应的 value 或 reason 字段。

3. 与 Promise.all() 不同，Promise.allSettled() 在处理时不会短路。即使有 Promise 被拒绝，其他 Promise 仍然会被处理完毕。