ES6 中的模式匹配和默認(rèn)參數(shù)

Loong_T 發(fā)布于2019-08-21 15:02 / 1864人閱讀

摘要：中，引入了其他很多語言都具備的模式匹配和默認(rèn)參數(shù)語法糖，使得代碼簡潔了不少。模式匹配中需要注意的觸發(fā)默認(rèn)值如下所示右側(cè)的元素會觸發(fā)左側(cè)的默認(rèn)值。

ES6 中，引入了其他很多語言都具備的模式匹配和默認(rèn)參數(shù)語法糖，使得代碼簡潔了不少。但是使用的時候還是有些細(xì)節(jié)需要注意。

模式匹配原理 模式匹配的種類

具體來說，有三種類型的模式匹配：

直接賦值

let a = 1;

對象模式

let {name, age: age} = {name: "yibuyisheng", age: 25};

數(shù)組模式

let [a, b] = [1, 2];

模式匹配的過程

直接賦值：x ← value（包括 undefined 和 null）

x = value

對象模式

該種模式下，會檢查匹配源是不是對象，如果不是對象，則會使用內(nèi)部的 ToObject() 進(jìn)行轉(zhuǎn)換。

{?properties?} ← undefined

throw new TypeError();

- {?properties?} ← null

throw new TypeError();

- {key: ?pattern?, ?properties?} ← obj

?pattern? ← obj.key
{?properties?} ← obj

- {key: ?pattern? = default_value, ?properties?} ← obj

let tmp = obj.key;
if (tmp !== undefined) {
  ?pattern? ← tmp
} else {
  ?pattern? ← default_value
}
{?properties?} ← obj

- {} ← obj

// No properties left, nothing to do

數(shù)組模式

該種模式下，右側(cè)必須是可迭代的，如果不可迭代，就會拋出錯誤。

[?elements?] ← non_iterable

assert(!isIterable(non_iterable))
throw new TypeError();

- [?elements?] ← iterable

assert(isIterable(iterable))
let iterator = iterable[Symbol.iterator]();
?elements? ← iterator

模式匹配中需要注意的 undefined 觸發(fā)默認(rèn)值

如下所示：

let [x = 1] = [undefined]; // x = 1

右側(cè)的 underfined 元素會觸發(fā)左側(cè)的默認(rèn)值。

在需要的時候才會去計算默認(rèn)值

比如：

let {prop: y = someFunc()} = someValue;

只有在右側(cè) someValue.prop 為 undefined 的時候才會執(zhí)行 someFunc() 函數(shù)。

模式匹配中可以引用模式中前面的變量

比如：

let [x = 3, y = x] = [7, 2]; // x=7; y=2

這個地方要注意順序，比如下面這個就是錯誤的：

let [x = y, y = 3] = [7, 2]; // ReferenceError

函數(shù)參數(shù)傳遞

函數(shù)傳參的過程，實(shí)際上就包含了模式匹配的過程：

function func(?FORMAL_PARAMETERS?) {
    ?CODE?
}
func(?ACTUAL_PARAMETERS?);

// 大致是：

{
    let [?FORMAL_PARAMETERS?] = [?ACTUAL_PARAMETERS?];
    {
        ?CODE?
    }
}

函數(shù)默認(rèn)參數(shù)，慎用對象引用

有如下示例代碼：

let list = [];
function fn(a = list) {
    console.log(a);
}

fn(); // console.log: []
list.push(1);
fn(); // console.log: [1]

默認(rèn)參數(shù)使用了 list 引用，那么后續(xù)對 list 的修改，都會體現(xiàn)到默認(rèn)參數(shù)上面去。在大型項(xiàng)目開發(fā)中，容易失控。如果一定要用某個變量生成默認(rèn)值，建議深拷貝一份：

let list = [];
const listDefaultParam = deepClone(list); // 其它地方不要再使用這個變量了，并且在函數(shù)內(nèi)部也不要修改這個變量值
function fn(a = listDefaultParam) {
    console.log(a);
}

默認(rèn)參數(shù)的作用域

使用最新版的 Chrome 瀏覽器執(zhí)行下面的代碼，注意輸出結(jié)果：

({
    method() {
        function innerFn(a = () => console.log(this)) {
            a();
        }
        innerFn.call(this);
    }
}).method();

({
    method() {
        function innerFn(a = () => console.log(this)) {
            a();
        }
        innerFn();
    }
}).method();

({
    method() {
        let arrowFn = () => console.log(this);
        function innerFn(a = arrowFn) {
            a();
        }
        innerFn();
    }
}).method();

({
    method() {
        let arrowFn = () => console.log(this);
        function innerFn(a = arrowFn) {
            a();
        }
        innerFn.call(this);
    }
}).method();

// output:
//
// Object({method: ()})
// Window { ... }
// Object({method: ()})
// Object({method: ()})

實(shí)際上，將上述代碼用 babel 轉(zhuǎn)換一下，可以發(fā)現(xiàn)默認(rèn)參數(shù)的處理過程發(fā)生在函數(shù)開始部分。