译者:道奇
做者:Christopher Kade
原文:The future of Javascript - features to keep an eye onjavascript
不少咱们认为理所固然的功能,map,filter,reduce,const/let,扩展运算符...每一个都对咱们的代码产生了很大的影响,引用它们可让咱们写更加干净和更高性能的代码。java
如今简短的描述一下谁会决定JavaScript的将来,而后介绍一些在不久的未来就会有的功能。git
若是你只对具体的功能感兴趣,能够点击这里直接跳过这一节。github
在1959年,计算机的使用愈来愈广泛,这使得出现不少新的厂家。有些事情很清楚:他们须要找到一种方法来标准化技术操做,好比(但不只是)编程。编程
因而,在1960年4月27号,欧洲计算机制造商协会(ECMA)在布鲁塞尔诞生,旨在规范这一混乱局面。api
注意:1994年,ECMA成为ecma国际组织,他们去掉了首字母缩写词,用后一个词来显示他们的国际规模。数组
ECMA每一年都会选举一个新的董事长,一般是计算机科学领域的主要人物:IBM, HP, 西门子,飞利浦等等,IBM的Jochen Friedrick目前担任2018年-2019年期间的董事长。promise
这是ecma的架构:浏览器
秘书处的职责是组织和建立处理计算机科学的特定领域的技术委员会(TCs)和技术小组(TGs)。
每一个TC管理着像编程语言,产品安全固然还有ECMAScript等事物的发展和将来。安全
因此TC39管理着咱们所喜欢(有时候是讨厌)的语言的发展,他们所作的几乎全部的事都是开源的,因此查看新的提议和它们随着时间演化的过程常常是很酷的一件事。
ECMAScript功能会经历5个阶段:
你能够在这里获取更多的信息并深刻关于这些阶段的更多细节。
让咱们看一下具体的第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
复制代码
你知道有时候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 !