ECMAScript日常总结--ES2020(ES11)

发布时间:2024年01月19日

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",以及 valuereason 字段表示对应的值或原因。

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 字段和对应的 valuereason 字段。

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

文章来源:https://blog.csdn.net/Robinwang1128/article/details/135653532
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。