Javascript——解构事物！

2025-06-04

Javascript——解构事物！

萨拉姆，大家好！

你有没有想过，一个数组或对象的数据结构，有着最复杂的结构，却试图调用一个深藏在对象内部的参数？嗯，这students[4].subjects[2].information.lecturers[1]确实看起来很恐怖，尤其是当你不得不在整个代码库中重复同样的代码时💀

有办法解决！但要理解它的工作原理，我们需要先了解一下它是如何演变成“解构”的。那么，JavaScript 中的“解构”到底是什么呢？

解构

解构

好了，是时候发挥想象力了。一个盒子，里面装满了各种物品。以后，你必须记住每一样东西才能玩。与其记住它们在盒子里的位置，不如打开盒子，并给它起个相应的名字，这样以后玩起来会更容易。而且，你不需要把所有东西都打开，只要你需要的就行。

在 JavaScript 中，你可以将所需的任何内容“解包”到对象和数组中。没错，两者都可以！但是，它看起来是什么样子的呢？

解构的剖析

解构需要注意三个方面。首先，当然是原始对象或数组。解构一个不存在的东西是不可能的。

我们来了...

const team = {
  name: "Team Secret",
  region: "Europe",
  members: ["MATUMBAMAN", "Nisha", "zai", "YapzOr", "Puppey"],
  year: 2021,
  coach: "Heen",
  captain: "Puppey",
  isFinalist: true,
};
Enter fullscreen mode Exit fullscreen mode

假设上面的对象就是我们想要操作的对象。对象包含 7 个条目，每个条目都有不同的值类型。太棒了。那么，举个例子，我们该如何调用这个区域呢？

console.log(team.region);
// Europe
Enter fullscreen mode Exit fullscreen mode

和TI一样简单吧？嗯，我是说ABC！酷。现在，给妮莎打个电话怎么样？

console.log(team.members[1]);
// Nisha
Enter fullscreen mode Exit fullscreen mode

还是很简单。那么，想象一下，你必须在多个地方调用同一个东西，该怎么办呢？

...我们来自很远的地方...

从这一点来看，我更倾向于用一种更复杂的方式调用它，只调用必要的部分。team对象中的条目并非都会被使用。所以，获取成员……

const members = team.members;

console.log(members[2]);
// zai
Enter fullscreen mode Exit fullscreen mode

现在，我需要队员、队长和球队名称。

const teamName = team.name;
const captain = team.captain;
const members = team.members;
Enter fullscreen mode Exit fullscreen mode

想象一下，如果我们处理一个大对象，这意味着如果需求增加，上面的代码也会变得更大。不过，为了方便理解，我们将对象值重命名为新的变量声明。这样更容易阅读，但这里有些冗余。

这里需要注意两点。我们调用原始索引（或键），然后通过声明一个新变量来重命名它，这样就不再需要调用对象了，因为新变量是使用对象值声明的。

const teamName = team.name;
const captain = team.captain;
const members = team.members;
      -------    -------------
     rename       original index
Enter fullscreen mode Exit fullscreen mode

...每天都变得更好

让我们慢慢深入解构。和我们之前讨论过的想法一样，我将演示如何使用解构来获得更好的语法。

const { members: teamMembers } = team;
       ---------  --------------
 original index     rename

console.log(teamMembers[0]);
// MATUMBAMAN
Enter fullscreen mode Exit fullscreen mode

这样，你就无需使用标准声明方式，而是开始使用解构方式。而且，你仍然可以以正常方式访问对象，因为它不会改变原始对象。它只是在解构过程中创建一个新变量。

const { members: teamMembers } = team;

console.log(teamMembers[0]);
// MATUMBAMAN

console.log(team.captain);
// Puppey
Enter fullscreen mode Exit fullscreen mode

无需重命名

有时候，你会觉得重命名没有必要，而这种情况确实发生了！如果是这样，你可以省略重命名，直接使用原始索引（或键）。

const { members } = team;

console.log(members[4]);
// Puppey
Enter fullscreen mode Exit fullscreen mode

如你所见，解构就是这么简单！只需使用原始键名即可。那么，让我们开始解构吧！

const {
  name,
  region,
  members,
  year,
  coach,
  captain,
  isFinalist,
} = team;
Enter fullscreen mode Exit fullscreen mode

是的，就这么简单！

解构一个并保留其他

对于这种情况，我们假设情况确实如此。

const members = team.members;
const otherInfo = {
  name: team.name,
  region: team.region,
  year: team.year,
  coach: team.coach,
  captain: team.captain,
  isFinalist: team.isFinalist,
};
Enter fullscreen mode Exit fullscreen mode

你注意到了什么？嗯，我们可以看到我们声明了成员，之后可以使用解构方法简化。但是下一个呢otherInfo？它包含了团队的所有东西，除了成员！所以在声明成员之后，它就包含了剩下的成员。

对于这种情况，我们将学习使用扩展运算符，它将获取所有其他内容，并将其放入一个新名称中。

const {
  members,
  ...otherInfo
} = team;

console.log(otherInfo.coach);
// Heen
Enter fullscreen mode Exit fullscreen mode

更短、更简单、更容易阅读，对吧？由于“其余部分”没有任何指向的键，所以它的写法就是...rest。在扩展运算符 ( ...) 后，输入任何你想要的名称。

您还可以将所有内容混合在一起！

const {
  members,
  captain: teamCaptain,
  year: competeYear,
  ...theRest
} = team;
Enter fullscreen mode Exit fullscreen mode

一切皆有开始

有时候，对象键不存在，所以你需要先初始化它。那么，我们可以这样做吗？当然可以！

const {
  director,
} = team;
// This will return error, since director
// is not in `team` object

const {
  director = "John Yao",
} = team;
// This will not produce error, because
// the `director` will be initialized since
// director is not exist. Yet.
Enter fullscreen mode Exit fullscreen mode

我们可以将这个功能用到现有的密钥上吗？答案是肯定的！

const {
  coach = "Atif",
} = team;
// This will not produce error. However, you
// will get "Heen" later on, since coach is already
// has value in the object.
Enter fullscreen mode Exit fullscreen mode

使用这种方式，仅当教练不存在或未定义时，它才会将其初始化为“Atif”。

把所有东西放在一个地方

const {
  members,
  captain: teamCaptain = "Aiman",
  year: competeYear,
  manager = "Cyborgmatt",
  ...theRest
} = team;

console.log(members[3]); // YapzOr
console.log(teamCaptain); // Pupper
// Team captain already initialized in the original object
console.log(competeYear); // 2021
console.log(manager); // Cyborgmatt
console.log(theRest.coach); // Heen
Enter fullscreen mode Exit fullscreen mode

那么，对象内部的对象又如何呢？

const team = {
  name: "Team Secret",
  region: "Europe",
  members: ["MATUMBAMAN", "Nisha", "zai", "YapzOr", "Puppey"],
  year: 2021,
  coach: "Heen",
  captain: "Puppey",
  isFinalist: true,
  position: {
    core: ["MATUMBAMAN", "zai"],
    support: ["Puppey", "YapzOr"],
    mid: ["Nisha"],
  },
};

const {
  position: {
    core,
    support,
    mid,
  },
} = team;
Enter fullscreen mode Exit fullscreen mode

就这样！像往常一样浏览嵌套对象即可。您可以看到position我添加的参数，然后我会position先使用 进行解构，然后再解构其中的内容。

这就是对象解构的妙招！但是，数组怎么办呢？

数组解构

你注意到我一直在说索引/键吗？没错，对象有灵活的索引，或者说我们所说的键，所以很容易解构一个对象，而不需要查看它的排列方式。但数组的情况有所不同，因为索引是按顺序排列的。

const teamMembers = ["MATUMBAMAN", "Nisha", "zai", "YapzOr", "Puppey"];
Enter fullscreen mode Exit fullscreen mode

我们将从这里开始。

按顺序解构

由于数组的索引是按顺序排列的，因此在解构时我们需要遵循这种排列顺序。这样，-

const [core1, mid, core2, support1, support2] = teamMembers;

console.log(core1); // MATUMBAMAN
Enter fullscreen mode Exit fullscreen mode

所以，你可以看到我们解构了数组中的所有内容。那么，如果我只需要前两个怎么办？好吧，那就省略剩下的吧！

const [core1, mid] = teamMembers;

console.log(mid); // Nisha
Enter fullscreen mode Exit fullscreen mode

那么，最后两个呢？因为我们需要按顺序排列，对吧？当然，你可以留空！

const [ , , , support1, support2] = teamMembers;

console.log(support2); // Puppey
Enter fullscreen mode Exit fullscreen mode

接下来！用展开运算符处理剩下的部分怎么样？别慌，我们搞定了！

const [core1, mid, ...otherMembers] = teamMembers;

console.log(otherMembers);
// ["zai", "YapzOr", "Puppey"]
Enter fullscreen mode Exit fullscreen mode

.split展开运算符会取余数，并将其作为新数组传递。先展开运算符，然后再解构最后两个数？就此打住！除非你需要这样做，否则恐怕不可能。

什么？你说你想用对象方法？当然可以，但必须重命名。

const {
  0: core1,
  1: mid,
} = teamMembers;

console.log(mid); // Nisha
Enter fullscreen mode Exit fullscreen mode

那么，这意味着我们可以对中间部分进行解构，然后对其余部分进行扩展操作？好吧好吧，这真是太棒了！

const {
  2: core2,
  ...otherMembers
} = teamMembers;

console.log(core2); // zai
console.log(otherMembers);
// { 0: "MATUMBAMAN", 1: "Nisha", 3: "YapzOr", 4: "Puppey" }

// Note that `...otherMembers` will try to retain
// the index if destructure didn't happen at index 0,
// and will produce object instead.
Enter fullscreen mode Exit fullscreen mode

结论

这就是解构的全部内容！从对象到数组，我们学习如何提取对象和数组中的元素，以便以后调用。需要注意的是，解构会在不改变原始对象或数组的情况下创建一个新的变量。与函数一起使用时效果更佳。

const displayName = ({ player, coach, director = "Luck" }) => {
  console.log(`Player is ${player}`);
  console.log(`Director is ${director}`);
};

displayName({ coach: "Master", player: "Atif", director: "Life" });
// Player is Atif
// Director is Life

displayName({ coach: "Master", player: "Aiman" });
// Player is Aiman
// Director is Luck

// Note that I put coach first instead of player. And it still works!
Enter fullscreen mode Exit fullscreen mode

这样，你就不用再按顺序传递参数了。是不是很棒？甚至，如果参数没有传递，你还可以使用默认值！

所以，感谢您的阅读，在此之前，再见，愿您平安！

文章来源：https://dev.to/alserembani/javascript-destructuring-the-thing-8ap
Devto 翻译
PREV
7 个有趣的 HTML 属性（你可能不知道）
NEXT
Laravel 10 中的 Pest PHP 测试框架