译者：道奇
作者：Christopher Kade
原文：The future of Javascript - features to keep an eye on

很多我们认为理所当然的功能，map，filter，reduce，const/let，扩展运算符...每个都对我们的代码产生了很大的影响，引用它们可以让我们写更加干净和更高性能的代码。

现在简短的描述一下谁会决定JavaScript的未来，然后介绍一些在不久的将来就会有的功能。

如果你只对具体的功能感兴趣，可以点击这里直接跳过这一节。

ECMA? TC39?

在1959年，计算机的使用越来越普遍，这使得出现很多新的厂家。有些事情很清楚：他们需要找到一种方法来标准化技术操作，比如(但不仅是)编程。

于是，在1960年4月27号，欧洲计算机制造商协会(ECMA)在布鲁塞尔诞生，旨在规范这一混乱局面。

注意：1994年，ECMA成为ecma国际组织，他们去掉了首字母缩写词，用后一个词来显示他们的国际规模。

ECMA每年都会选举一个新的董事长，通常是计算机科学领域的主要人物：IBM， HP，西门子，飞利浦等等，IBM的Jochen Friedrick目前担任2018年-2019年期间的董事长。

这是ecma的架构：

联合国大会(general assembly)包括ecma的普通成员，并且是其最高的权限机构，它控制着管理部门(management)，秘书处(secretariat)和执行委员会(executive committee)，它由一些科技巨头组成，包括苹果(Apple)、AirBnb、Facebook、Netflix和谷歌。人员清单

秘书处的职责是组织和创建处理计算机科学的特定领域的技术委员会(TCs)和技术小组(TGs)。
每个TC管理着像编程语言，产品安全当然还有ECMAScript等事物的发展和未来。

现在你对事情怎么处理已经有了一个总体的了解，但是什么是新JavaScript功能的生命周期呢？

TC39提议

所以TC39管理着我们所喜欢（有时候是讨厌）的语言的发展，他们所做的几乎所有的事都是开源的，所以查看新的提议和它们随着时间演化的过程经常是很酷的一件事。

ECMAScript功能的阶段

ECMAScript功能会经历5个阶段：

阶段0 - 展示阶段(Strawperson)：允许初步写到规范中；
阶段1 - 征求意见阶段(Proposal)：允许提出增加的理由，描述解决方案的形式并且识别出潜在的挑战；
阶段2 - 草案阶段(Draft)：允许使用正式的语言精确描述语法和语义；
阶段3 - 候选人阶段(Candidate)：表示更进一步的优化，需要有实现和用户的反馈，基本上需要完整描述所有的语义、语法和api；
阶段4 - 定案阶段(Finished)：表示添加的内容已经准备好包含在正式的ECMAScript标准中。

你可以在这里获取更多的信息并深入关于这些阶段的更多细节。

第4阶段功能

让我们看一下具体的第4阶段的功能，意味着已经完成的功能并且将会被包含在ECMAScript最近的实际标准版本中，我还会介绍当前浏览器支持情况。

Object.fromEntries

//允许将键值对列表转换成对象
const entries = new Map([
    ['foo', 'bar'],
    ['baz', 42]
]);

const obj = Object.fromEntries(entries);

console.log(obj);
//输出: 对象 { foo:"bar", baz:42}

Array.flatMap

// 等价于'flat'后接着'map'
let arr1 = [1, 2, 3, 4];

arr1.map(x => [x * 2]);
//[[2], [4], [6], [8]]

arr1.flatMap(x => [x * 2]);
//[2, 4, 6, 8]

MDN文档提到它的效率更高一点。

BigInt

// 提供一种表达大于2^53 - 1的数字的表达方式
const theBiggestInt = 9007199254740991n;

const alsoHuge = BigInt(9007199254740991);
// 9007199254740991n

const hugeString = BigInt("9007199254740991");
// 9007199254740991n

const hugeHex = BigInt("0x1fffffffffffff");
// 9007199254740991n

const hugeBin = BigInt("0b111111111111111111111111111111111");
// 9007199254740991n

globalThis

// 包含全局变量this的值，它类似于全局对象。
// 对所有环境都允许使用同样的对象（Node, 浏览器等）
function canMakeHTTPRequest(){
    return typeof globalThis.XMLHttpRequest === 'function';
}

console.log(canMakeHTTPRequest());
// 输出（在浏览器中）：true

String.trimStart 和 String.trimEnd

// 从字符的开始或末尾移除掉空格

let greeting = '"   Hello world!   "';

console.log(greeting);
// 输出："   Hello world!   ";

console.log(greeting.trimStart());
// 输出："Hello world!   "

Promise.allSettled

// 在给定的promises resolve或reject之后，返回promise的resolve
// 对于对象数组，每个都描述了promise的输出
const promise1 = Promise.resolve(3);
const promise2 = new Promise((resolve, reject) => setTimeout(reject, 100, 'foo'));
const promises = [promise1, promise2];

Promise.allSettled(promises).
then((result) => results.forEach((result) => console.log(result)));
// 输出：
// "fulfilled"
// "rejected"

第三阶段功能

第三阶段功能在近期是不会发布的，但是有一些很酷的功能值得提一下。

不过我不会提到他们对浏览器的支持，因为这无关紧要。

可选链

这个可能是我最喜爱的，再见user和user.name

// 允许读连接对象链上位置很深的属性的值，而不用明确的校验链上的引用是否有效。
const adventurer = {
    name: 'Alice',
    cat: {
        name: 'Dinah'
    }
};

const dogName = adventurer.dog?.name;
console.log(dogName);
//输出: undefined

console.log(adventurer.somNonExistenMethod?.())
// 输出：undefined

0值的合并

你知道有时候JavaScript可以多奇怪吗？当你需要用等于0的值进行一些校验时，但忘记了它被认为是假值时时。

// 允许对空值进行相等检查的运算符;

const room = { price: 0 };

//这里我需要0，不是10
const price = room.price || 10;
const realPrice = room.price ?? 10;

console.log(price); //10
console.log(realPrice); //0

你学了什么新东西吗?你最感兴趣的是什么?我很乐意在这里分享你的想法，或者在推特上@christo_kade !

关注JavaScript的未来功能