定義

JavaScript中，可以使用解構(gòu)賦值的方式來對數(shù)組或者對象進行變量解構(gòu)，也可以簡單的理解為就是對變量拆解屬性進行賦值。

數(shù)組解構(gòu)

數(shù)組解構(gòu)唯一要注意的就是下標(biāo)的位置，只要解構(gòu)賦值變量所處下標(biāo)位置相同，那么就能夠成功解構(gòu)賦值：

數(shù)組長度等于1

const arr1 = [6];
const [id] = arr1;
console.log(id);	// 6

數(shù)組長度大于1 按數(shù)組下標(biāo)進行索引賦值，僅有一個id變量：

const arr2 = [1,2,3,4,5];
const [id] = arr2;
console.log(id);	// 1

多個變量解構(gòu)，如果中間有不需要解構(gòu)的，也需要以逗號進行分割，主要確保需要解構(gòu)的索引位置準(zhǔn)確：

const arr3 = [1,2,3,4,5];
const [num1,,num2,,num3] = arr3;
console.log(num1);	// 1
console.log(num2);	// 3
console.log(num3);	// 5

數(shù)組全量解構(gòu)，即所有索引位置都對應(yīng)解構(gòu)參數(shù)：

const arr4 = [1,2,3];
const [num1,num2,num3] = arr4;
console.log(num1);	// 1
console.log(num2);	// 2
console.log(num3);	// 3

數(shù)組解構(gòu)默認(rèn)值設(shè)置，使用（變量名=默認(rèn)值）進行解構(gòu)默認(rèn)值設(shè)置：

const arr5 = [1,,3];
const [num1,num2=22,num3] = arr5;
console.log(num1);	// 1
console.log(num2);	// 22
console.log(num3);	// 3

用于變量值交換，只需將兩個或多個變量存放到等號兩邊的數(shù)組，對應(yīng)好要交換的位置即可：

const a=1;
const b=2;
[a, b] = [b, a];
console.log(a + '-' + b);	// 2-1

對象解構(gòu)

掌握了上面的數(shù)據(jù)解構(gòu)，那么對象解構(gòu)也就不難理解了，數(shù)組與對象的區(qū)別就是索引方式不同，數(shù)組是根據(jù)下標(biāo)索引，而對象則是key-value的索引方式，所以這里我們只需要解構(gòu)賦值變量的key相同，那么就能夠成功解構(gòu)賦值：

對象單個/多個參數(shù)解構(gòu)賦值，在等號左邊定義解構(gòu)對象對應(yīng)的key參數(shù)進行解構(gòu)：

const obj1 = {id:1001, name:'張三'};
const {id, name} = obj1;
console.log(id + '-' + name);	// 1001-張三

對象解構(gòu)默認(rèn)值設(shè)置，使用（變量名=默認(rèn)值）進行解構(gòu)默認(rèn)值設(shè)置：

const obj2 = {id:1002, name:'李四'};
const {id, name, age=18} = obj2;
console.log(id + '-' + name + '-' + age);	// 1002-李四-18

優(yōu)缺點

優(yōu)點：

• 代碼簡潔明了，便于閱讀和維護。
• 可以直接從對象或數(shù)組中提取需要的屬性或元素，避免編寫大量的取值代碼。
• 可以同時定義多個變量，減少了代碼量和冗余。
• 多個變量值的交換變得更加方便。
• 從對象、數(shù)組中取值時，默認(rèn)值設(shè)置方便。

缺點：

• 解構(gòu)賦值會改變原對象或數(shù)組的結(jié)構(gòu)，可能會導(dǎo)致意外的結(jié)果。
• 嵌套結(jié)構(gòu)的對象進行解構(gòu)相對復(fù)雜，代碼可讀性差。
• 需要有一定的js基礎(chǔ)，不同于普通的語法基礎(chǔ)，需要花些時間去學(xué)習(xí)。

總結(jié)

js解構(gòu)也是很流行的代碼寫法，掌握基礎(chǔ)的用法也非常簡單，用上了真的會停不下來，日常使用也只需要我們上面的案例就夠了，其他的自己有需要可以再深入研究，不過也不建議研究的太多，因為那會使代碼可讀性變得更加復(fù)雜。

到此這篇關(guān)于詳解JS如何進行變量解構(gòu)的文章就介紹到這了,更多相關(guān)JS變量解構(gòu)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論