关注JavaScript的将来功能

译者:道奇
做者:Christopher Kade
原文:The future of Javascript - features to keep an eye onjavascript

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

如今简短的描述一下谁会决定JavaScript的将来,而后介绍一些在不久的未来就会有的功能。git

若是你只对具体的功能感兴趣,能够点击这里直接跳过这一节。github

ECMA? TC39?

在1959年,计算机的使用愈来愈广泛,这使得出现不少新的厂家。有些事情很清楚:他们须要找到一种方法来标准化技术操做,好比(但不只是)编程。编程

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

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

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

这是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"
复制代码

第三阶段功能

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

不过我不会提到他们对浏览器的支持,由于这可有可无。

可选链

这个多是我最喜好的,再见useruser.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 !

相关文章
相关标签/搜索