定義

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

數(shù)組解構

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

數(shù)組長度等于1

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

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

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

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

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ù)組全量解構，即所有索引位置都對應解構參數(shù)：

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

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

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

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

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

對象解構

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

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

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

對象解構默認值設置，使用（變量名=默認值）進行解構默認值設置：

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

優(yōu)缺點

優(yōu)點：

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

缺點：

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

總結

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

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

最新評論