JavaScript的未来：它还少些什么？

翻译&＃xff1a;疯狂的技术宅
原文&＃xff1a;http://2ality.com/2019/01/fut...

本文首发微信公众号&＃xff1a;jingchengyideng
欢迎关注&＃xff0c;每天都给你推送新鲜的前端技术文章

近年来&＃xff0c;Javascript 的功能得到了大幅度的增加&＃xff0c;本文探讨了其仍然缺失的东西。

说明&＃xff1a;

我只列出了我所发现的最重要的功能缺失。当然还有很多其它有用的功能&＃xff0c;但同时也会增加太多的风险。
我的选择是主观的。
本文中提及的几乎所有内容都在 TC39 的技术雷达上。也就是说&＃xff0c;它还可以作为未来可能的 Javascript 的预览。

有关前两个问题的更多想法&＃xff0c;请参阅本文第8节&＃xff1a;语言设计部分。

1. 值

1.1 按值比较对象

目前&＃xff0c;Javascript 只能对原始值&＃xff08;value&＃xff09;进行比较&＃xff0c;例如字符串的值&＃xff08;通过查看其内容&＃xff09;&＃xff1a;

> &＃39;abc&＃39; &＃61;&＃61;&＃61; &＃39;abc&＃39; true

相反&＃xff0c;对象则通过身份ID&＃xff08;identity&＃xff09;进行比较&＃xff08;对象仅严格等于自身&＃xff09;&＃xff1a;

> {x: 1, y: 4} &＃61;&＃61;&＃61; {x: 1, y: 4} false

如果有一种能够创建按值进行比较对象的方法&＃xff0c;那将是很不错的&＃xff1a;

> #{x: 1, y: 4} &＃61;&＃61;&＃61; #{x: 1, y: 4} true

另一种可能性是引入一种新的类&＃xff08;确切的细节还有待确定&＃xff09;&＃xff1a;

&＃64;[ValueType] class Point {// ··· }

旁注&＃xff1a;这种类似装饰器的将类标记为值类型的的语法基于草案提案。

1.2 将对象放入数据结构中

如果对象通过身份ID进行比较&＃xff0c;将它们放入 ECMAScript 数据结构&＃xff08;如Maps&＃xff09;中并没有太大意义&＃xff1a;

const m &＃61; new Map(); m.set({x: 1, y: 4}, 1); m.set({x: 1, y: 4}, 2); assert.equal(m.size, 2);

可以通过自定义值类型修复此问题。或者通过自定义 Set 元素和 Map keys 的管理。例如&＃xff1a;

通过哈希表映射&＃xff1a;需要一个操作来检查值是否相等&＃xff0c;另一个操作用于创建哈希码。如果使用哈希码&＃xff0c;则对象应该是不可变的。否则破坏数据结构就太容易了。
通过排序树映射&＃xff1a;需要一个比较值的操作用来管理它存储的值。

1.3 大整数

Javascript 的数字总是64位的&＃xff08;双精度&＃xff09;&＃xff0c;它能为整数提供53位二进制宽度。这意味着如果超过53位&＃xff0c;就不好使了&＃xff1a;

> 2 ** 53 9007199254740992 > (2 ** 53) &＃43; 1 // can’t be represented 9007199254740992 > (2 ** 53) &＃43; 2 9007199254740994

对于某些场景&＃xff0c;这是一个相当大的限制。现在有[BigInts提案]&＃xff08;http://2ality.com/2017/03/es-...&＃xff09;&＃xff0c;这是真正的整数&＃xff0c;其精度可以随着需要而增长&＃xff1a;

> 2n ** 53n 9007199254740992n > (2n ** 53n) &＃43; 1n 9007199254740993n

BigInts还支持 casting&＃xff0c;它为你提供固定位数的值&＃xff1a;

const int64a &＃61; BigInt.asUintN(64, 12345n); const int64b &＃61; BigInt.asUintN(64, 67890n); const result &＃61; BigInt.asUintN(64, int64a * int64b);

1.4 小数计算

Javascript 的数字是基于 IEEE 754 标准的64位浮点数&＃xff08;双精度数&＃xff09;。鉴于它们的表示形式是基于二进制的&＃xff0c;在处理小数部分时可能会出现舍入误差&＃xff1a;

> 0.1 &＃43; 0.2 0.30000000000000004

这在科学计算和金融技术&＃xff08;金融科技&＃xff09;中尤其成问题。基于十进制运算的提案目前处于阶段0。它们可能最终被这样使用&＃xff08;注意十进制数的后缀 m&＃xff09;&＃xff1a;

> 0.1m &＃43; 0.2m 0.3m

1.5 对值进行分类

目前&＃xff0c;在 Javascript 中对值进行分类非常麻烦&＃xff1a;

首先&＃xff0c;你必须决定是否使用 typeof 或 instanceof。
其次&＃xff0c;typeof 有一个众所周知的的怪癖&＃xff0c;就是把 null 归类为“对象”。我还认为函数被归类为 &＃39;function&＃39; 同样是奇怪的。

> typeof null &＃39;object&＃39; > typeof function () {} &＃39;function&＃39; > typeof [] &＃39;object&＃39;

第三&＃xff0c;instanceof 不适用于来自其他realm&＃xff08;框架等&＃xff09;的对象。

也许可能通过库来解决这个问题&＃xff08;如果我有时间&＃xff0c;就会实现一个概念性的验证&＃xff09;。

2. 函数式编程

2.1 更多表达式

不幸的是C风格的语言在表达式和语句之间做出了区分&＃xff1a;

// 条件表达式 let str1 &＃61; someBool ? &＃39;yes&＃39; : &＃39;no&＃39;;// 条件声明 let str2; if (someBool) {str2 &＃61; &＃39;yes&＃39;; } else {str2 &＃61; &＃39;no&＃39;; }

特别是在函数式语言中&＃xff0c;一切都是表达式。 Do-expressions 允许你在所有表达式上下文中使用语句&＃xff1a;

let str3 &＃61; do {if (someBool) {&＃39;yes&＃39;} else {&＃39;no&＃39;} };

下面的代码是一个更加现实的例子。如果没有 do-expression&＃xff0c;你需要一个立即调用的箭头函数来隐藏范围内的变量 result &＃xff1a;

const func &＃61; (() &＃61;> {let result; // cachereturn () &＃61;> {if (result &＃61;&＃61;&＃61; undefined) {result &＃61; someComputation();}return result;} })();

使用 do-expression&＃xff0c;你可以更优雅地编写这段代码&＃xff1a;

const func &＃61; do {let result;() &＃61;> {if (result &＃61;&＃61;&＃61; undefined) {result &＃61; someComputation();}return result;}; };

2.2 匹配&＃xff1a;解构 `switch`

Javascript 使直接使用对象变得容易。但是根据对象的结构&＃xff0c;没有内置的切换 case 分支的方法。看起来是这样的&＃xff08;来自提案的例子&＃xff09;&＃xff1a;

const resource &＃61; await fetch(jsonService); case (resource) {when {status: 200, headers: {&＃39;Content-Length&＃39;: s}} -> {console.log(&＃96;size is ${s}&＃96;);}when {status: 404} -> {console.log(&＃39;JSON not found&＃39;);}when {status} if (status >&＃61; 400) -> {throw new RequestError(res);} }

正如你所看到的那样&＃xff0c;新的 case 语句在某些方面类似于 switch&＃xff0c;不过它使用解构来挑选分支。当人们使用嵌套数据结构&＃xff08;例如在编译器中&＃xff09;时&＃xff0c;这种功能非常有用。模式匹配提案目前处于第1阶段。

2.3 管道操作

管道操作目前有两个竞争提案。在本文&＃xff0c;我们研究其中的 智能管道&＃xff08;另一个提议被称为 F# Pipelines&＃xff09;。

管道操作的基本思想如下。请考虑代码中的嵌套函数调用。

const y &＃61; h(g(f(x)));

但是&＃xff0c;这种表示方法通常不能体现我们对计算步骤的看法。在直觉上&＃xff0c;我们将它们描述为&＃xff1a;

从值 x 开始。
然后把 f() 作用在 x 上。
然后将 g() 作用于结果。
然后将 h() 应用于结果。
最后将结果赋值给 y。

管道运算符能让我们更好地表达这种直觉&＃xff1a;

const y &＃61; x |> f |> g |> h;

换句话说&＃xff0c;以下两个表达式是等价的。

f(123) 123 |> f

另外&＃xff0c;管道运算符支持部分应用程序&＃xff08;类似函数的 .bind() 方法&＃xff09;&＃xff1a;以下两个表达式是等价的。

123 |> f(#) 123 |> (x &＃61;> f(x))

使用管道运算符一个最大的好处是&＃xff0c;你可以像使用方法一样使用函数——而无需更改任何原型&＃xff1a;

import {map} from &＃39;array-tools&＃39;; const result &＃61; arr |> map(#, x &＃61;> x * 2);

最后&＃xff0c;让我们看一个长一点的例子&＃xff08;取自提案并稍作编辑&＃xff09;&＃xff1a;

promise |> await # |> # || throw new TypeError(&＃96;Invalid value from ${promise}&＃96;) |> capitalize // function call |> # &＃43; &＃39;!&＃39; |> new User.Message(#) |> await stream.write(#) |> console.log // method call ;

3 并发

一直以来 Javascript 对并发性的支持很有限。并发进程的事实标准是 Worker API&＃xff0c;可以在 web browsers 和 Node.js &＃xff08;在 v11.7 及更高版本中没有标记&＃xff09;中找到。

在Node.js中的使用方法它如下所示&＃xff1a;

const {Worker, isMainThread, parentPort, workerData } &＃61; require(&＃39;worker_threads&＃39;);if (isMainThread) {const worker &＃61; new Worker(__filename, {workerData: &＃39;the-data.json&＃39;});worker.on(&＃39;message&＃39;, result &＃61;> console.log(result));worker.on(&＃39;error&＃39;, err &＃61;> console.error(err));worker.on(&＃39;exit&＃39;, code &＃61;> {if (code !&＃61;&＃61; 0) {console.error(&＃39;ERROR: &＃39; &＃43; code);}}); } else {const {readFileSync} &＃61; require(&＃39;fs&＃39;);const fileName &＃61; workerData;const text &＃61; readFileSync(fileName, {encoding: &＃39;utf8&＃39;});const json &＃61; JSON.parse(text);parentPort.postMessage(json); }

唉&＃xff0c;相对来说 Workers 是重量级的 —— 每个都有自己的 realm&＃xff08;全局变量等&＃xff09;。我想在未来看到一个更加轻量级的构造。

4. 标准库

Javascript 仍然明显落后于其他语言的一个领域是它的标准库。当然保持最小化是有意义的&＃xff0c;因为外部库更容易进化和适应。但是有一些核心功能也是有必要的。

4.1 用模块替代命名空间对象

Javascript 标准库是在其语言具有模块之前创建的。因此函数被放在命名空间对象中&＃xff0c;例如Object&＃xff0c;Reflect&＃xff0c;Math和JSON&＃xff1a;

Object.keys()
Reflect.ownKeys()
Math.sign()
JSON.parse()

如果将这个功能放在模块中会更好。它必须通过特殊的URL访问&＃xff0c;例如使用伪协议 std&＃xff1a;

// Old: assert.deepEqual(Object.keys({a: 1, b: 2}),[&＃39;a&＃39;, &＃39;b&＃39;]);// New: import {keys} from &＃39;std:object&＃39;; assert.deepEqual(keys({a: 1, b: 2}),[&＃39;a&＃39;, &＃39;b&＃39;]);

好处是&＃xff1a;

Javascript 将变得更加模块化&＃xff08;这可以加快启动时间并减少内存消耗&＃xff09;。
调用导入的函数比调用存储在对象中的函数更快。

4.2 可迭代工具 (sync 与 async)

迭代的好处包括按需计算和支持许多数据源。但是目前 Javascript 只提供了很少的工具来处理 iterables。例如&＃xff0c;如果要过滤、映射或消除重复&＃xff0c;则必须将其转换为数组&＃xff1a;

const iterable &＃61; new Set([-1, 0, -2, 3]); const filteredArray &＃61; [...iterable].filter(x &＃61;> x >&＃61; 0); assert.deepEqual(filteredArray, [0, 3]);

如果 Javascript 具有可迭代的工具函数&＃xff0c;你可以直接过滤迭代&＃xff1a;

const filteredIterable &＃61; filter(iterable, x &＃61;> x >&＃61; 0); assert.deepEqual(// We only convert the iterable to an Array, so we can// check what’s in it:[...filteredIterable], [0, 3]);

以下是迭代工具函数的一些示例&＃xff1a;

// Count elements in an iterable assert.equal(count(iterable), 4);// Create an iterable over a part of an existing iterable assert.deepEqual([...slice(iterable, 2)],[-1, 0]);// Number the elements of an iterable // (producing another – possibly infinite – iterable) for (const [i,x] of zip(range(0), iterable)) {console.log(i, x); } // Output: // 0, -1 // 1, 0 // 2, -2 // 3, 3

笔记&＃xff1a;

有关迭代器的工具函数示例&＃xff0c;请参阅 Python 的 itertools &＃xff08;https://docs.python.org/3/lib...&＃xff09;。
对于 Javascript&＃xff0c;迭代的每个工具函数应该有两个版本&＃xff1a;一个用于同步迭代&＃xff0c;一个用于异步迭代。

4.3 不可变数据

很高兴能看到对数据的非破坏性转换有更多的支持。两个相关的库是&＃xff1a;

Immer 相对轻量&＃xff0c;适用于普通对象和数组。
Immutable.js 更强大&＃xff0c;更重量级&＃xff0c;并附带自己的数据结构。

4.4 更好地支持日期和时间

Javascript 对日期和时间的内置支持有许多奇怪的地方。这就是为什么目前建议用库来完成除了最基本任务之外的其它所有工作。

值得庆幸的是 temporal 是一个更好的时间 API&＃xff1a;

const dateTime &＃61; new CivilDateTime(2000, 12, 31, 23, 59); const instantInChicago &＃61; dateTime.withZone(&＃39;America/Chicago&＃39;);

5. 可能不需要的功能

5.1 optional chaining 的优缺点

一个相对流行的提议功能是 optional chaining。以下两个表达式是等效的。

obj?.prop (obj &＃61;&＃61;&＃61; undefined || obj &＃61;&＃61;&＃61; null) ? undefined : obj.prop

此功能对于属性链特别方便&＃xff1a;

obj?.foo?.bar?.baz

但是&＃xff0c;仍然存在缺点&＃xff1a;

深层嵌套的结构更难管理。
由于在访问数据时过于宽容&＃xff0c;隐藏了以后可能会出现的问题&＃xff0c;更难以调试。

optional chaining 的替代方法是在单个位置提取一次信息&＃xff1a;

你可以编写一个提取数据的辅助函数。
或者你可以编写一个函数&＃xff0c;使其输入是深层嵌套数据&＃xff0c;但是输出更简单、标准化的数据。

无论采用哪种方法&＃xff0c;都可以执行检查并在出现问题时尽早抛出异常。

进一步阅读&＃xff1a;

“Overly defensive programming” by Carl Vitullo
Thread on Twitter by Cory House

5.2 我们需要运算符重载吗&＃xff1f;

目前正在为运算符重载进行早期工作&＃xff0c;但是 infix 函数可能就足够了&＃xff08;目前还没有提案&＃xff09;&＃xff1a;

import {BigDecimal, plus} from &＃39;big-decimal&＃39;; const bd1 &＃61; new BigDecimal(&＃39;0.1&＃39;); const bd2 &＃61; new BigDecimal(&＃39;0.2&＃39;); const bd3 &＃61; bd1 &＃64;plus bd2; // plus(bd1, bd2)

infix 函数的好处是&＃xff1a;

你可以创建 Javascript 以外的运算符。
与普通函数相比&＃xff0c;嵌套表达式的可读性仍然很好。

下面是嵌套表达式的例子&＃xff1a;

a &＃64;plus b &＃64;minus c &＃64;times d times(minus(plus(a, b), c), d)

有趣的是&＃xff0c;管道操作符还有助于提高可读性&＃xff1a;

plus(a, b)|> minus(#, c)|> times(#, d)

6. 各种小东西

以下是我偶尔会遗漏的一些东西&＃xff0c;但我认为不如前面提到的那些重要&＃xff1a;

链式异常&＃xff1a;使你能够捕获错误&＃xff0c;能够包含其他信息并再次抛出。

new ChainedError(msg, origError)

可组合的正则表达式&＃xff1a;

re&＃96;/^${RE_YEAR}-${RE_MONTH}-${RE_DAY}$/u&＃96;

正则表达式的转义文本&＃xff08;对于.replace&＃xff08;&＃xff09;很重要&＃xff09;&＃xff1a;

> const re &＃61; new RegExp(RegExp.escape(&＃39;:-)&＃39;), &＃39;ug&＃39;); > &＃39;:-) :-) :-)&＃39;.replace(re, &＃39;?&＃39;) &＃39;? ? ?&＃39;

支持负索引的 Array.prototype.get&＃xff08;&＃xff09;&＃xff1a;

> [&＃39;a&＃39;, &＃39;b&＃39;].get(-1)&＃39;b&＃39;

匹配和解构的模式&＃xff08;KatMarchán 的提案&＃xff09;&＃xff1a;

function f(...[x, y] as args) {if (args.length !&＃61;&＃61; 2) {throw new Error();}// ···}

检查对象的深度相等性&＃xff08;有可能&＃xff1a;可选地使用谓词进行参数化&＃xff0c;以支持自定义数据结构&＃xff09;&＃xff1a;

assert.equal({foo: [&＃39;a&＃39;, &＃39;b&＃39;]} &＃61;&＃61;&＃61; {foo: [&＃39;a&＃39;, &＃39;b&＃39;]},false);assert.equal(deepEqual({foo: [&＃39;a&＃39;, &＃39;b&＃39;]}, {foo: [&＃39;a&＃39;, &＃39;b&＃39;]}),true);

枚举&＃xff1a;向 Javascript 添加枚举的一个好处是可以缩小与 TypeScript 的差距。目前有两份提案草案&＃xff08;尚未处于正式阶段&＃xff09;。一个是Rick Waldron&＃xff0c;另一个是Ron Buckton。在两个提案中&＃xff0c;最简单的语法如下所示&＃xff1a;

enum WeekendDay {Saturday, Sunday}const day &＃61; WeekendDay.Sunday;

Tagged collection literals &＃xff08;由KatMayán提议 - 并撤回&＃xff09;&＃xff1a;允许你创建 Map 和 Set&＃xff0c;如下所示&＃xff1a;

const myMap &＃61; Map!{1: 2, three: 4, [[5]]: 6}// new Map([1,2], [&＃39;three&＃39;,4], [[5],6])const mySet &＃61; Set![&＃39;a&＃39;, &＃39;b&＃39;, &＃39;c&＃39;];// new Set([&＃39;a&＃39;, &＃39;b&＃39;, &＃39;c&＃39;])

7. FAQ&＃xff1a;未来的Javascript

7.1 Javascript 会不会支持静态类型&＃xff1f;

不会很快&＃xff01;当前开发时的静态类型&＃xff08;通过 TypeScript 或 Flow&＃xff09;和运行时的纯 Javascript 之间的分离效果很好。所以没有什么合理的理由改变它。

7.2 为什么我们不能通过删除怪异和过时的功能来清理 Javascript&＃xff1f;

Web 的一个关键要求是&＃xff1a;永远不要破坏向后兼容性&＃xff1a;

缺点是语言会有许多遗留功能。
但好处大于缺点&＃xff1a;大型代码库仍然是同质的&＃xff0c;迁移到新版本很简单&＃xff0c;引擎仍然较小&＃xff08;不需要支持多个版本&＃xff09;等等

通过引入当前功能的更好版本&＃xff0c;仍然可以修复一些错误。

有关此主题的更多信息&＃xff0c;请参阅“针对不耐烦的程序员的 Javascript ”。

8. 关于语言设计的思考

作为一名语言设计师&＃xff0c;无论你做什么&＃xff0c;都会使一些人开心&＃xff0c;而另一些人会伤心。因此&＃xff0c;设计未来 Javascript 功能的主要挑战不是让每个人都满意&＃xff0c;而是让语言尽可能保持一致。

但是对于“一致”的含义&＃xff0c;也存在分歧。因此&＃xff0c;我们可以做到的最好的事情就是建立一致的“风格”&＃xff0c;由一小群人&＃xff08;最多三人&＃xff09;构思和执行。不过这并不排除他们接受许多其他人的建议和帮助&＃xff0c;但他们应该设定一个基调。

引用 Fred Brooks):

稍微回顾一下&＃xff0c;尽管许多优秀实用的软件系统都是由委员会设计的&＃xff0c;并且是作为一些项目的一部分而构建的&＃xff0c;但是从本质上说&＃xff0c;那些拥有大量激情粉丝的软件就是一个或几个设计思想的产品&＃xff0c;——致伟大的设计师。

这些核心设计师的一个重要职责是对功能说“不”&＃xff0c;以防止 Javascript 变得太大。

他们还需要一个强大的支持系统&＃xff0c;因为语言设计者往往会遭到严重的滥用&＃xff08;因为人们关心并且不喜欢听到“不”&＃xff09;。最近的一个例子是 Guido van Rossum 辞去了首席 Python 语言设计师的工作&＃xff0c;因为他受到了虐待。

8.1 其他想法

这些想法可能也有助于设计和见证 Javascript&＃xff1a;

创建描述 Javascript 未来前景的路线图。这样的路线图可以用讲故事的方式并将许多单独的部分连接成一个连贯的整体。我所知的最后一个这样的路线图是 Brendan Eich 的“和谐的梦想”。
记录设计理念。现在&＃xff0c;ECMAScript 规范只记录了怎样做&＃xff0c;而没有 为什么 。举个例子&＃xff1a;可枚举性的目的是什么&＃xff1f;
规范的解释者。半正式的规范部分几乎已经可执行。如果能够像编程语言一样对待和运行它们会很棒。 &＃xff08;你可能需要一个约定来区分规范代码和非规范辅助函数。&＃xff09;

鸣谢&＃xff1a;感谢Daniel Ehrenberg对本博文的反馈&＃xff01;

本文首发微信公众号&＃xff1a;jingchengyideng

欢迎扫描二维码关注公众号&＃xff0c;每天都给你推送新鲜的前端技术文章

欢迎继续阅读本专栏其它高赞文章&＃xff1a;

12个令人惊叹的CSS实验项目
世界顶级公司的前端面试都问些什么
CSS Flexbox 可视化手册
过节很无聊&＃xff1f;还是用 Javascript 写一个脑力小游戏吧&＃xff01;
从设计者的角度看 React
CSS粘性定位是怎样工作的
一步步教你用HTML5 SVG实现动画效果
程序员30岁前月薪达不到30K&＃xff0c;该何去何从
第三方CSS安全吗&＃xff1f;
谈谈super(props) 的重要性