数组和对象匹配

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

使用let、const或var声明变量时，如果在赋值时添加()，会导致语法错误。以下示例均会报错。

let ({ a: b }) = {};
let { (a): b } = {};
let { a: (b) } = {};

// 函数参数解构也会报错
function foo(([z])) {
  return z;
}
console.log(foo([1]));

数组是特殊的对象

解构数组

数组在 JavaScript 中是特殊的对象，可以使用解构赋值来提取元素。

let numbers = [1, 2, 3];
let { 0: first, [numbers.length - 1]: last } = numbers;
console.log(first, last); // 1 3

值交换

解构赋值可以简化变量的值交换操作。

let firstValue = 10;
let secondValue = 20;
[firstValue, secondValue] = [secondValue, firstValue];
console.log(firstValue, secondValue); // 20 10

重复使用

在对象解构中，可以将同一个属性赋值给多个变量。由于对象属性是无序的，确保匹配的是相同源的属性。

let { a: first, a: second } = { a: 1 };
console.log(first, second); // 1 1

简写

当属性名和变量名相同时，可以使用简写语法。

let person = {
  name: '张三',
  age: 50,
  son: {
    name: '李四',
    ageLi: 30,
    son: {
      name: '王五',
      ageWang: 18,
      son: {
        name: '赵六',
        ageZhao: 0,
      },
    },
  },
};

let {
  son: {
    son: { son },
  },
} = person;
console.log(son); // { name: '赵六', ageZhao: 0 }

降低代码可读性

在解构赋值时，为变量赋予默认值，若不合理使用，可能降低代码的可读性。

let x = 200,
  y = 300,
  z = 100;
let obj1 = {
  x: {
    y: 42,
  },
  z: {
    y: z,
  },
};

// 试图为x赋予一个默认值
({ y: x = { y: y } } = obj1); // x = { y: 300 }

({ z: y = { y: z } } = obj1); // y = { y: 100 }

({ x: z = { y: x } } = obj1); // z = { y: 42 }

console.log(x, y, z); // { y: 300 } { y: 100 } { y: 42 }

函数参数解构

函数参数可以使用解构赋值，使参数提取更为简洁。

function displayCoordinates({ x, y }) {
  console.log(x, y);
}
displayCoordinates({ y: 2, x: 1 }); // 1 2

参数默认值

为函数参数设置默认值，以防传入的对象缺少某些属性。

function displayCoordinates({ x = 10 } = {}, { y } = { y: 10 }) {
  console.log(x, y);
}
displayCoordinates(); // 10 10

displayCoordinates({}, {}); // 10 undefined

在displayCoordinates函数中，当不传递参数时，x和y会分别取默认值 10 和 10。当传入空对象时，x会取默认值 10，但y为undefined。

简写

解构赋值时，如果变量名与属性名相同，可以省略重复部分。

({ x = 10 } = {});
console.log(x); // 10

({ y } = { y: 10 });
console.log(y); // 10

// 等价的完整写法
({ x: x = 10 } = {});
console.log(x); // 10

({ y: y } = { y: 10 });
console.log(y); // 10

解构的隐式转换

在进行解构赋值时，非对象类型的值会被转换为相应的对象类型。

const [a, b, c, d, e] = 'hello';
console.log(a, b, c, d, e); // 'h' 'e' 'l' 'l' 'o'

字符串被转换为类数组对象，允许按索引解构。

toString 方法

基本类型的值在解构时可以访问其原型方法。

let { toString: s } = 123;
console.log(s === Number.prototype.toString); // true

变量的解构本质

变量的解构本质上是对变量的赋值操作。