ES6 中的模式匹配和默認參數

Loong_T 發布于2019-08-21 15:02 / 1876人閱讀

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

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

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

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

直接賦值

let a = 1;

對象模式

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

數組模式

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

模式匹配的過程

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

x = value

對象模式

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

{?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

數組模式

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

[?elements?] ← non_iterable

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

- [?elements?] ← iterable

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

模式匹配中需要注意的 undefined 觸發默認值

如下所示：

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

右側的 underfined 元素會觸發左側的默認值。

在需要的時候才會去計算默認值

比如：

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

只有在右側 someValue.prop 為 undefined 的時候才會執行 someFunc() 函數。

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

比如：

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

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

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

函數參數傳遞

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

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

// 大致是：

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

函數默認參數，慎用對象引用

有如下示例代碼：

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

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

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

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

默認參數的作用域

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

({
    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: ()})

實際上，將上述代碼用 babel 轉換一下，可以發現默認參數的處理過程發生在函數開始部分。

GPU云服務器云服務器 es6中的class es6中的promise 匹配模式模式匹配

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/88077.html

ES6指北【6】——詳談解構賦值【附贈練習題】

摘要：指北詳談解構賦值附贈練習題一何謂解構賦值基本概念首先我們看一下給的定義解構賦值語法是一個表達式，這使得可以將值從數組或屬性從對象提取到不同的變量中從定義中，我們可以發現解構賦值的作用是對變量進行賦值主要通過兩個方面實現這個作用數組將數組中的 ES6指北【6】——詳談解構賦值【附贈練習題】一、何謂解構賦值？ 1. 基本概念首先我們看一下MDN給的定義解構賦值語法是一個 Javasc...

sorra 2019-08-23 11:33 評論0 收藏0
JavaScript正則表達式RegExp

摘要：的正則表達式體系是參照建立的。字面量形式構造函數形式以上都是創建了一個內容為的正則表達式，其表示對一個手機號碼的校驗。按照給定的正則表達式進行替換，返回替換后的字符串。正則表達式，也稱規則表達式，經常使用其來完成對字符串的校驗和過濾。由于正則表達式的靈活性、邏輯性和功能性都非常強大，而且可以利用很簡單的方式完成對復雜字符串的控制，所以很多程序語言都支持正則表達式。在JavaScri...

SexySix 2019-08-20 15:20 評論0 收藏0
ES6-變量的解構賦值(3)

摘要：數組的解構賦值特點根據數據的下標來賦值的，有次序。模式能夠匹配起來，如長度為數值和布爾值的解構賦值解構賦值的規則是只要等號右邊的值不是對象或數組，就先將其轉為對象。布爾值解構賦值為字符串的一種。在很多獨立細小的方面，解構賦值都非常有用。 1、解構賦值簡介官方解釋：按照一定的模式，從數組和對象中提取值，對變量進行賦值，這被稱為解構（Destructuring）。舉個例子，想獲取數組中...

Jason_Geng 2019-08-23 16:46 評論0 收藏0
ES6學習筆記

摘要：學習筆記在學習的過程中做的一些記錄，用于未來的快速回憶。數組成員為時，默認值仍會生效因為在內部使用嚴格相等運算符，判斷一個位置是否有值，所以當一個數組成員嚴格等于默認值才會生效。 ES6學習筆記在學習ES6的過程中做的一些記錄，用于未來的快速回憶。 let&const 作用域的概念 ES6新增塊級作用域的概念（一個大括號括起來的部分就是一個塊作用域） let與const用于在塊級作...

mengbo 2019-08-23 13:47 評論0 收藏0
深入理解ES6筆記（二）字符串和正則表達

摘要：主要知識點新增的字符串處理方法模板字面量以及正則表達式上的改動深入理解筆記目錄字符串字符串是大原始數據類型。如果在字符串的結束部分檢測到指定文本，返回，否則返回。字符串內插入反撇號的方式。主要知識點：新增的字符串處理方法、模板字面量以及正則表達式上的改動showImg(https://segmentfault.com/img/bVbfWak?w=861&h=622); 《深入理解E...

TANKING 2019-08-26 12:11 評論0 收藏0