ES6 的解构赋值，你掌握了吗？

ES6 引入了解构赋值语法，它可以让我们更轻松地从数组或对象中提取值，赋值给变量。在这篇文章中，我们将详细介绍 ES6 解构赋值，掌握它对于前端开发非常重要。

数组解构赋值

我们可以将一个数组解构成多个变量，这个过程需要在变量名前加上中括号：

let [a, b, c] = [1, 2, 3];
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

数组的解构赋值还支持默认值，如果数组中该位置的值为 undefined，则会赋值为默认值：

let [a, b, c = 4] = [1, 2, undefined];
console.log(c); // 4

我们还可以使用“...”运算符来获取数组的其余元素：

let [a, ...b] = [1, 2, 3];
console.log(a); // 1
console.log(b); // [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

和数组解构赋值类似，对象解构赋值也支持默认值和“...”运算符：

let {a, b, c = 4} = {a: 1, b: 2};
console.log(c); // 4

let {a, ...b} = {a: 1, b: 2, c: 3};
console.log(a); // 1
console.log(b); // {b: 2, c: 3}

我们还可以为解构赋值的变量重新命名，这个时候需要使用“:”符号：

let {a: x, b: y} = {a: 1, b: 2};
console.log(x); // 1
console.log(y); // 2

深度解构

我们可以将一个嵌套的对象解构成多个变量：

let {a, b: {c, d}} = {a: 1, b: {c: 2, d: 3}};
console.log(a); // 1
console.log(c); // 2
console.log(d); // 3

函数参数解构

我们还可以在函数的参数列表中使用解构赋值，这样可以让代码更简洁：

function foo({a, b}) {
  console.log(a + b);
}

foo({a: 1, b: 2}); // 3

函数参数解构还支持默认值和“...”运算符：

function foo({a = 1, b = 2, ...c}) {
  console.log(a + b);
  console.log(c); // {c: 3, d: 4}
}

foo({c: 3, d: 4}); // 3

总结

ES6 的解构赋值语法可以让我们更轻松地从数组或对象中提取值，赋值给变量。它可以让代码更简洁，提高开发效率。掌握解构赋值对于前端开发非常重要，希望本文能够帮助你更好地理解和使用解构赋值。

练习

1. 请使用数组解构赋值将 [1, 2, 3] 分别赋值给 a、b、c 三个变量。
2. 请使用对象解构赋值将 {a: 1, b: 2} 分别赋值给 x、y 两个变量。
3. 请将下面的代码改写为解构赋值的形式：

function foo(obj) {
  let a = obj.a;
  let b = obj.b;
  console.log(a + b);
}

foo({a: 1, b: 2});

参考答案：

1. let [a, b, c] = [1, 2, 3];
2. let {a: x, b: y} = {a: 1, b: 2};

function foo({a, b}) {
  console.log(a + b);
}

foo({a: 1, b: 2});

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e6a4c5f6b2d6eab31ff3fa