ES6 中的解构赋值是一种强大的数据处理技巧，它可以快速方便地将一个数组或对象解构为多个变量，从而更加灵活地操作数据。在前端开发中，解构赋值已经成为一种常用的语法，但是如何正确地使用它，仍然是一个需要学习和掌握的技能。
数组解构赋值
数组解构赋值是将一个数组解构为多个变量的过程，语法如下：
let [a, b, ...rest] = [1, 2, 3, 4, 5];
其中，a 和 b 是数组的前两个元素，rest 是一个数组，包含剩余的元素。
我们可以通过以下实例来理解：
let [a, b, ...rest] = [1, 2, 3, 4, 5]; console.log(a); // 1 console.log(b); // 2 console.log(rest); // [3, 4, 5]
解构赋值的变量可以与默认值结合使用：
let [a = 1, b = 2] = [3]; console.log(a, b); // 3 2
上面的代码中，由于数组中只有一个元素，所以变量 b 没有被解构赋值成功，使用了默认值 2。
我们可以在函数参数中使用解构赋值：
function test([a, b]) {
console.log(a, b);
}
test([1, 2]); // 1 2上面的代码中，函数 test 使用了数组解构赋值，可以在函数参数中将数组的元素作为函数内的变量进行操作。
对象解构赋值
对象解构赋值是将一个对象解构为多个变量的过程，语法如下：
let { a, b, ...rest } = { a: 1, b: 2, c: 3, d: 4 };其中，a 和 b 是对象的两个属性，rest 是一个对象，包含剩余的属性。
我们可以通过以下实例来理解：
let { a, b, ...rest } = { a: 1, b: 2, c: 3, d: 4 };
console.log(a); // 1
console.log(b); // 2
console.log(rest); // { c: 3, d: 4 }与数组解构赋值类似，对象解构赋值也可以结合默认值使用：
let { a = 1, b = 2 } = { a: 3 };
console.log(a, b); // 3 2我们可以在函数参数中使用对象解构赋值：
function test({ a, b }) {
console.log(a, b);
}
test({ a: 1, b: 2 }); // 1 2上面的代码中，函数 test 使用了对象解构赋值，可以在函数参数中将对象的属性作为函数内的变量进行操作。
拓展运算符
拓展运算符 ... 可以将数组或对象展开为多个元素，通常与解构赋值结合使用，来拷贝数组或对象的部分属性或元素。
let arr = [1, 2, 3];
console.log([...arr]); // [1, 2, 3]
let obj = { a: 1, b: 2, c: 3 };
console.log({ ...obj }); // { a: 1, b: 2, c: 3 }我们可以使用拓展运算符将数组或对象的部分属性或元素赋值给其他变量：
let [a, b, ...rest] = [1, 2, 3, 4, 5];
console.log(rest); // [3, 4, 5]
let { a, b, ...rest } = { a: 1, b: 2, c: 3, d: 4 };
console.log(rest); // { c: 3, d: 4 }总结
ES6 中的解构赋值是一个非常强大的语法，它可以方便快捷地操作数组和对象的元素和属性，大大提高了编码效率。我们需要掌握数组和对象解构赋值的语法，以及与默认值和拓展运算符结合使用的技巧，加强自己的代码实践能力，从而更好地应用这个技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645c50ad968c7c53b0ea2343