如何使用 ECMAScript 2015（ES6）中的解构赋值

在现代的前端开发中，ES6已经成为了必备的技能之一。其中，解构赋值是ES6中非常实用的一个特性，它允许你从数组或对象中快速取出值并赋给变量，提升了开发效率和可读性。本文将详细讲解ES6中的解构赋值，包括其基本语法和用法。

基本语法

数组解构

对于数组解构，我们需要使用一对方括号 [ ] 来定义一个数组，然后通过相对应的顺序，将数组中的元素，赋给定义的变量。

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

上述代码中，定义了一个数组 arr，然后通过解构赋值将数组中的元素一一赋给变量 a、b、c，分别为 1、2、3。

如果数组的某个元素不需要赋值给变量，可以使用逗号来跳过该值。

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

在ES6中，也可以使用默认值来赋值，如果数组中的某个元素是 undefined，则默认值会覆盖掉 undefined。

let arr1 = [1, undefined, 3];
let arr2 = [1, null, 3];
let [a = 0, b = 0, c = 0] = arr1;
let [x = 0, y = 0, z = 0] = arr2;
console.log(a, b, c);  // 1, 0, 3
console.log(x, y, z);  // 1, null, 3

如果数组的长度超过了解构赋值的变量个数，那么超出的部分会被忽略。

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

还可以使用剩余参数（rest parameter）来获取数组中除了已经解构已经的变量之外的剩余所有参数。

let arr = [1, 2, 3, 4, 5];
let [a, b, ...rest] = arr;
console.log(a);  // 1
console.log(b);  // 2
console.log(rest);  // [3, 4, 5]

对象解构

与数组解构类似，对象解构也是通过一对大括号 { } 来定义一个对象，通过对象中的属性名，将属性值一一赋给变量。

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

对象解构也支持默认值和重命名。

let obj = { a: 1, b: undefined, c: 3 };
let {a, b = 0, c: newName} = obj;
console.log(a);  // 1
console.log(b);  // 0
console.log(newName);  // 3

用法

多层解构

解构赋值还可以用在多层嵌套的数据结构中，这时候就需要使用嵌套的解构赋值语法。

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

对于嵌套的对象也是一样的。

-- -------------------- ---- -------
--- --- - -
  -- --
  -- -
    -- --
    -- -
  -
--
--- --- -- --- --- - ----
---------------  -- -
---------------  -- -
---------------  -- -

函数参数解构

函数参数也可以使用解构赋值的方式来传递参数。

function printInfo({name, age}) {
  console.log(`${name} is ${age} years old.`);
}
let person = {name: 'Tony', age: 30};
printInfo(person);  // "Tony is 30 years old."

用途

ES6的解构赋值可以用在很多场景，比如交换变量的值、从函数中返回多个值、从Promise中获取异步执行结果等。

交换变量的值

通过解构赋值可以更优雅地交换变量的值，可以帮助减少代码量。

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

从函数中返回多个值

在ES6之前，如果需要从函数中返回多个值，需要将它们以对象或数组的形式返回。ES6中，解构赋值可以轻松地从函数中返回多个值。

function foo() {
  return [1, 2, 3];
}
let [a, b, c] = foo();
console.log(a);  // 1
console.log(b);  // 2
console.log(c);  // 3

Promise 中获取异步执行结果

Promise对象的 then() 方法可以接收两个参数，onResolved 和 onRejected，onResolved 会在 Promise 执行成功时被调用，onRejected 会在 Promise 执行失败时被调用。

可以使用解构赋值轻松地获取 Promise 中异步成功或失败的结果。

let promise = Promise.resolve([1, 2, 3]);
promise.then(([a, b, c]) => {
  console.log(a);  // 1
  console.log(b);  // 2
  console.log(c);  // 3
});

结论

ES6中的解构赋值是一个非常实用的特性，对于开发效率和代码可读性都有很大的提升。本文详细讲解了解构赋值的基本语法和用法，包括数组、对象、多层解构、函数参数解构和用途，希望能够帮助到读者更好地学习和使用解构赋值。

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