ES6 數組、對象的解構

數組的解構

以前的普通方法擷取數組内的值

//以前的普通方法
const arr = [1,2,3];
const a = arr[0];
const b = arr[1];
const c = arr[2];
console.log(a,b,c);
           

ES6 中 利用數組結構，可以很簡單的将數組中的值擷取到

//數組解構  （給一個數組指派被解構數組,按位置提取被解構數組的元素）
const arr = [1, 2, 3];
//将a,c,b按順序存入數組，再給它指派arr，就能按順序擷取到數組arr的值
const [a,c,b] = arr;
console.log(a, b, c);//132
           

相應隻擷取arr某個位置的值時，前面的該有的逗号不可省

const arr = [1, 2, 3];
//相應隻擷取arr某個位置的值時，前面的該有的逗号不可省
const [,,b] = arr;
console.log(b);//3
           

想要讓b擷取2，3，4所有的值，用…即可

const arr = [1, 2, 3, 4];
//想要讓b擷取2，3，4所有的值，用...即可
const [a,...b] = arr;//注意....隻能用在最後一個變量前面，從目前位置截取到最後都存儲在b
console.log(b);//是一個數組，數組裡存儲的是2，3，4
           

當const數組解構位置的成員的少于數組時，結構仍按順序執行

// const數組解構位置的成員的少于數組
const arr = [1, 2, 3];
const [b] = arr;//從前往後解構
console.log(b);//1
           

當const數組解構位置的成員的多于數組，按照順序結構，超出的成員，數組中沒有足夠的元素時，超出部分就是undefined

// const數組解構位置的成員的多于數組
const arr = [1, 2, 3];
const [a,b,c,d = 100,f,r] = arr;//從前往後解構,超過的是undefined
console.log(a,b,c,d,f,r);//1,2,3,100,undefined,undefined（d接收了預設值100）
           

對象的解構

利用對象結構簡化了對對象的操作

// 對象的解構
const obj = {name:"li",age:21};
const {name,year=2020,age,id} = obj;
console.log(name +"," + year +"," + age + "," + id);
 //輸出為： li,2020,21,undefined
           

利用對象結構，還可以簡化console.log()的書寫

//利用對象解構簡化console.log
const {log} = console;
log(123);
//簡化了代碼