参数解构

在 JavaScript 中，解构赋值语法可以帮助我们将一个数组或对象中的值分配给多个变量。

数组解构

数组解构可以让我们同时声明和赋值多个变量，而不必一个一个地为其赋值。

// 传统的数组赋值方式
const arr = [1, 2, 3];
const first = arr[0];
const second = arr[1];
const third = arr[2];

// 数组解构的方式
const [first, second, third] = [1, 2, 3];

数组解构时，也可以忽略某些值。

const [, second, third] = [1, 2, 3];

以上代码将只会获得 2 和 3 两个值。在解构数组时，不需要使用所有返回值，这种方式将非常有用。

还可以使用数组解构，在函数参数中传递数组。

function foo([first, second]) {
  console.log(first, second);
}

foo([1, 2]); // 1, 2

对象解构

对象解构允许我们使用对象的键来声明和赋值变量。

// 传统的对象赋值方式
const obj = { first: 1, second: 2 };
const first = obj.first;
const second = obj.second;

// 对象解构的方式
const { first, second } = { first: 1, second: 2 };

在对象解构时，变量的名称要与对象中的键一致。

另外，当变量名与键名不一致时，可以用 : 来为变量指定一个别名。

const { first: one, second: two } = { first: 1, second: 2 };
console.log(one, two); // 1, 2

对象解构同样也可以在函数参数中使用。

function foo({first, second}) {
  console.log(first, second);
}

foo({first: 1, second: 2}); // 1, 2

深层次的解构

对象和数组可以互相包含自己的类型（即嵌套的对象或数组）。当我们需要获取嵌套的值时，可以进行深层次的解构。

const obj = {
  arr: [
    "Hello",
    { name: "Jack" }
  ]
};
const { arr: [msg, { name }] } = obj;

console.log(msg, name); // "Hello", "Jack"

默认值

当尝试解构一个 undefined 或 null 的变量时，程序将会以 undefined 代替变量的值。但是，你同样可以在声明变量时指定默认值。

const [foo, bar = "default"] = ["foo", undefined];
console.log(foo, bar); // "foo", "default"

const { baz, qux = "default" } = { baz: "baz" };
console.log(baz, qux); // "baz", "default"

总结

参数解构可以简化代码的编写，并能帮助我们编写更加健壮的程序。它们非常有用，无论你是在处理多个返回值，还是在在解构复杂的对象或数组。