matchAll

  1. matchAll() 方法返回一个包含所有匹配正则表达式的结果的迭代器。可以使用 for...of 遍历，或者使用 展开运算符(...) 或者 Array.from 转换为数组.
  4. const regexp = /t(e)(st(\d?))/g;
  5. const str = 'test1test2';
  7. const matchs = str.matchAll(regexp);
  8. console.log(matchs); // RegExpStringIterator {}
  9. console.log([...matchs])
  10. /*
  11. 0: (4) ["test1", "e", "st1", "1", index: 0, input: "test1test2", groups: undefined]
  12. 1: (4) ["test2", "e", "st2", "2", index: 5, input: "test1test2", groups: undefined]
  13. length: 2
  14. /*
  16. RegExp.exec()  和 matchAll() 区别：
  18. 在 matchAll 出现之前，通过在循环中调用 regexp.exec() 来获取所有匹配项信息。
  21. const regexp = RegExp('foo[a-z]*','g');
  22. const str = 'table football, foosball';
  23. let match;
  25. while ((match = regexp.exec(str)) !== null) {
  26.   console.log(`Found ${match[0]} start=${match.index} end=${regexp.lastIndex}.`);
  27. }
  28. // expected output: "Found football start=6 end=14."
  29. // expected output: "Found foosball start=16 end=24."
  31. 如果使用 matchAll ，就可以不必使用 while 循环加 exec 方式
  34. const regexp = RegExp('foo[a-z]*','g');
  35. const str = 'table football, foosball';
  36. const matches = str.matchAll(regexp);
  38. for (const match of matches) {
  39.   console.log(`Found ${match[0]} start=${match.index} end=${match.index + match[0].length}.`);
  40. }
  41. // expected output: "Found football start=6 end=14."
  42. // expected output: "Found foosball start=16 end=24."

import()

  1. import 标准的用法是导入的模块是静态的，会使所有被带入的模块在加载时就被编译，无法做到按需加载编译，降低了首页的加载速度。在某些场景中，你可能希望根据条件导入模块，或者按需导入模块，这是就可以使用动态导入代替静态导入了
  3. 在import() 之前，我们需要更具条件导入模块时只能使用 require() 
  6. if (xx) {
  7.   const module = require('/module')  
  8. }
  10. // 现在可以这么写
  11. if (xx) {
  12.   const module = import('/module')
  13. }
  15. @babel/preset-env 已经包含了 @babel/plugin-syntax-dynamic-import，因此如果要使用 import() 语法，只需要配置 @babel/preset-env 即可。
  17. 另外：import() 返回的是一个Promise 对象：
  20. // module.js
  21. export default {
  22.   name: 'shenjp'
  23. }
  25. // index.js
  26. if (true) {
  27.   let module = import('./module.js');
  28.   console.log(module); // Promise {<pending>
  29.   module.then(data => console.log(data)); // Module {default: {name: "shenjp"}, __esModule: true, Symbol(Symbol.toStringTag): "Module"}
  30. }

import.meta

  1. import.meta对象是由ECMAScript实现的，它带有一个null的原型对象。这个对象可以扩展，并且它的属性都是可写，可配置和可枚举的。
  3. <script type="module" src="my-module.mjs"></script>
  4. console.log(import.meta); // { url: "file:///home/user/my-module.mjs" }
  5. 因为 import.meta 必须要在模块内部使用，如果不加 type="module"，控制台会报错：Cannot use 'import.meta' outside a module。
  7. 在项目中需要下载 @open-wc/webpack-import-meta-loader  才能正常使用。
  10. module: {
  11.     rules: [
  12.         {
  13.             test: /\.js$/,
  14.             use: [
  15.                 require.resolve('@open-wc/webpack-import-meta-loader'),
  16.                 {
  17.                     loader: 'babel-loader',
  18.                     options: {
  19.                         presets: [
  20.                             "@babel/preset-env",
  21.                             "@babel/preset-react"
  22.                         ]
  23.                     },
  24.                 }
  25.             ]
  26.         }
  27.     ]
  28. }
  30. 效果如下：
  32. //src/index.js
  33. import React from 'react';
  34. console.log(import.meta);//{index.js:38 {url: "http://127.0.0.1:3000/src/index.js"}}

export * as ns from ‘module’

  1. ES2020新增了 export * as XX from 'module'，和 import * as XX from 'module'
  3. // module.js
  4. export * as ns from './info.js'
  5. 可以理解为下面两条语句的合并：
  7. import * as ns from './info.js';
  8. export { ns };
  9. 需要注意的是：export * as ns from 'module' 并不会真的导入模块，因此在该模块中无法使用 ns。

Promise.allSettled

  1. Promise.allSettled()方法返回一个在所有给定的promise都已经fulfilled或rejected后的promise，并带有一个对象数组，每个对象表示对应的promise结果。
  3. 当您有多个彼此不依赖的异步任务成功完成时，或者您总是想知道每个promise的结果时，通常使用它。
  5. 想比较之下， Promise.all() 更适合做相互依赖的Promise，只要有一个失败就结束
  7. 复制代码
  8. const promise1 = Promise.resolve(100);
  9. const promise2 = new Promise((resolve, reject) => setTimeout(reject, 100, 'info'));
  10. const promise3 = new Promise((resolve, reject) => setTimeout(resolve, 200, 'name'))
  12. Promise.allSettled([promise1, promise2, promise3]).
  13.     then((results) => console.log(result));
  14. /* 
  15.     [
  16.         { status: 'fulfilled', value: 100 },
  17.         { status: 'rejected', reason: 'info' },
  18.         { status: 'fulfilled', value: 'name' }
  19.     ]
  20. */
  21. 复制代码
  22. 可以看出，Promise.allSettled() 成功之后返回的也是一个数组，但是改数组的每一项都是一个对象，每个对象都有一个status属性，值为 fulfilled 和 rejected .
  24. 如果status是 fulfilled，那么改对象的另一个属性是 value ，对应的是该Promise成功后的结果。
  26. 如果status是 rejected，那么对象的另一个属性是 reason，对应的是该Promise失败的原因。

BigInt

  1. BigInt 是一种数字类型的数据，它可以表示任意精度格式的整数。在此之前，JS 中安全的最大数字是 9009199254740991，即2^53-1，在控制台中输入 Number.MAX_SAFE_INTEGER 即可查看。超过这个值，JS 没有办法精确表示。另外，大于或等于2的1024次方的数值，JS 无法表示，会返回 Infinity。
  3. BigInt 即解决了这两个问题。BigInt 只用来表示整数，没有位数的限制，任何位数的整数都可以精确表示。为了和 Number 类型进行区分，BigInt 类型的数据必须添加后缀 n.
  5. 复制代码
  6. //Number类型在超过9009199254740991后，计算结果即出现问题
  7. const num1 = 90091992547409910;
  8. console.log(num1 + 1); //90091992547409900
  10. //BigInt 计算结果正确
  11. const num2 = 90091992547409910n;
  12. console.log(num2 + 1n); //90091992547409911n
  13. 复制代码
  14. 我们还可以使用 BigInt 对象来初始化 BigInt 实例：
  16. console.log(BigInt(999)); // 999n 注意：没有 new 关键字！！！
  17. 需要说明的是，BigInt 和 Number 是两种数据类型，不能直接进行四则运算，不过可以进行比较操作。
  19. console.log(99n == 99); //true
  20. console.log(99n === 99); //false 
  21. console.log(99n + 1);//TypeError: Cannot mix BigInt and other types, use explicit conversionss

GlobalThis

  1. JS 中存在一个顶层对象，但是，顶层对象在各种实现里是不统一的。
  3. 从不同的 JavaScript 环境中获取全局对象需要不同的语句。在 Web 中，可以通过 window、self 取到全局对象，但是在 Web Workers 中，只有 self 可以。在 Node.js 中，它们都无法获取，必须使用 global。
  6. var getGlobal = function () {
  7.     if (typeof self !== 'undefined') { return self; }
  8.     if (typeof window !== 'undefined') { return window; }
  9.     if (typeof global !== 'undefined') { return global; }
  10.     throw new Error('unable to locate global object');
  11. };
  13. ES2020 中引入 globalThis 作为顶层对象，在任何环境下，都可以简单的通过 globalThis 拿到顶层对象。

空值合并运算符

  1. ES2020 新增了一个运算符 ??。当左侧的操作数为 null 或者 undefined时，返回其右侧操作数，否则返回左侧操作数。
  3. 在之前我们经常会使用 || 操作符，但是使用 || 操作符，当左侧的操作数为 0 、 null、 undefined、 NaN、 false、 '' 时，都会使用右侧的操作数。如果使用 || 来为某些变量设置默认值，可能会遇到意料之外的行为。
  5. ?? 操作符可以规避以上问题，它只有在左操作数是 null 或者是 undefined 时，才会返回右侧操作数。
  7. const someValue = 0;
  8. const defaultValue = 100;
  9. let value = someValue ?? defaultValue; // someValue 为 0 ，value 的值是 0

可选链操作符

  1. 可选链操作符 ?. 允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。?. 操作符的功能类似于 . 链式操作符，不同之处在于，在引用为空(nullish, 即 null 或者 undefined) 的情况下不会引起错误，该表达式短路返回值是 undefined。
  3. 例如，我们要访问 info 对象的 animal 的 reptile 的 tortoise。但是我们不确定 animal, reptile 是否存在，因此我们需要这样写：
  5. const tortoise = info.animal && info.animal.reptile && info.animal.reptile.tortoise;
  6. 因为 null.reptile 或  undefined.reptile 会抛出错误：TypeError: Cannot read property 'reptile' of undefined 或 TypeError: Cannot read property 'reptile' of null，为了避免报错，如果我们需要访问的属性更深，那么这个这句代码会越来越长。
  8. 有了可选链之后我们就可以简化：
  10. const tortoise = info.animal?.reptile?.tortoise;
  11. 可以看到可选链操作符 ?. 和空位合并操作符一样，都是针对的 null 和 undefined 这两个值。