關注JavaScript的將來功能

譯者：道奇
做者：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 !