js中如何进行变量解构

定义

JavaScript中，可以使用解构赋值的方式来对数组或者对象进行变量解构，也可以简单的理解为就是对变量拆解属性进行赋值。

数组解构

数组解构唯一要注意的就是下标的位置，只要解构赋值变量所处下标位置相同，那么就能够成功解构赋值：

• 数组长度等于1

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

• 数组长度大于1 按数组下标进行索引赋值，仅有一个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

数组全量解构，即所有索引位置都对应解构参数：

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

数组解构默认值设置，使用（变量名=默认值）进行解构默认值设置：

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

用于变量值交换，只需将两个或多个变量存放到等号两边的数组，对应好要交换的位置即可：

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

对象解构

掌握了上面的数据解构，那么对象解构也就不难理解了，数组与对象的区别就是索引方式不同，数组是根据下标索引，而对象则是key-value的索引方式，所以这里我们只需要解构赋值变量的key相同，那么就能够成功解构赋值：

• 对象单个/多个参数解构赋值，在等号左边定义解构对象对应的key参数进行解构：

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

优缺点

优点：

• 代码简洁明了，便于阅读和维护。
• 可以直接从对象或数组中提取需要的属性或元素，避免编写大量的取值代码。
• 可以同时定义多个变量，减少了代码量和冗余。
• 多个变量值的交换变得更加方便。
• 从对象、数组中取值时，默认值设置方便。

缺点：

• 解构赋值会改变原对象或数组的结构，可能会导致意外的结果。
• 嵌套结构的对象进行解构相对复杂，代码可读性差。
• 需要有一定的js基础，不同于普通的语法基础，需要花些时间去学习。

总结

js解构也是很流行的代码写法，掌握基础的用法也非常简单，用上了真的会停不下来，日常使用也只需要我们上面的案例就够了，其他的自己有需要可以再深入研究，不过也不建议研究的太多，因为那会使代码可读性变得更加复杂。

掌握一个小技能，在写代码的路上才不会吃亏。