關於ES6 的物件解構賦值

2022-07-25 12:24:10 字數 1614 閱讀 4637

之

前寫了關於es6陣列的解構

現在 go on ;

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

物件的解構和陣列有乙個重要的不同。陣列的元素是按次序排列的，變數的取值是由他的位置決定的；而物件的屬性沒有次序，變數必須與屬性同名，才能取到正確的值；

等號與右邊兩個同名屬性的次序不一致，但是對取值沒有任何的影響

這個例子顯示變數沒有對應的同名屬性，導致取不到值，最後等於undefined;

如果變數名與屬性名不一致，必須寫成下面這樣。

也就是說，物件的解構賦值是下面形式的簡寫；

let = ;
也就是說，物件的解構賦值的內部機制，是先找到同名屬性，然後再賦值給對應的變數。真正唄賦值的是後者，而不是前者；

let = 


baz; 


//aaa


foo 


//undefined
上面的**中。foo是匹配的模式，baz才是變數。真正被賦值給變數的baz，而不是模式foo.

其實說白了，就是位置的問題；

let =  


//上面的**就等於


let = 


let = ;


//這個時候，foo只是乙個模式。而abc才是變數，所以主要才是賦值給abc,而不是模式foo
總而言之，就是一輛車foo 當裡面沒有乘客時，整個車都是叫foo的人，當出現乘客abc時，這個時候變數就是abc，而賦值也不再賦值給foo，賦值給了abc;

與陣列一樣，解構也可以用於巢狀解構的物件。\

注意下，這裡的p是模式，不是變數，因此不會被賦值

要想p被賦值，按照下面的模式就可以賦值

let km =   


] 


};let ]} = km;
歸根結底，就是一句話，哪個位置對應哪個變數，如果，該位置只有單個變數，則就是那個；

當然還有許多奇怪的問題；

ES6 解構賦值

陣列的解構賦值 let a,b 12,13 let a,b,c d 13,15,16 let a,b c 78,12 23 let x,y 1,3,5 x 1,y 3 let x,y,z a x a,y undefined z let h,b 1,2,3,4 1,2,3,4 預設值 let x tr...

ES6解構賦值

一 基本用法 解構 destructuring 按照一定的模式，從陣列或者物件中提取值，對變數進行賦值。let par1,par2,par3 1,2 console.log par1,par2,par3 1 2 不完全解構時par3對值為undefined 解構賦值允許指定變數對預設值。let pa...

es6解構賦值

coding changes the world accumulating makes yourself 主要從三個方面講述 陣列式的解構賦值 物件式的解構賦值 函式中的解構賦值 preface 現今的變數宣告語法十分的直接 左邊是乙個變數名，右邊可以是乙個陣列 的表示式或乙個物件 的表示式，等等。...