ES2020 新特性 "拍了拍" 你

BigInt

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

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

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

可是，如上所示，你须要在数字的末尾附加一个附录。这 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 作全局异常处理