这些新特性你知道？ECMAScript 2020的新特性

在引入 ECMAScript 2015（又称 ES6）之前，JavaScript 发展的非常缓慢。但自 2015 年起，每年都有新特性添加进来。需要注意的是，不是所有特性都被现代浏览器支持，但是由于 JavaScript 编译器 Babel 的存在，我们已经可以使用新特性了。本文将介绍 ECMAScript 2020（ES11）的一些最新特性。

（不要被吓到，真的是ES11说ES6啥的都low了。今天搬砖不努力，明天回家掰苞米，加油学习）

01 Optional Chaining 可选链式调用

在以前的语法中，想要获得深层次的属性或方法，如果不做前置校验的话，那么就很容易出现这种错误↓ 这可能会导致你整个应用奔溃…

出现这样的错误，你会怎么解决呢？

TypeError: Cannot read property ‘x’ of undefined

JavaScript

此错误基本上意味着我们试图访问非对象上的属性。


const boy = {
    character: {
        outgoing: true
    }
}

console.log(boy.character.outgoing) // this will work

console.log(boy.talent.singing()) // TypeError: Cannot read property 'singing' of undefined

JavaScript

const coolBoy = boy && boy.character &&  boy.character.outging && boy.talent.singing()
console.log(coolBoy);

JavaScript

这样...

const coolBoy = boy ? (boy.talent ? (boy.talent.singing ? (boy.talent.singing() : '') : '') : ''
console.log(coolBoy);

JavaScript

还是这样...

这样写显然都是比较笨重的写法，不优雅可读性也很差。
总知道怎么写的简洁优雅？往下看

可选链式调用操作符（?.）登场

当我们使用了可选链操作符，之前的代码就可以写成这样了：

const coolBoy = boy?.boy.talent?.singsing?.()
console.log(coolBoy);

JavaScript

瞬间高大上了有没有？当然数组函数也都可以使用


let flowers =  ['lily', 'daisy', 'rose']

console.log(flowers[1]) // 输出：daisy

flowers = null

console.log(flowers[1]) // 抛出错误：TypeError: Cannot read property '1' of null
console.log(flowers?.[1]) // 输出：undefined

JavaScript

let plantFlowers = () => {
  return 'orchids'
}

console.log(plantFlowers()) // 输出：orchids

plantFlowers = null

console.log(plantFlowers()) // 抛出错误：TypeError: plantFlowers is not a function

console.log(plantFlowers?.()) // 输出：undefined

JavaScript

Nullish Coalescing 空值合并

目前，对于回退值，还是需要使用逻辑操作符 || 。它的适用情况很多，但有一些特殊的场景就不怎么适用了。比如，初始值是布尔值false或数字0的情况。如下，我们要把数字赋值给一个变量，在变量不是数字0时候，赋值为 7 ：

let number = 1
let myNumber = number || 7 // 输出：1

JavaScript

变量 myNumber 等于 1，因为1是真值。但是，当变量 number 不是 1 而是 0 或者布尔值为false的时候呢？

let number = 0
let myNumber = number || 7 // 输出：7

JavaScript

因为数字0为假值，所以 myNumber 被赋值为右边的值。但是这个结果并不是我们想要的。这就是空值合并（??）的作用，这个合并操作符就可以检查变量 number 是否是一个数字或者布尔值，这样就比较省事不需要做其他操作。对于js中false == 0是成立的，所以这个操作符的重要就由此可见了。

let number = 0
let myNumber = number ?? 7  // 输出：0
let flag = false
let newFlag = flag ?? true  // 输出：false

JavaScript

合并操作符右边的值仅在左边的值等于 null 或 undefined 时有效，因此就能获取到自己想要的效果了。

03Private Fields 私有字段

大多数编程语言的 classes 都允许定义类作为公共的，受保护的或私有的属性（包括TypeScript也都有这些）。Public关键字可以声明类内部和外部都可以访问，且子类可以继承的属性; protected 关键字可以声明只允许内部访问和子类继承的属性；private 关键字只能声明被内部使用的属性。在JavaScript 从 ES6 开始支持类语法开始，直到现在才引入了私有字段。定义私有属性的关键字为，在属性其前面加上散列符号：#。如下：


class Flower {
  #leaf_color = "green";
  constructor(name) {
    this.name = name;
  }

  get_color() {
    return this.#leaf_color;
  }
}

const orchid = new Flower("orchid");

console.log(orchid.get_color()); // 输出：green
console.log(orchid.#leaf_color) // 报错：SyntaxError: Private field '#leaf_color' must be declared in an enclosing class

JavaScript

因此，在类的外部访问私有属性，则会报错；同样这个作为私有属性，子类也是无法继承的。

04 Static Fields 静态字段

作为ES6开始引入的类的概念，如果想调用类中的属性或方法，需要先对类进行实例化，如下所示：

class Flower {
  add_leaves() {
    console.log("Adding leaves");
  }
}

const rose = new Flower();
rose.add_leaves();

Flower.add_leaves() // 抛出错误：TypeError: Flower.add_leaves is not a function

JavaScript

如果想直接从类中调用方法或获取属性，就会跑错。但是由static关键字声明的属性或方法，可以直接用类在外部调用。（但是用static声明的，在类的实例中是访问不到的）

class Flower {
  constructor(type) {
    this.type = type;
  }
  static create_flower(type) {
    return new Flower(type);
  }
}

const rose = Flower.create_flower("rose"); // 正常运行

JavaScript

05 Top Level Await 顶级 Await

在此之前，如果想用 await 获取 promise 函数的结果或者其他的，那在使用 await 的函数的时候必须和async 关键字一同使用才可以。

const func = async () => {
    const response = await fetch(url)
}

JavaScript

但是在一些情况不需要async，比如在全局作用域中去等待某些结果基本上是不可能的。除非是立即调用的函数表达式（IIFE）。

(async () => {
    const response = await fetch(url)
})();

JavaScript

于是在这里有了顶级 Await 后，就不需要再把代码包裹在一个 async 函数中了，如下即可：

const response = await fetch(url)

JavaScript

这个特性对于解决模块依赖或当初始源无法使用而需要备用源的时候是非常有用的。

let Vue
try {
    Vue = await import('url_1_to_vue')
} catch {
    Vue = await import('url_2_to_vue)
} ;

JavaScript

看着似乎是await功能更强大，使用起来更方便了

06 Promise.allSettled 方法

等待多个 promise 返回结果时，我们可以用 Promise.all([promise_1, promise_2])。但问题是，如果其中一个请求失败了，就会抛出错误。然而，有时候我们希望某个请求失败后，其他请求的结果能够正常返回。针对这种情况 ES11 引入了 Promise.allSettled 。

promise_1 = Promise.resolve('hello')
promise_2 = new Promise((resolve, reject) => setTimeout(reject, 200, 'problem'))

Promise.allSettled([promise_1, promise_2])
    .then(([promise_1_result, promise_2_result]) => {
        console.log(promise_1_result) // 输出：{status: 'fulfilled', value: 'hello'}
        console.log(promise_2_result) // 输出：{status: 'rejected', reason: 'problem'}
    })

JavaScript

成功的 promise 将返回一个包含 status 和 value 的对象，失败的 promise 将返回一个包含 status 和 reason 的对象。

07 Dynamic Import 动态引入

你也许在 webpack 的模块绑定中已经使用过动态引入。但对于该特性的原生支持已经到来：

// Alert.js
export default {
    show() {
        // 代码
    }
}

// 使用 Alert.js 的文件
import('/components/Alert.js')
    .then(Alert => {
        Alert.show()
    })

JavaScript

考虑到许多应用程序使用诸如 webpack 之类的模块打包器来进行代码的转译和优化，这个特性现在还没什么大作用。

08 MatchAll 匹配所有项

如果你想要查找字符串中所有正则表达式的匹配项和它们的位置，MatchAll 非常有用。

const regex = /\b(apple)+\b/;
const fruits = "pear, apple, banana, apple, orange, apple";


for (const match of fruits.match(regex)) {
  console.log(match); 
}
// 输出 
// 
// 'apple' 
// 'apple'

JavScript

相比之下，matchAll 返回更多的信息，包括找到匹配项的索引

for (const match of fruits.matchAll(regex)) {
  console.log(match);
}

// 输出
// 
// [
//   'apple',
//   'apple',
//   index: 6,
//   input: 'pear, apple, banana, apple, orange, apple',
//   groups: undefined
// ],
// [
//   'apple',
//   'apple',
//   index: 21,
//   input: 'pear, apple, banana, apple, orange, apple',
//   groups: undefined
// ],
// [
//   'apple',
//   'apple',
//   index: 36,
//   input: 'pear, apple, banana, apple, orange, apple',
//   groups: undefined
// ]

JavaScript

09 globalThis 全局对象

JavaScript 可以在不同环境中运行，比如浏览器或者 Node.js。浏览器中可用的全局对象是变量 window，但在 Node.js 中是一个叫做 global 的对象。为了在不同环境中都使用统一的全局对象，引入了 globalThis。

// 浏览器
window == globalThis // true

// node.js
global == globalThis // true

JavaScript

10 BigInt

JavaScript 中能够精确表达的最大数字是 2^53 - 1。而 BigInt 可以用来创建更大的数字。（JavaScript也向着BigInt动手了）


const theBiggerNumber = 9007199254740991n
const evenBiggerNumber = BigInt(9007199254740991)

JavaScript

01 Optional Chaining 可选链式调用

Nullish Coalescing 空值合并

03Private Fields 私有字段

04 Static Fields 静态字段

05 Top Level Await 顶级 Await

06 Promise.allSettled 方法

07 Dynamic Import 动态引入

08 MatchAll 匹配所有项

09 globalThis 全局对象

Recommend

如何将Vue3.0项目部署到Heroku

做了一夜动画，就为让大家更好的理解Vue3的Composition Api

Axure RP 9最新版软件及汉化包下载正式版

js 检测浏览器开发者控制台是否被打开

Node零配置服务器之http-server

tp5允许跨域请求配置

Nginx修改响应内容模块(sub_filter模块)

阿里统计图表库G2Plot

富文本编辑器vue-quill-editor

如何在ElementUI组件传递其他参数?

About Joyk