深入理解ES6 解構

2021-08-17 21:04:32 字數 2643 閱讀 7863

解構時一種打破資料結構，將其拆分為更小部分的過程。解構在實際開發中經常會應用到物件和陣列中。關於解構的基本用法，請參考：es6–變數的宣告及解構賦值

const node = ;


let  = node;


// 對已經宣告的變數賦值


const node = ;


let a, b;


( = node)


const obj = };


let } = obj;


console.log(a)  // a is not defined


console.log(b)  // 1


const node = ;


let  = node;


// 可以使用預設值


let  = node;
注意：如果值為null，不會執行預設值，只有為undefined才會走預設值。

const node = ;


let  = node;


console.log(c, d); // null 4


const node = ;


let  = node;


console.log(a, b); // 1 2
所有冒號前的識別符號都代表在物件中的檢索位置，其右側為被賦值的變數名。

示例：將乙個物件的部分屬性賦值給另外乙個物件

let obj1 = 


let obj2 = 


( = obj1) // invalid destructuring assignment target


let obj = 


let  = obj


console.log(a, obj2) // 1
特別說明：es6中展開運算子只針對iterable才起作用，預設有陣列、set、map和字串。並不包含物件！es6規範中也並未將展開運算子支援物件，但是目前的主流瀏覽器chrome和firefox均已實現該特性。這意味著如果想在低版本瀏覽器中使用需要特別的babel外掛程式進行轉換！object-rest-spread

通過在陣列中的位置進行選取，且可以將其儲存在任意變數中，未「顯式宣告」的元素都會被直接被忽略。

let colors = ['red', 'blue', 'green'];


let [, , thirdcolor] = colors;


console.log(thirdcolor)


// 對已宣告的變數進行賦值


let colors = ['red', 'blue', 'green'];


let thirdcolor;


[, , thirdcolor] = colors;
注意：不需要小括號包裹表示式，這一點與物件解構的約定不同

let colors = ['red', 'blue', 'green'];


let [firstcolor, ...othercolor] = colors;


console.log(othercolor) // ["blue", "green"]
...語法將陣列中的其餘元素賦值給乙個待定的變數。

示例：轉殖陣列

let colors = ['red', 'blue', 'green'];


// es5方式


colors.concat()


// es6方式


[...colors]
注意：在被解構的陣列中，不定元素必須為最後乙個條目！

function


test


(a, ) 


test(1, )   // 1 2 3


test(4) // uncaught typeerror: cannot destructure property `b` of 'undefined' or 'null'.
注意：解構引數，呼叫函式不提供被解構的引數會導致程式丟擲錯誤。let = undefined;處理方式，讓上述引數可選！

function


test


(a,  = {}) 


test(1, )   // 1 2 3


test(4) // 4 undefined undefined

深入理解ES6之《解構》

如果使用var let const解析宣告變數，則必須提供初始化程式 也就是等號右側的值 以下語句有語法錯誤 var let const解構賦值表示式 也就是右側的表示式 如果為null或undefined會導致程式丟擲錯誤，因為任何嘗試讀取null或undefined的屬性的行為都會觸發執行時錯誤...

深入理解es6的promise

一 promise入門 1.promise物件是什麼 函式的另一種原生實現，比之前 函式的寫法機構清晰，功能強大，2.以前 這麼寫 function a fn else 1000 呼叫a function m 3.用promise 寫 function a else 1000 呼叫a then fu...

es6解構賦值理解

最優 結構賦值的規則是，只要等號右邊的值不是物件或者陣列，就先將其轉為物件，再匹配更詳細規則。由於undefined和null無法轉換為物件，所以進行匹配就回報錯。注意事項 變數宣告 函式引數 賦值語句模式等不要帶圓括號，es6識別不出來是要做結構還是做表示式。1 陣列 左右都是陣列 可遍歷 1.1...