1. 解構(gòu)賦值:
ES6 允許按照一定模式懈词,從數(shù)組和對象中提取值,對變量進行賦值结闸,這被稱為解構(gòu)唇兑。
1.1 解構(gòu)賦值:
- 可以從數(shù)組中提取值,按照對應(yīng)位置桦锄,對變量賦值扎附。
- 本質(zhì)上屬于“模式匹配”,只要等號兩邊的模式相同结耀,左邊的變量就會被賦予對應(yīng)的值留夜。
let [a, b, c] = [1, 2, 3];
1.2 常見解構(gòu):
1. 默認解構(gòu)
let [a = 100] = [,1000];
console.log(a);
2. 對象的解構(gòu)
- es6 解構(gòu)對象是 變量名必須和屬性名相同 但是順序沒有要求。
let obj = {
names:'張三',
age : 18,
sex : '女',
data :[1,2,3,4,5],
say : function(){
console.log('你好我是張三');
}
}
// es5 :
// var name = obj.name;
// var age = obj.age;
// 1. 解構(gòu)對象中的變量
let {names,age,say} = obj;
console.log(names,age);
// 2. 解構(gòu)對象中的方法
say();
- 解構(gòu)對象中的數(shù)組
let obj = {
data, // 以變量 取出相對應(yīng)的鍵值的變量名必須和屬性名相同
data : arr, // 以屬性命取出相對應(yīng)的鍵值對的值 并將值保存在 變量arr中
data :[1,2,3,4,5], // 將上一步中的 arr 徹底解構(gòu)
}
let {
data : [a,b,c]
} = obj;
console.log(a);
console.log(b);
console.log(c);
- 以對象形式 解構(gòu)數(shù)組
let arr = [1,2,3,4,5];
let {
[0]:a,
[4]:b,
} = arr;
- 當對象中含有數(shù)組, 數(shù)組中又含有對象 -- json對象图甜。
let obj = {
data: [{
age: 1,
}, {
names: 2
},],
}
let {
data: [{age}, {names}],
} = obj;
console.log(age, names);
- 解構(gòu)字符串時 會將字符串當做一個數(shù)組 來取解構(gòu)
let str = 'helloword';
console.log(str);
let [a,b,c] = str;
let {
[0] : d,
} = str;
console.log(a,b,c,d);