一、ES6数组解构赋值
ES6提供了许多新特性，其中数组解构赋值就是其中之一，通过这种方式，可以从数组和对象中提取值并赋给变量。
例如：
let [a, b, c] = [1, 2, 3];
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
上述代码意味着将数组中从左到右的值赋值给对应的变量，即a=1，b=2，c=3，它们的值与数组的位置一一对应。
二、数组解构赋值语法
数组解构赋值语法简单、易懂、易于记忆，它的语法格式为：
[a, b, c] = [1, 2, 3];
其中，左侧是解构后的变量名，右侧是要进行解构的数组。
三、ES6解构赋值数组对象
解构赋值不仅可以用在数组上，也可以用在对象上，此时需要借助解构模式和对象字面量语法。
例如：
let {a, b, c} = {a: 1, b: 2, c: 3};
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
该代码意味着将对象中对应属性的值赋给变量，即a=1，b=2，c=3。
四、数组解构赋值
使用ES6的数组解构赋值，可以不再需要使用中间变量进行交换两个变量的值，只需如下操作：
[a, b] = [b, a];
其中，将第二个变量赋值给第一个变量，将第一个变量赋值给第二个变量。
五、JS数组解构赋值
在JS中，数组解构赋值不仅适用于var关键字定义的变量，也适用于let和const定义的变量。
例如：
const [a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2
六、JS数组解构
在ES6之前，JS数组解构是将数组中的每一项按照位置赋值给变量。
例如：
let arr = [1, 2, 3];
let a = arr[0];
let b = arr[1];
let c = arr[2];
ES6的数组解构赋值通过方括号内的变量名，实现了直接从数组中解构自动填充每个变量的值的方法。
七、需要回传多个值时，使用数组解构
数组解构可以非常方便地回传多个值，而无需用数组或对象来进行组装。
例如：
function returnArray() {
return [1, 2, 3];
}
const [a, b, c] = returnArray();
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
八、数组对象解构
如果数组元素是对象，则可以使用数组对象解构，将对象的属性提取为变量。
例如：
let arr = [{name: 'Tom', age: 18}, {name: 'Jerry', age: 20}];
let [{name: a, age: b}, {name: c, age: d}] = arr;
console.log(a); // 'Tom'
console.log(b); // 18
console.log(c); // 'Jerry'
console.log(d); // 20
九、JS合并数组解构
JS中，还可以通过合并数组解构，将多个数组合并为一个数组。
例如：
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let arr = [...arr1, ...arr2];
console.log(arr); // [1, 2, 3, 4, 5, 6]
上述代码中，通过…运算符合并了两个数组。也可以对合并后的数组使用数组解构进行操作。
总结
数组解构赋值是ES6中便利的特性，不仅让代码更加简洁易懂，也使得开发人员更加高效地进行编码，特别是在处理包含多个变量的数组和对象时，能够极大地提高开发效率。
原创文章，作者：VHCVF，如若转载，请注明出处：https://www.506064.com/n/318080.html
微信扫一扫 
支付宝扫一扫 