ES11(ES2020)中Javascript 10 个新功能

拼搏现实的明天。 2022-12-07 04:26 154阅读 0赞

### 目录 ###

*  1、BigInt
 *  2、动态引入
 *  3、空值合并
 *  4、可选链
 *  5、Promise.allSettled
 *  6、String\#matchAll
 *  7、 globalThis
 *  8、导出模块的命名空间
 *  9、明确定义 for-in 的顺序
 *  10、 import.meta

# 1、BigInt #

BigInt，Javascript 中最期待的新功能终于落地。它允许开发者在 JS 中使用更大的整数进行数据处理。  
之前，Javascript 中最大的整数是2^25 - 1。但是，BigInt 不受此限制。  
BigInt是在数字后面加上n,这个n说明他的类型是BingInt,而不是Number;  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIzNjA2Mg_size_16_color_FFFFFF_t_70_pic_center]

# 2、动态引入 #

Javascript 的动态引入，允许你把 JS 文件作为一个模块动态的引入到你的应用中。这就像你使用 webpack 和 Babel 一样。  
这个功能可以帮助你处理按需加载的代码，拆分代码，而且，并不需要 webpack 或者其它模块处理器。如果，你喜欢也可以在 if-else 块中加载代码。  
在 if-else 块中引入一个模块，这样的好处是：不会污染全局命名空间。  
![在这里插入图片描述][20200915092034559.png_pic_center]

# 3、空值合并 #

??是一个逻辑操作符，当左侧的操作数为 null 或者 undefined 时，返回其右侧操作数，否则返回左侧操作数。  
与逻辑或操作符（||）不同，逻辑或操作符会在左侧操作数为假值时返回右侧操作数。也就是说，如果使用 || 来为某些变量设置默认值，可能会遇到意料之外的行为。比如为假值（例如，’’ 或 0）时  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIzNjA2Mg_size_16_color_FFFFFF_t_70_pic_center 1]

# 4、可选链 #

可选链语法允许你访问嵌套更深的对象属性，而不用担心属性是否存在。如果，存在很好。反之，会返回 undefined。  
它不仅仅可操作对象属性，也可以操作函数的调用或者数组。这样更加方便！以下是个演示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIzNjA2Mg_size_16_color_FFFFFF_t_70_pic_center 2]

# 5、Promise.allSettled #

Promise.allSettled 方法接收一组 Promise，并且会返回所有的结果 - 而不管是 resolved 还是 rejected。  
在之前，这是不可能的，尽管有些类似的实现比如：race 和 all。它只会“运行所有的 promise - 而不关心它们的结果”。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIzNjA2Mg_size_16_color_FFFFFF_t_70_pic_center 3]

# 6、String\#matchAll #

matchAll 是 String 原型链上的一个新增的方法，它可以关联正则表达式。它返回一个迭代器，一个接一个的返回所有匹配的组。我们来看一个演示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIzNjA2Mg_size_16_color_FFFFFF_t_70_pic_center 4]

# 7、 globalThis #

在以前，从不同的 JavaScript 环境中获取全局对象需要不同的语句。在 Web 中，可以通过 window、self 或者 frames 取到全局对象，但是在 Web Workers 中，只有 self 可以。在 Node.js 中，它们都无法获取，必须使用 global。

在松散模式下，可以在函数中返回 this 来获取全局对象，但是在严格模式和模块环境下，this 会返回 undefined。

globalThis 提供了一个标准的方式来获取不同环境下的全局 this 对象（也就是全局对象自身）。不像 window 或者 self 这些属性，它确保可以在有无窗口的各种环境下正常工作。所以，你可以安心的使用 globalThis，不必担心它的运行环境。为便于记忆，你只需要记住，全局作用域中的 this 就是 globalThis。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIzNjA2Mg_size_16_color_FFFFFF_t_70_pic_center 5]

# 8、导出模块的命名空间 #

这是对 ES 规范的有力补充，它允许开发者以新名称导出另一模块的命名空间外部对象。  
同属于export … from …形式的聚合导出，作用上类似于：

import * as utils from './utils.mjs'
    
    export {  utils }

# 9、明确定义 for-in 的顺序 #

ECMA 规范中并没有明确定义 for (x in y) 的顺序。尽管，在此之前浏览器实现了一致的顺序，但是，现在已经被纳入到 ES2020 的官方规范中了。

# 10、 import.meta #

import.meta 是由 ECMAScript 创建实现的，默认为 null。

考虑一下这个模块，module.js ：

你可以通过 import.meta 对象访问模块的相关 meta 信息：

console.log(import.meta); // { url: "file:///home/user/module.js" }

它返回一个包含 url 属性的对象，该属性代表着模块的 URL。它可能是获取脚本的 URL（对于外部脚本来说），或者是包含模块文档的基础URL（对于内联脚本来说）。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIzNjA2Mg_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/96be594af00747e1850f374b7706d9f0.png
[20200915092034559.png_pic_center]: /images/20221123/f301ac35adf44163a42feb700d7df535.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIzNjA2Mg_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/215387111e9945aa87b7573dd646409e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIzNjA2Mg_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/28042e955917447790ae1a8005c14c09.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIzNjA2Mg_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/efebd20d46b24b5dbcacb8a3ad2a42c1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIzNjA2Mg_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221123/363f1302398049b180fd9a131241c2b2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIzNjA2Mg_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221123/33c21bcb28ad4e648575a772103fcca0.png