ES7+知识点整理使用

1.空合并

如果要使用回退值，则必须使用逻辑运算符（“||”）。它几乎适用于所有情况，但在某些情况下也有例外。假设初始值是一个数字或一个布尔值。下面是一个示例，其中我们将为变量分配一个数字，如果初始值不是数字，则将其默认为 5。

let theNumber = 7
let number = theNumber || 5
console.log(number) // 输出: 7
1
2
3

‘number’ 变量等于 7，因为左边的值 (theNumber) 是真值（即 7）。但是如果“数字”值不是 7，而是分配给 0 呢？

let theNumber = 0
let number = theNumber || 5
console.log(number) // 输出：5
1
2
3

由于 0 不是正数/自然数，因此它是一个假值。结果，‘number’ 变量现在将获得分配给它的右侧值，即 5。无论如何，这不是我们想要的。幸运的是，无需编写额外的代码和检查来确认 ‘theNumber’ 变量是一个数字，您可以使用可以使用两个问号 - ‘??’ 编写的空合并运算符。

let theNumber = 0
let number = theNumber ?? 5
console.log(number) // 输出: 0
1
2
3

仅当左侧值等于 undefined 或 null 时，才会分配右侧值。因此，在上面的例子中，‘number’ 变量等于 0。这是当 ‘theNumber’ 变量等于 null 时发生的情况：

let theNumber = null // undefined
let number = theNumber ?? 5
console.log(number) // 输出: 5
1
2
3

2.私有字段

许多编程语言都有允许定义类属性的类，例如 protected、private 和 public。公共属性可以从类及其子类外部访问；而受保护的类只能由其子类访问。另一方面，私有属性只能从类内部访问。从 ES6 开始，JavaScript 开始支持类语法，但现在支持私有字段。要在 JavaScript 中定义私有属性，它应该在前缀中包含主题标签符号。

class Smartphones {
  #phone_color = "silver";
  designer(name) {
    this.name = name;
  }

get_color() {
    return this.#phone_color;
  }
}
const iPhone = new Smartphones("iPhone");
console.log(iPhone.get_color()); // 输出: silver
console.log(iPhone.#phone_color) // 输出: Private field '#phone_color' must be declared in an enclosing class
1
2
3
4
5
6
7
8
9
10
11
12
13

如果您尝试从外部访问私有属性，JavaScript 引擎将返回错误。

3.Promise.allSettled​

当你想要多个 Promise 完成时，可以使用 Promise.all ([promise_1, promise_2])。在这个过程中，如果其中一个promise失败，JavaScript引擎就会抛出一个错误。幸运的是，在某些情况下，一个承诺的失败并不重要，其余的都会解决。为了实现这一点，新的 JavaScript ES11 解压了 Promise.allSettled。

promise_1 = Promise.resolve('hi')
promise_2 = new Promise((resolve, reject) => setTimeout(reject, 100, 'world'))

Promise.allSettled([promise_1, promise_2])
    .then(([promise_1_result, promise_2_result]) => {
        console.log(promise_1_result) // 输出: {status: 'fulfilled', value: 'hi'}
        console.log(promise_2_result) // 输出: {status: 'rejected', reason: 'world'}
})
1
2
3
4
5
6
7
8

因此，只有已解析的 Promise 才会返回带有状态和值的对象；而被拒绝的 Promise 返回一个带有状态和原因的对象。

4.动态导入

在使用 webpack 进行模块捆绑时，您可能使用了动态导入。使用 JavaScript ES11，您可以获得对此功能的原生支持。

// Alert.js file
export default {
    show() {
        // Your alert
    }
}

// Some other file
import('/components/Alert.js')
    .then(Alert => {
        Alert.show()
})
1
2
3
4
5
6
7
8
9
10
11
12

由于许多应用程序使用模块打包器（例如 webpack）来优化和转译代码，因此此功能作为更新来得有点晚。

5.MatchAll

MatchAll 方法在通过将正则表达式应用于字符串来查找所有匹配项及其位置时很有用。另一方面，match 方法只返回匹配的项目。

const regex = /\b(iPhone)+\b/g;
const smartphones = "S series, iPhone, note series, iPhone, A series, iPhone, moto phones";

for (const match of smartphones.match(regex)) {
  console.log(match); //iPhone iPhone iPhone
}

1
2
3
4
5
6
7

相比之下，matchAll 返回附加信息，例如找到的字符串的索引。

const regex = /\b(iPhone)+\b/g;
const smartphones = "S series, iPhone, note series, iPhone, A series, iPhone, moto phones";
for (const match of smartphones.matchAll(regex)) {
  console.log(match);
}
/**
[
  'iPhone',
  'iPhone',
  index: 10,
  input: 'S series, iPhone, note series, iPhone, A series, iPhone, moto phones',
  groups: undefined
]
[
  'iPhone',
  'iPhone',
  index: 31,
  input: 'S series, iPhone, note series, iPhone, A series, iPhone, moto phones',
  groups: undefined
]
[
  'iPhone',
  'iPhone',
  index: 49,
  input: 'S series, iPhone, note series, iPhone, A series, iPhone, moto phones',
  groups: undefined
]
**/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

6.globalThis

可以在不同的环境中执行 JavaScript 代码，例如浏览器或 节点.js. 在浏览器中，window变量下有一个全局对象；而在 Node.js 中，它是一个名为 global 的对象。有了 globalThis，现在无论代码运行的环境如何，都可以轻松使用全局对象。

// In a browser
window == globalThis // true

// In node.js
global == globalThis // true
1
2
3
4
5