為什么需要解構賦值
解構賦值可以讓我們的代碼更加簡潔明了晴音,大大減少我們的代碼量
解構賦值可以分為數(shù)組解構弊攘,對象解構锌钮,字符串解構
1、對象解構
不使用對象解構的情況:
const person = {
name: 'little bear',
age: 18,
sex: '男'
}
let age = person.age
let name = person.name
let sex = person.sex
而使用對象解構之后楞捂,以上的代碼就可以變成下面的形式:
const person = {
name: 'little bear',
age: 18,
sex: '男'
}
let { name,age,sex } = person
對象解構的書寫方式:
let {a,b} = {a:'值a',b:'值b'};
console.log(a + '|' + b); //值a|值b
對象解構沒有次序之分:
let {a,b} = {b:'值b',a:'值a'};
console.log(a + '|' + b); //值a|值b
如果在對象解構前就已經(jīng)定義了變量,那么解構就會報錯:
let a;
{a,b} = {b:'值b',a:'值a'};
console.log(a + '|' + b); //報錯(Unexpected token =)
上方的代碼如果想不報錯趋厉,只要在對象解構的外面加上一個()就可以了:
let a;
({a,b} = {b:'值b',a:'值a'});
console.log(a + '|' + b); //值a|值b
2寨闹、數(shù)組解構
以前的變量賦值方式:
let a = 1;
let b = 1;
let c = 1;
用數(shù)組解構賦值的方式就可以將上方的代碼變?yōu)椋?/p>
let [a,b,c] = [1,1,1];
數(shù)組解構的兩邊格式要一致,如下的形式就會報錯:
let [a,[b],c] = [1,1,1];
console.log(a + '|' + b + '|' + c); //報錯( [1,1,1] is not iterable)
將上面的形式改成如下格式就可以了(保證數(shù)組兩邊形式一致):
let [a,[b],c] = [1,[1],1];
console.log(a + '|' + b + '|' + c); //1|1|1
數(shù)組解構與對象解構不同君账,數(shù)組解構是有次序之分的:
let [a,b] = [1,2];
和let [b,a] = [2,1]
的a繁堡,b的值前后是不一樣的
解構是可以有默認值的:
let [a,b=1] = [2];
console.log(a + '|' + b); //2|1
而如果是以下的形式:(與函數(shù)的默認參數(shù)類似)
let [a=1,b] = [2];
console.log(a + '|' + b); //2|undefined
默認值中undefined和null的區(qū)別:
//undefined相當于沒有寫,所以b是默認值
let [a,b=2] = [2,undefined];
console.log(a + '|' + b); //2|2
//null相當于寫值了乡数,值就是null
let [a,b=2] = [2,null];
console.log(a + '|' + b); //2|null
3椭蹄、字符串解構
let [a,b,c] = 'ES6';
console.log(a + '|' + b + '|' + c); //E|S|6