概述
- 解構(gòu)賦值是對賦值運算符的擴展煎娇。
- 他是一種針對數(shù)組或者對象進行模式匹配姥闭，然后對其中的變量進行賦值丹鸿。
- 在代碼書寫上簡潔且易讀，語義更加清晰明了泣栈；也方便了復雜對象中數(shù)據(jù)字段獲取卜高。
解構(gòu)模型
在解構(gòu)中，有下面兩部分參與：
- 解構(gòu)的源南片，解構(gòu)賦值表達式的右邊部分掺涛。
- 解構(gòu)的目標，解構(gòu)賦值表達式的左邊部分疼进。
數(shù)組模型的解構(gòu)（Array）
基本
let [a, b, c] = [1, 2, 3];
// a = 1
// b = 2
// c = 3
可嵌套
let [a, [[b], c]] = [1, [[2], 3]];
// a = 1
// b = 2
// c = 3
可忽略
let [a, , b] = [1, 2, 3];
// a = 1
// b = 3
不完全解構(gòu)
let [a = 1, b] = []; // a = 1, b = undefined
剩余運算符
let [a, ...b] = [1, 2, 3];
//a = 1
//b = [2, 3]
字符串等
在數(shù)組的解構(gòu)中薪缆，解構(gòu)的目標若為可遍歷對象，皆可進行解構(gòu)賦值伞广〖鹈保可遍歷對象即實現(xiàn) Iterator 接口的數(shù)據(jù)。
let [a, b, c, d, e] = 'hello';
// a = 'h'
// b = 'e'
// c = 'l'
// d = 'l'
// e = 'o'
解構(gòu)默認值
let [a = 2] = [undefined]; // a = 2
當解構(gòu)模式有匹配結(jié)果嚼锄，且匹配結(jié)果是 undefined 時减拭，會觸發(fā)默認值作為返回結(jié)果。
let [a = 3, b = a] = []; // a = 3, b = 3
let [a = 3, b = a] = [1]; // a = 1, b = 1
let [a = 3, b = a] = [1, 2]; // a = 1, b = 2
- a 與 b 匹配結(jié)果為 undefined 区丑，觸發(fā)默認值：
a = 3; b = a =3- a 正常解構(gòu)賦值拧粪，匹配結(jié)果：a = 1修陡，b 匹配結(jié)果 undefined ，觸發(fā)默認值：
b = a =1- a 與 b 正常解構(gòu)賦值可霎，匹配結(jié)果：
a = 1魄鸦，b = 2
對象模型的解構(gòu)（Object）
基本
let { foo, bar } = { foo: 'aaa', bar: 'bbb' };
// foo = 'aaa'
// bar = 'bbb'
let { baz : foo } = { baz : 'ddd' };
// foo = 'ddd'
可嵌套可忽略
let obj = {p: ['hello', {y: 'world'}] };
let {p: [x, { y }] } = obj;
// x = 'hello'
// y = 'world'
let obj = {p: ['hello', {y: 'world'}] };
let {p: [x, { }] } = obj;
// x = 'hello'
不完全解構(gòu)
let obj = {p: [{y: 'world'}] };
let {p: [{ y }, x ] } = obj;
// x = undefined
// y = 'world'
剩余運算符
let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};
// a = 10
// b = 20
// rest = {c: 30, d: 40}
解構(gòu)默認值
let {a = 10, b = 5} = {a: 3};
// a = 3; b = 5;
let {a: aa = 10, b: bb = 5} = {a: 3};
// aa = 3; bb = 5;
// (1)普通解構(gòu)賦值
let arr=['1','2']
let [str1,str2]=arr
console.log(str1,str2) // 1,2
// (2)我只需要取其中某一部分的情況
let arr=['1','2','3','4']
let [str1, , str2]=arr // 跳過誰使用逗號隔開
console.log(str1,str2) // 1,3
// (3)字符串解構(gòu)賦值
let zifu='abcde'
let [str1,,str2]=zifu // 同(2)
console.log(str1,str2) // a,c
// (4) 對數(shù)據(jù)為Object進行解構(gòu)賦值
let user={names:'c',surnames:'d'};
[user.names,user.surnames]=['a','b'] // 注意對對象中已有屬性進行賦值時，不能使用關(guān)鍵字進行聲明了
console.log(user) //a,b
//(5) 對循環(huán)進行解構(gòu)賦值
let user={names:'c',surnames:'d'};
for (let[key,val] of Object.entries(user)) { //沒看懂可以看下面注釋在結(jié)合(1)進行看
console.log(`鍵:${key},值:${val}`)
}
/**
* Object.entries() 可以把一個對象的鍵值以數(shù)組的形式遍歷出來癣朗，
* 結(jié)果和 for...in 一致拾因，但不會遍歷原型屬性
*
* const obj = { foo: 'bar', baz: 'abc' };
* console.log(Object.entries(obj)); // [['foo', 'bar'], ['baz', 'abc']]
*/
//(6) 結(jié)合 ...運算語法
let arr=['a','b','c','d','e','f']
let [str1,str2,...strArr]=arr //...strArr 剩余的值將存放strArr中
console.log(str1,str2,strArr) // a,b,["c", "d", "e", "f"]
//(7) 如果數(shù)據(jù)過少 或者沒有, 解構(gòu)出來的是undefined ,可以使用參數(shù)默認值
let arr=[]
let [str1='參數(shù)默認值',str2,...strArr]=arr
console.log(str1,str2,strArr) // '參數(shù)默認值', undefined, []
