ES2020 新特性 "拍了拍" 你

大彪不吃蛋黄
1,728 阅读4分钟

BigInt

在 JavaScript 中现在有 8 种基本的数据类型了喔（7 种原始类型和 1 种引用类型）

  • number 用于任何类型的数字：整数或浮点数，在 ±2^53 范围内的整数。
  • bigint 用于任意长度的整数。
  • string
  • boolean
  • null 用于未知的值
  • undefined 用于未定义的值
  • symbol 用于唯一的标识符。
  • object 用于更复杂的数据结构。

BigInt 允许开发人员在其 JS 代码中使用更大的整数表示形式进行数据处理。目前在 js 中存储为整数的最大数量为 pow(2, 53) - 1。但是 BigInt 实际上允许你超越此范围。

img

但是，如上所示，你需要在数字的末尾附加一个附录。这 n 表示这是一个 BigInt，JavaScript 引擎（v8引擎或它正在使用的任何引擎）应将其区别对待。

此改进不向后兼容，因为传统的数字系统是IEEE754（它不能支持这种大小的数字）。

动态导入

我们之前使用的静态导入语法十分简单严格。首先我们不能动态生成 import 的任何参数。

模块路径必须是原始类型字符串，不能是函数调用，下面这样写行不通：

import ... from getModule();

其次，我们无法根据条件或者在运行时导入：

if() {
	import ...;   
}

{
    import ...
    // 在块级作用域中使用 import 是会报错的
}

这是因为 import / export 旨在提供代码结构的主干，这样便于分析代码结构，便于使用 webpack 根据模块的依赖关系进行静态分析并打包，删除未使用的导出（tree-shaking）。

import(module) 表达式加载模块并返回一个 promise，该 promise resolve 为一个包含其所有导出的模块对象。我们可以在代码中任何位置动态的使用它。

import('/example/path/xxx.js')
	.then(obj => obj.func())
	.catch(err => console.log(err))

或者在异步函数中，我们可以使用 let module = await import(modulePath)

尽管 import() 看起来像一个函数调用，但是它不是函数，只是一种特殊语法，只是恰好使用了括号（类似于 super()）。

实际应用-路由懒加载

Vue 官方文档

如果将组件都静态全部导入到路由文件中，那么在打包的时候代码体积会很大，会影响代码首屏加载速度，我们可以结合使用 Vue 异步组件和 Webpack 的代码分割功能，实现路由的懒加载，在访问到对应 url 的时候才加载相关组件。

const Foo = () => import('./Foo.vue')
const router = new VueRouter({
  routes: [
    { path: '/foo', component: Foo }
  ]
})
// 或者
const router = new VueRouter({
  routes: [
    { path: '/foo', component: () => import('./Foo.vue')}
  ]
})

空位合并

ES2020 增加了真正检查空值而不是假值的能力。在 JavaScript 中，很多值都是 falsey，例如 空字符串''，0，undefined，null，false，NaN等。

当我们查询某属性时，经常会给没有该属性就设置一个默认的值，比如下面两种方式：

let c = a ? a : b // 方式1
let c = a || b // 方式2

这两种方式有个明显的弊端，它都会覆盖所有的假值，这些值可能是在某些情况下有效的输入。

let obj = {
  prop: {
    name: 'zhuzhu',
    age: ''
  }
}
console.log(obj.prop.age || 18) //18

上例中 age 的属性为空字符串，却被等同为假值，为了解决这个问题，ES2020 诞生了个新特性--空位合并操作符，用 ?? 表示。如果表达式在 ?? 的左侧运算符求值为 undefined 或 null，就返回其右侧默认值。

let c = a ?? b;
// 等价于 let c = a !== undefined && a !== null ? a : b;

可选链操作符

可选链可以让你直接访问深层嵌套的对象的某个属性，而不需进行前置校验。如果不存在，将直接返回 undefined。

// 旧写法
let property = res && res.data && res.data.property

// 新写法
let property = res?.data?.property
// 在访问的某一层为 null/undefined 的话，直接短路计算返回 undefined

Promise.allSettled

该 Promise.allSettled 方法接受一个 Promises 数组，并且仅在所有这些 Promises 都已解决（已解决或已拒绝）时返回一个装满 Promises 结果的数组。

matchAll

方法 str.matchAll(regexp) 是 str.match “新改进的”变体。

它主要用来搜索所有组的所有匹配项。

与 match 相比有 3 个区别：

它返回包含匹配项的可迭代对象，而不是数组。我们可以用 Array.from 从中得到一个常规数组。 每个匹配项均以包含分组的数组形式返回（返回格式与不带 g 标记的 str.match 相同）。 如果没有结果，则返回的不是 null，而是一个空的可迭代对象。

let str = '<h1>Hello, world!</h1>';
let regexp = /<(.*?)>/g;
let matchAll = str.matchAll(regexp);
alert(matchAll); // [object RegExp String Iterator]，不是数组，而是一个可迭代对象
matchAll = Array.from(matchAll); // 现在返回的是数组
console.log(matchAll)

参考文献

10 New JavaScript Features in ES2020 That You Should Know

ES2020新特性

下期预告

使用 axios 做全局异常处理

avatar
文章
阅读
粉丝