前端口袋小册-第 60 期

husky in Beijing

2021-07-09

Brochure

# ES2021 特性

ES2021 特性不是很多

更全的 ECMA 新增特性 (opens new window)

# 字符串 replaceAll

顾名思义，替换所有满足条件的字符串

返回新字符串

'111222'.replaceAll(1, 'a')  // "aaa222"

// 或者匹配正则表达式
'111222'.replaceAll(/1/g, 'a')  // "aaa222"

1
2
3
4

当匹配正则表达式时 g 全局标识符必加

否则报错

VM582:1 Uncaught TypeError: String.prototype.replaceAll called with a non-global RegExp argument

# 数字分隔符（_）

增加数字可读性

12345000 === 123_45_000

11232.13233 === 11_232.12_233

// 不限制分隔位
123 === 1_2_3

1
2
3
4
5
6

# 简化逻辑运算符

数字 n = n + 1 与 n ++ 等价

其中 n ++ 属于简化版

ES2021 新增了

逻辑与、逻辑或、可选的简化版

// 逻辑与
x &&= y;
x && (x = y);

// 逻辑或
x ||= y;
x || (x = y);

// 可选
x ??= y;
x ?? (x = y);

1
2
3
4
5
6
7
8
9
10
11

注意逻辑或与 x || 1 区别开

x || 1 中 x 值是不变的

x ||= y 当 x 为假时 x = y，x 值是变化的

逻辑与、可选同理

# Promise.any 扩展

传入的 promise 只要有成功的

就返回第一个成功的 promise

只要有一个 promise 成功此方法就会终止

即 resolve

它不会等待其他的 promise 全部完成

而当所有promise都失败时

reject 抛错

真没啥好说的

Promise any 详细说明文档 (opens new window)

# WeakRef 对象弱引用

创建一个对象的弱引用

这个对象被 GC 回收

不会因为有个弱引用而阻止回收

强引入不行，必须没有引用才能被 GC 回收

它是一个构造函数，传入引用对象

其中 deref 返回引用的对象

let obj = {
  age: 20
}
let weakRef = new WeakRef(obj) // 创建 obj 弱引用

weakRef.deref() // {age: 20}，返回弱引用对象

// 该死， deref 会误写为 defer

1
2
3
4
5
6
7
8

注意

对于WeakRef对象的使用要慎重考虑，能不使用就尽量不要使用

# 对象 GC 时的回调 FinalizationRegistry

对象 GC 时是无感知的

不知道什么时候就发生了

或者到底有没有发生

FinalizationRegistry 可以让对象被垃圾回收时请求一个回调

这样就可以知道对象 GC 有没有发生

FinalizationRegistry 详情 MDN (opens new window)

# 优质搜罗

# 怪异的 JavaScript

收集了 25 道 Javascript 怪异题目

比如：

true + false // 1

[1, 2, 3] + [4, 5, 6] // "1,2,34,5,6"

"" - - "" // 0

1
2
3
4
5

怪异的 JavaScript 官网 (opens new window)

# animista Css 动画演示

与 animate.css (opens new window) Css 动画库类似

可调整动画时长、延迟时间、动画类型等

要说这两种有什么区别

基础都是使用 Css 实现动画效果

只是效果各有千秋

animista Css 动画演示 (opens new window)

# 聊点别的

「前端口袋小册」60 期了

暂告一段落

其他专题、源码等分享不会停止

是时候进行自我休整、出发的时候了

扫一扫，微信中打开