JavaScript 解构赋值详解

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

JavaScript 的解构表达式是一种从对象中提取特定字段而无需获取整个对象的方法。它可以用于简单地从对象中提取值并对其进行检查。然而，它最适合用于函数参数，因为它允许你将一个配置对象传递给函数，然后在函数内部仅提取所需的值。以下示例将对此进行更清晰的说明，我还会向你展示解构表达式的不同用法。

以下示例展示了解构表达式的简单用法。首先，定义了一个名为“person”的对象，它包含三个字段：“firstname”、“lastname”和“country”。然后，我声明了两个名为“firstname”和“lastname”的变量，并将它们的值设置为“person”对象。请注意这两个变量实例化中的花括号，这就是解构操作。它告诉 JavaScript 检查“person”对象中是否存在同名字段并获取其值。这样，你就可以像声明全局变量一样，从对象中取出这两个变量。

const person = {
  firstname: 'Adam',
  lastname: 'Roynon'
}

let { firstname, lastname } = person

console.log(firstname, lastname);

解构表达式的一个重要用途是将其用于函数参数/实参中。以下函数解构一个传入的对象，提取出变量“firstname”和“lastname”。如果我们再次调用该函数并传入同一个对象，这两个变量将被实例化，就像它们是作为普通实参而不是对象的一部分传入的一样。

const person = {
  firstname: 'Adam',
  lastname: 'Roynon'
}

function printName({ firstname, lastname}){
  console.log(firstname, lastname);
}

printName(person);

你未必总是知道传入对象的结构，它可能不包含我们需要的特定字段。这时就需要用到默认值了。我们可以为字段设置默认值，这样，如果传入的配置对象中不存在该字段，则会使用其默认值。下面的示例展示了一个与之前对象类似的对象，但省略了“lastname”字段。传递给函数的解构参数也发生了变化，现在“lastname”字段的默认值设置为“Roynon”。因为传入的对象“person”没有名为“lastname”的字段，所以使用了默认值；否则，“lastname”变量将被初始化为传入对象的值。

const person = {
  firstname: 'Adam'
}

function printName({ firstname, lastname = "Roynon"}){
  console.log(firstname, lastname);
}

printName(person);

这种设置默认值的功能可以用于任何解构操作，而不仅仅是函数的参数。下面的示例展示了与上一个示例相同的过程，但这次我们没有使用函数，而是将对象字段解构为全局作用域的变量。'lastname' 字段的默认值仍然是 'Roynon'。

const person = {
  firstname: 'Adam'
}

let { firstname, lastname = "Roynon" } = person

console.log(firstname, lastname);

JavaScript 中的对象并非总是扁平结构，它们通常具有层级结构，包含嵌套的对象和字段。我们仍然可以使用解构赋值来获取这些嵌套字段，并将它们实例化为单独的变量。下面的示例展示了如何从嵌套的 `location` 对象中提取 `country` 字段。需要注意的是，解构赋值后，`country` 将被提取为一个单独的字段，它不会再位于 `location` 对象内部。解构操作后，不会再存在 `location` 对象，只有三个变量：`firstname`、`lastname` 和 `country`。

const person = {
  firstname: 'Adam',
  lastname: "Roynon",
  location: {
    country: "United Kingdom"
  }
}

let { firstname, lastname, location: { country } } = person

console.log(firstname, lastname, country);

你也可以在通过解构从对象中提取变量后，为其使用不同的名称。以下示例展示了如何从“person”对象中提取“firstname”和“lastname”字段。然后，我们使用冒号“:”为这两个变量赋予新名称。现在，对象中的值将被赋给变量“fName”和“lName”，而不是对象内部的名称。

const person = {
  firstname: 'Adam',
  lastname: "Roynon"
}

let { firstname: fName, lastname: lName } = person

console.log(fName, lName);

我们也可以在数组上使用解构，它不一定用于对象。下面的例子展示了一个包含 3 个元素的数组，然后使用解构操作将名称“red”、“green”和“blue”分别赋值给这三个元素。请注意，在解构数组时，我们使用方括号而不是花括号，这与解构对象不同。数组中元素的值将被赋予这三个新变量。因此，最终的日志语句将打印出数字“125”、“255”和“50”。

const myArr = [125, 255, 50];

let [red, green, blue] = myArr;

console.log(red, green, blue);

你不必从数组中取出所有元素，可以取出一部分。下面的代码片段会取出数组的前两个元素。因此，最后一条语句会打印出数字 '1' 和 '2'。

const myArr = [1, 2, 3];

let [one, two] = myArr;

console.log(one, two);

我们还可以跳过数组中的某些值。假设我们要取出数组的第一个和最后一个元素，我们可以通过在解构操作中添加一个逗号来跳过数组元素。你可以使用额外的逗号跳过任意数量的元素，并且可以在数组或解构操作中的任何位置进行跳过。

const myArr = [1, 2, 3];

let [one,, three] = myArr;

console.log(one, three)

本文最初发表于https://acroynon.com