ES6 解構賦值

es6 允許按照一定模式，從陣列和物件中提取值，對變數進行賦值，這被稱為解構（destructuring）。

例如：let [a, b, c] = [1, 2, 3];

完全解構，本質上，這種寫法屬於「模式匹配」，只要等號兩邊的模式相同，左邊的變數就會被賦予對應的值，屬性名和屬性值一一對應。

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

另一種情況是不完全解構，即等號左邊的模式，只匹配一部分的等號右邊的陣列。

1）完全解構，左邊的變數和右邊的變數一一匹配

let [a,b,c] =['tom',20,true]
console.log(a,b,c)//tom 20 true

2）不完全解構，等號左邊的模式，只匹配一部分的等號右邊的陣列，但是解構依然可以成功.當等號左邊變數只宣告，沒有被初始化時，也就是多出來的變數解構變數為undefined。

let [a,b,c] = ['tom',20,true,11,]
console.log(a,b,c)//tom 20 true 
let [a, [b], d] = [1, [2, 3], 4];
console.log(a,b,d)//1 2 4
let [a,b,c,d,e] =[1,2,3]
console.log(a,b,c,d,e)//1 2 3 undefined undefined

3）集合解構 ...解構結果是乙個陣列

let [a,b,[c]] = [1,2,[3,4,5]]
console.log(a,b,c) //1 2 3
let [a,b,[...c]] = [1,2,[3,4,5]]
console.log(c) //[3,4,5]集合解構
let [x, y, ...z] = ['a']
console.log(x,y,z)//"a" undefined

4）預設值只有變數的值匹配為undefined時才生效

let [a,b,c=1,d=7] = [1,2]
console.log(a,b,c,d) //1 2 1 7 
let[a=4,b=5,c=6,d=7,]=[1,2]
console.log(a,b,c,d) //1 2 6 7 預設值只要變數的內容發生改變，那麼預設值會被覆蓋
function test(){}
test({})
console.log(a,b)//1 2
test()
console.log(a,b)//1 2

5)陣列巢狀物件

let [a,] =['hello',]
console.log(user)//tom

陣列的元素是按次序排列的，變數的取值由它的位置決定；而物件的屬性沒有次序，變數必須與屬性同名，才能取到正確的值。當變數名和屬性值相同時，可以進行簡寫。

let  =
console.log(a,b) //10 20 
let  =
console.log(a,b) //20 10  根據屬性名匹配，與次序無關
let  =
console.log(a,b) //10 20  簡寫
let  =
console.log(c,d) // 10 20
let  =
console.log(c,d) //undefined undefined

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

let obj=]}
let ]}=obj 
let ]}=obj 
console.log(a,b) //hello world
console.log(x) //world
let obj=]}
let ]}=obj 
console.log(b)  //undefined

物件的解構也可以指定預設值。預設值生效的條件是，物件的屬性值嚴格等於undefined。如果解構模式是巢狀的物件，而且子物件所在的父屬性不存在，那麼將會報錯。

let  =
console.log(y) //20
let  =
console.log(y) //11
var } = ;
foo //報錯

字串也可以解構賦值。這是因為此時，字串被轉換成了乙個類似陣列的物件。

let [a, b, c, d, e] = 'hello';
console.log(a,b,c) // h e l 
let [a,b,...c] ='hello'
console.log(a,b,c)  //h e ['l','l','o']

解構字串的屬性

let  ='hello'
console.log(len)   // 5
let  ='hello'
console.log(trim===string.prototype.trim) //true  trim是方法 string是屬性false
let =true
console.log(tostring===boolean.prototype.tostring) //true

解構賦值時，如果等號右邊是數值和布林值，則會先轉為物件。因為number，boolean 不具備迭代器

let  = 123
//let  = true
console.log(a,b,c) //以上兩者均輸出undefined undefined undefined
let [a,b,c] = 123
console.log(a,b,c)//報錯 不具備迭代功能

下面**中，數值和布林值的包裝物件都有tostring屬性，因此變數s都能取到值。

let  = 123;
s === number.prototype.tostring // true
let  = true;
s === boolean.prototype.tostring // true

function add([x, y])
add([1, 2]); // 3
[[1, 2], [3, 4]].map(([a, b]) => a + b);
// [ 3, 7 ]

上面**中，函式add的引數表面上是乙個陣列，但在傳入引數的那一刻，陣列引數就被解構成變數x和y。對於函式內部的**來說，它們能感受到的引數就是x和y。

函式引數的解構也可以使用預設值。

function move( = {}) 
move(); // [3, 8]
move(); // [3, 0]
move({}); // [0, 0]
move(); // [0, 0]

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 現今的變數宣告語法十分的直接左邊是乙個變數名，右邊可以是乙個陣列的表示式或乙個物件的表示式，等等。...

ES6 解構賦值

ES6 解構賦值

ES6解構賦值

es6解構賦值

相關推薦