2020年共读了13本，其中有两本不在一开始的计划中，后来加入的。主要的阅读时间在上半年，疫情期间的阅读时间相对会多一些，下半年比较忙碌，抽出来阅读时间减少。

整理2020年前端的技术生态，列了个人认为比较重要的一些项目和技术点，目前stateofjs问卷还在统计中，后续可以做些调整。

《思考致富》书本的阅读笔记

ECMAScript 2020新特性

• String.prototype.matchAll by Jordan Harband
• import() by Domenic Denicola
• BigInt – arbitrary precision integers by Daniel Ehrenberg
• Promise.allSettled by Jason Williams, Robert Pamely and Mathias Bynens
• globalThis by Jordan Harband
• for-in mechanics by Kevin Gibbons
• Optional chaining by Gabriel Isenberg, Claude Pache, Dustin Savery
• Nullish coalescing Operator by Gabriel Isenberg
• import.meta by Domenic Denicola
• export * as ns from “mod”

Jordan Harband提出的String.prototype.matchAll

String.prototype上的match()方法仅返回完全匹配，但是没有返回关于特定正则组的任意信息。感谢Jordan Harband关于String.prototype.matchAll的提案，可以返回比match()多很多的信息。返回的迭代器除了精确匹配外还给了我们访问所有的正则匹配捕获组。你还记得Gorkem Yakin和Daniel Ehrenberg添加到ECMAScript 2018的具名捕获组吗？matchAll()方法和此能很好的协调。通过下面例子来解释一下。

1
2
3
4
5
6

const text = "From 2019.01.29 to 2019.01.30";
const regexp = /(?<year>\d{4}).(?<month>\d{2}).(?<day>\d{2})/gu;
const results = text.match(regexp);

console.log(results);
// [ '2019.01.29', '2019.01.30' ]

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

const text = "From 2019.01.29 to 2019.01.30";
const regexp = /(?<year>\d{4}).(?<month>\d{2}).(?<day>\d{2})/gu;
const results = Array.from(text.matchAll(regexp));

console.log(results);
// [
//   [
//     '2019.01.29',
//     '2019',
//     '01',
//     '29',
//     index: 5,
//     input: 'From 2019.01.29 to 2019.01.30',
//     groups: [Object: null prototype] { year: '2019', month: '01', day: '29' }
//   ],
//   [
//     '2019.01.30',
//     '2019',
//     '01',
//     '30',
//     index: 19,
//     input: 'From 2019.01.29 to 2019.01.30',
//     groups: [Object: null prototype] { year: '2019', month: '01', day: '30' }
//   ]
// ]

Domenic Denicola提出的import()

不同于ECMAScript 2015中介绍的静态模块，Domenic Denicola提案的动态导入可以实现按需加载。这个类似函数的格式（不是继承自Function .prototype）返回一个很强大的promise。使用场景比如: 按需导入，在一个脚本中计算模块名并加载执行变得可能。

1
2
3
4
5

const modulePage = 'page.js';
import(modulePage)
    .then((module) => {
        module.default();
    });

1
2
3
4
5

(async () => {
  const helpersModule = 'helpers.js';
  const module = await import(helpersModule)
  const total = module.sum(2, 2);
})();

Daniel Ehrenberg提出的BigInt-任意精度整数

感谢Daniel Ehrenberg, Number.MAX_SAFE_INTEGER不再是JavaScript中的一个限制。BigInt是一个能表示任意精度整数的新基础类型。你可以通过使用BigInt方法或者在一个数字后添加n后缀来把一个数字转换为一个新的bigint类型。

1
2
3
4
5
6
7
8

Number.MAX_SAFE_INTERGER
// 9007199254740991

Number.MAX_SAFE_INTEGER + 10 -10
// 9007199254740990 👎

BigInt(Number.MAX_SAFE_INTEGER) + 10n -10n
// 9007199254740991n 👍

Jason Williams, Robert Pamely and Mathias Bynens提出的Promise.allSettled

自从ECMAScript 2015以来，JavaScript仅支持两种promise组合: Promise.all()和Promise.race()。感谢Jason Williams, Robert Pamely and Mathias Bynens，现在我们可以使用Promise.allSettled()。用这个方法来处理所有promise都解决时的场景（不管成功或失败）。看看下面的例子，并没有使用catch捕获异常！

1
2
3
4
5

Promise.allSettled([
  fetch("https://api.github.com/users/pawelgrzybek").then(data => data.json()),
  fetch("https://api.github.com/users/danjordan").then(data => data.json())
])
  .then(result => console.log(`All profile settled`));

还有Promise.any()有潜力很快进入ECMAScript规范中，在文章“Promise组合解释”中介绍了相关内容。

Jordan Harband提出的globalThis

那么在JavaScript中什么是全局的this?是在浏览器中的window，在worker中的self，在Nodejs中的global或者其他… 这种混乱结束了！感谢Jordan Harband，我们现在可以使用globalThis关键字了。

Kevin Gibbons提出的for-in机制

ECMAScript遗留了一个关于for-in循环顺序的详细描述。感谢Kevin Gibbons所付出的努力，为for-in机制定义了一系列规则。(原文: Thanks to Kevin Gibbons who finally put some TLC and defined a set in stone set of rules for for-in mechanics.)

Gabriel Isenberg, Claude Pache and Dustin Savery提出的optional chaining

读取层次很深的对象属性时通常是容易出错并且对应代码也不易阅读。感谢Gabriel Isenberg, Claude Pache and Dustin Savery，这件事情现在变得简单了。如果你是一个TypeScript用户，那么你不会发现什么新的特性，因为在3.7版本中TypeScript已经实现了这个特性。喜欢！

1
2
3
4
5

// 之前
const title = data && data.article && data.article.title

// 现在
const title = data?.article?.title

Gabriel Isenberg 提出的空值联合

空值联合添加了一个新的短路原则操作符来处理默认值。Gabriel Isenberg做了很棒的工作。这个特性结合optional chanining特性使用。不同于||操作符，空值联合操作符??仅在左边的值为严格的null或undefined时起左右。

1
2
3
4
5

"" || "default value"
// default value

"" ?? "default value"
// ""

1

const title = data?.article?.title ?? "What's new in ECMAScript 2020"

Domenic Denicola提出的import.meta

Domenic Denicola提出的import.meta提案添加一个host相关的元数据对象到当前执行的模块中。

1
2

console.log(import.meta.url)
// file:///Users/pawelgrzybek/main.js

EXPORT * AS NS FROM “MOD”

这是一个添加到规范中的有用特性，可以让开发者导出其他模块命名空间下的对象到一个新的名称下。

1

export * as ns from "mod"

参考

• WHAT’S NEW IN ECMASCRIPT 2020
• ECMAScript 2020: the final feature set

基于2019年的阅读进度，2020年计划阅读20本，不再按照季度平均分配，根据阅读书籍的难易和厚度分配时间。

方法

• 【略读】
• 【精读】
• 【主题阅读】

技术

• 【精读】《你不知道的JavaScript下卷》
• 【精读】《计算机程序的构造和解释》
• 【主题阅读】《ECMAScript Spec 2019》
• 【精读】《计算机网络》Andrew S.Tanenbaum 著 潘爱民 译
• 【精读】《代码整洁之道》[美]Robert C. Martin
• 【精读】《重构: 改善既有代码的设计》第2版 Martin Fowler

文学

• 【略读】《三体》刘慈欣
• 【略读】《伊利亚特》荷马
• 【略读】《王阳明全集》
• 【主题阅读】《华杉讲透王阳明《传习录》》华杉

经济

• 【略读】《思考致富》拿破仑·希尔

传记

• 【略读】《我的世界观》爱因斯坦
• 【略读】《爱因斯坦传》艾萨克森

历史

• 【略读】《显微镜下的大明》马伯庸

政治

• 【略读】《自由的阶梯：美国文明札记》
• 【略读】《自由的基因：自由主义的历史变迁》
• 【略读】《自由的刻度：缔造美利坚的40篇经典文献》

心理学

• 【略读】《自卑与超越》阿德勒
• 【略读】《自控力》 kelly McGonigal

其他

• 【略读】《你的灯亮着吗——发现问题所在》 康纳德.高斯 杰拉尔德.温伯格 著 俞月圆 译
• 【略读】《Thinking, Fast and Slow》 by Daniel Kahneman