[ECMAScript] ES 2017 新特性匯總

1. Object.values / Object.entries

const a = {x:1,y:2};

// ES5 2009
Object.keys(a);    // ["x", "y"]

// ES 2017    
Object.values(a);    // [1, 2]
Object.entries(a);    // ["x", 1], ["y", 2]]

Github: proposal-object-values-entries
TC39: proposal-object-values-entries
MDN: Object.values
MDN: Object.entries

2. String padding

'abc'.padStart(10);         // "       abc"
'abc'.padStart(10, "foo");  // "foofoofabc"
'abc'.padStart(6,"123465"); // "123abc"
'abc'.padStart(8, "0");     // "00000abc"
'abc'.padStart(1);          // "abc"

'abc'.padEnd(10);          // "abc       "
'abc'.padEnd(10, "foo");   // "abcfoofoof"
'abc'.padEnd(6, "123456"); // "abc123"
'abc'.padEnd(1);           // "abc"

Github: proposal-string-pad-start-end
TC39: proposal-string-pad-start-end
MDN: padStart
MDN: padEnd

3. Object.getOwnPropertyDescriptors

var o, d;

o = { get foo() { return 17; } };
d = Object.getOwnPropertyDescriptor(o, 'foo');
/*
    {
        configurable: true,
        enumerable: true,
        get: function get foo(),
        set: undefined
    }
*/

o = { bar: 42 };
d = Object.getOwnPropertyDescriptor(o, 'bar');
/*
    {
        configurable: true,
        enumerable: true,
        value: 42,
        writable: true
    }
*/

o = {};
Object.defineProperty(o, 'baz', {
    value: 8675309,
    writable: false,
    enumerable: false
});
d = Object.getOwnPropertyDescriptor(o, 'baz');
/*
    {
        configurable: false,
        enumerable: false,
        value: 8675309,
        writable: false
    }
*/

Github: proposal-object-getownpropertydescriptors
TC39: proposal-object-getownpropertydescriptors
MDN: Object.getOwnPropertyDescriptor

4. Trailing commas in function parameter lists and calls

function clownPuppiesEverywhere(
    param1,
    param2,    // 這里可以用逗號結尾
) { /* ... */ }

clownPuppiesEverywhere(
    'foo',
    'bar',    // 這里可以用逗號結尾
);

Github: proposal-trailing-function-commas

5. Async functions

async function f1() {
    const v1 = await f2();
    return v1;
}

async function f2() {
    return 1;
}

f1().then(v => console.log(v));

(1)async function的返回值是一個promise,async function的返回值就是promise resolved的值,async function如果拋異常,則異常值就是promise rejected的值。
(2)await接受一個promise作為參數(shù),如果await后面的值不是promise,會轉(zhuǎn)換一個resolved的promise。
(3)arrow function也支持async,稱為async arrow function,例如,

const f = async () => { ... };

注:
generator arrow function =>*,目前只是Stage 1

Github: ecmascript-asyncawait
TC39: ecmascript-asyncawait
MDN: async function
MDN: await
ECMAScript 2017: 14.7 Async Arrow Function Definitions

6. Shared memory and atomics

// index.js

const worker = new Worker('./worker.js');

const buffer = new SharedArrayBuffer(Int32Array.BYTES_PER_ELEMENT * 10);
var ia = new Int32Array(buffer);

worker.postMessage(ia);

setTimeout(() => {
    Atomics.store(ia, 0, 100);
    Atomics.wake(ia, 0, 1);
}, 1*1000);
// worker.js

let ia;
onmessage = ({ data }) => {
    ia = data;
    console.log(data);    // Int32Array(10) [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]

    Atomics.wait(ia, 0, 0);
    
    // 1s 后
    console.log(ia);    // Int32Array(10) [100, 0, 0, 0, 0, 0, 0, 0, 0, 0]
};

Github: ecmascript_sharedmem
MDN: SharedArrayBuffer
MDN: Atomics

7. Lifting template literal restriction

Template literals遵從字符串的轉(zhuǎn)義規(guī)則:
(1)以\u開頭,后跟4個16進制數(shù)字,例如,\u00B1表示±
(2)以\u開頭,使用大括號括起來的16進制數(shù)字,例如,\u{2F804}表示
(3)以\x開頭,后跟2個16進制數(shù)字,例如,\xB1表示±
(4)以\開頭,后跟10進制數(shù)字,用來表示八進制字面量(注:strict mode下不支持)

解釋器遇到\u\x,如果發(fā)現(xiàn)后面的字符不滿足以上條件,就會報語法錯。例如,

> latex`\unicode`
> Uncaught SyntaxError: Invalid Unicode escape sequence

Lifting template literal restriction改善了這個問題,
(1)去除\u或者\x的限制,只適用于Tagged template literals,而對于untagged template literals無效,仍然會報語法錯。
(2)為了兼容性,該提案只是將轉(zhuǎn)義后的字符串數(shù)組strs,置為單元素數(shù)組[undefined],tag函數(shù)需要手動處理strs.raw進行處理。

const foo = (strs, ...exprs) => {
    console.log(strs);        // [undefined]
    console.log(strs.raw);    // ["something else \unicode"]
};

foo`something else \unicode`;

Github: proposal-template-literal-revision
TC39: proposal-template-literal-revision
MDN: Tagged template literals


參考

Github: finished-proposals

最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內(nèi)容