ES6 變數的解構賦值學習筆記

2022-04-07 10:02:01 字數 1319 閱讀 1748

陣列的解析賦值

本質為：「模式匹配」。

如果解構不成功，變數的值就等於undefined

var [foo] = ;


var [bar, foo] = [1];


// foo的值為undefined


let [x,y,....z] = ['a'];


x //"a"


y //undefined


z //


let  [a, [b], d] = [1, [2,3], 4];
上面的例子為不完全解構，但是可以成功。如果等號的右邊不是陣列（或者嚴格的說，不是可遍歷的結構），那麼就會報錯。

物件的解構賦值

解構不僅僅用於陣列，還可以用於物件，

var  = ;


foo //"aaa"


bar //"bbb"
物件的解構與陣列有乙個重要的不同。陣列的元素是按照次序排列的，變數的取值由他的位置決定；而物件的屬性沒有次序，變數必須與屬性同名，才能取到正確的值。也就是說，物件的解構賦值的內部機制是先找到同名的屬性，然後再賦值給對應的變數。真正被賦值的後者，而不是前者。

var  = ;


baz // aaa


foo //error:foo is not undefined
這段**說明，真正被賦值的是變數baz，而不是模式foo

字串的解構賦值

這是因為，此時字串被轉換成了乙個類似陣列的物件。

const [a,b,c,d,e] = 'hello';


a // "h"


b //"e"


..
類似陣列物件都有length屬性，因此還可以對這個屬性解構賦值。

let  = 'hello';


len //5
數值和布林值的解構賦值

解構賦值時，如果等號右邊是數值或是布林值，就先轉為物件。解構賦值的原則是：只要的等號右邊不是物件，就先將它轉為物件。由於undefined和null無法轉為物件，所以對他們進行解構賦值都會報錯。

函式引數的解構賦值

function add([x ,y])


add([1,2]); //3
上面的**中，函式add的引數實際上不是乙個陣列，而是通過解構獲得的變數x，y。

undefined會觸發函式引數的預設值

[1,undefined,3].map((x = 'yes') => x)


// [1,'yes',3]
用途

ES6學習筆記 變數的解構賦值

let foo,bar baz 1,2 3 foo 1 bar 2 baz 3本質上，這種寫法屬於 模式匹配 只要等號兩邊的模式相同，左邊的變數就會被賦予對應的值 let x,y,z a x a y undefined z var foo foo undefined var bar,foo 1 ba...

es6變數解構賦值

es6允許按照一定模式，從陣列和物件中提取值，對變數進行賦值，這被稱為解構。解構賦值在實際開發中可以大量減少我們的 量，並且讓我們的程式結構更清晰。陣列的解構賦值 let a,b 1 2 console.log a 1 console.log b 2 上面的 表示，可以從陣列中提取值，按照位置的物件...

ES6變數解構賦值

es6 允許按照一定模式，從陣列和物件中提取值，對變數進行賦值，這被稱為解構 es6之前我們申明多個變數需要按照下面的方法 let l a 1 let b 2 let c 3 let d 4 或者 let a 1,b 2,c 3,d 4 現在我們可以更加簡便 let a,b,c,d 1,2,3,4 ...