ECMAScript 2018(ES9)新特性簡介

flydean發表於2021-03-31

簡介

ES9是ECMA協會在2018年6月發行的一個版本,因為是ECMAScript的第九個版本,所以也稱為ES9.

今天我們講解一下ES9的新特性。

ES9引入了3大特性和2個小的特性,我們接下來一一講解。

非同步遍歷

在ES6中,引入了同步iteration的概念,隨著ES8中的Async操作符的引用,在ES9中引入了非同步遍歷的新特性Async iteration。

具體的內容可以參考我之前的文章 ES9的新特性:非同步遍歷Async iteration

Rest/Spread操作符和物件構建

Rest和Spread的操作符都是 ... , 只不過使用的場景和目的不一樣。

rest主要用在物件的解構,目前只支援物件的解構和不確定的引數描述。

Spread主要用在字面量物件的構建上。

下面我們分別來介紹:

Rest

如果用在物件的解構中,除了已經手動指定的屬性名之外,rest將會拷貝物件其他的所有可列舉(enumerable)的屬性。

const obj = {foo: 1, bar: 2, baz: 3};
const {foo, ...rest} = obj;
    // Same as:
    // const foo = 1;
    // const rest = {bar: 2, baz: 3};

如果用在引數中,rest表示的是所有剩下的引數:

function func({param1, param2, ...rest}) { // rest operator
    console.log('All parameters: ',
        {param1, param2, ...rest}); // spread operator
    return param1 + param2;
}

注意,在Obj字面量中,rest運算子只能放在obj的最頂層,並且只能使用一次,還要放在最後。

const {...rest, foo} = obj; // SyntaxError
const {foo, ...rest1, ...rest2} = obj; // SyntaxError

當然你還可以巢狀使用rest運算子:

const obj = {
    foo: {
        a: 1,
        b: 2,
        c: 3,
    },
    bar: 4,
    baz: 5,
};
const {foo: {a, ...rest1}, ...rest2} = obj;
// Same as:
// const a = 1;
// const rest1 = {b: 2, c: 3};
// const rest2 = {bar: 4, baz: 5};

Spread

spread主要被用來展開物件,能夠被展開物件的屬性一定要是可列舉的enumerable。

> const obj = {foo: 1, bar: 2};
> {...obj, baz: 3}
{ foo: 1, bar: 2, baz: 3 }

如果物件的屬性key一樣,那麼後面屬性值會覆蓋之前的屬性值:

> const obj = {foo: 1, bar: 2, baz: 3};
> {...obj, foo: true}
{ foo: true, bar: 2, baz: 3 }
> {foo: true, ...obj}
{ foo: 1, bar: 2, baz: 3 }

建立和拷貝物件

使用Object.assign和Spread操作符可以很方便的進行物件的拷貝。

我們看一個最簡單的物件拷貝的例子:

const clone1 = {...obj};
const clone2 = Object.assign({}, obj);

但是這樣的拷貝有個缺點,就是隻能拷貝自有的可列舉的屬性。

並且拷貝之後物件的prototypes是Object.prototype,也就是說沒有繼承被拷貝物件的prototype。

> Object.getPrototypeOf(clone1) === Object.prototype
true
> Object.getPrototypeOf(clone2) === Object.prototype
true
> Object.getPrototypeOf({}) === Object.prototype
true

如果想要同時拷貝物件的prototype,則可以這樣做:

const clone1 = {__proto__: Object.getPrototypeOf(obj), ...obj};
const clone2 = Object.assign(
    Object.create(Object.getPrototypeOf(obj)), obj);

或者指定物件內建的__proto__屬性,或者從obj的prtotype建立一個新的物件。

注意,物件內建的__proto__屬性只在部分瀏覽器中支援。

Object.assign和spread只能拷貝可列舉的屬性,如果是set,get屬性或者想要拷貝屬性的attributes(writable, enumerable),那麼就需要用到我們之前講到的Object.getOwnPropertyDescriptors。

const clone1 = Object.defineProperties({},
    Object.getOwnPropertyDescriptors(obj));

const clone2 = Object.create(
    Object.getPrototypeOf(obj),
    Object.getOwnPropertyDescriptors(obj));
~~

> 注意,我們使用的所有的拷貝都是淺拷貝。如果被拷貝的物件內部又有物件的話,拷貝的只是這個物件的引用

~~~js
const original = { prop: {} };
const clone = Object.assign({}, original);

console.log(original.prop === clone.prop); // true
original.prop.foo = 'abc';
console.log(clone.prop.foo); // abc

Spread和bject.assign() 的區別

assgin在拷貝物件的時候,會呼叫相應屬性的set方法,而spread不會。

舉個例子,我們先給Object.prototype定義一個set方法:

Object.defineProperty(Object.prototype, 'foo', {
    set(value) {
        console.log('SET', value);
    },
});
const obj = {foo: 123};

然後看一下拷貝的區別:

> Object.assign({}, obj)
SET 123
{}

> { ...obj }
{ foo: 123 }

可以看到assign會觸發set方法,而spread不會。

另外,如果物件屬性是不可寫的,那麼assign將會報錯,而spread不會。

我們先定義一個不可寫的物件:

Object.defineProperty(Object.prototype, 'bar', {
    writable: false,
    value: 'abc',
});

看下賦值操作:

> const tmp = {};
> tmp.bar = 123;
TypeError: Cannot assign to read only property 'bar'

> Object.assign({}, obj)
TypeError: Cannot assign to read only property 'bar'

> { ...obj }
{ bar: 123 }

正規表示式

ES9的正規表示式新特性可以參考我的文章 ES9的新特性:正規表示式RegExp

promise.finally

promise除了then和catch方法之外,還引入了新的finally方法。

和java中的finally一樣,promise.finally一定會被執行。

promise
.then(result => {···})
.catch(error => {···})
.finally(() => {···});

和java一樣,我們可以在finally中做一些資源清理的工作:

let connection;
db.open()
.then(conn => {
    connection = conn;
    return connection.select({ name: 'Jane' });
})
.then(result => {
    ...
})
···
.catch(error => {
    // handle errors
})
.finally(() => {
    connection.close();
});

上面的例子中,我們開啟了一個資料庫的連線,在使用完之後,我們在finally中對其進行close操作。

模板文字和帶標籤的模板文字

模板文字和帶標籤的模板文字是在ES6中引入的,在ES9中進行了修正。

我們先看下什麼是模本文字,模板文字(Template literals)就是在反引號中輸入的文字,在其中可以使用${···})來進行變數的解析,並且還支援回車換行。

const firstName = 'Jane';
console.log(`Hello ${firstName}!
How are you
today?`);

// Output:
// Hello Jane!
// How are you
// today?

而帶標籤的模板文字是指在模板文字之前放上一個函式呼叫:

String.raw`\u{4B}`
'\u{4B}'

這裡String.raw被稱為tag function,我們看下raw的定義:

raw(template: TemplateStringsArray, ...substitutions: any[]): string;

上面的程式碼還可以改寫為:

String.raw`\u004B`
'\u004B'

\u{4B}\u004B 都是字元K的unicode表示。

上面的raw其實可以這樣表示:

function tagFunc(tmplObj, substs) {
    return {
        Cooked: tmplObj,
        Raw: tmplObj.raw,
    };
}

我們可以這樣使用:

> tagFunc`\u{4B}`;
{ Cooked: [ 'K' ], Raw: [ '\\u{4B}' ] }

本文作者:flydean程式那些事

本文連結:http://www.flydean.com/ecmascript-9/

本文來源:flydean的部落格

歡迎關注我的公眾號:「程式那些事」最通俗的解讀,最深刻的乾貨,最簡潔的教程,眾多你不知道的小技巧等你來發現!

相關文章