数组中的嵌套对象 - es6对象解构

Question

我知道你可以像这样进行对象解构：const { item } = data;

也可以像这样进行数组解构：const [ item ] = data;

在函数参数中也可以这样做：const x = ({ item }) => item;

我看到过很多关于此的问题和答案。然而，我还没有看到一个关于嵌套对象在数组中的例子和好的解释。

---

const test = [{ count: 1 }];

const [{ count }] = test;

通常我会这样做：

const x = test[0];

const { count } = x;

今天我在CodePen中进行测试时，才发现可以在同一赋值语句中使用解构函数。

有人能解释一下当我执行[{ count }]时发生了什么吗？因为我正在使用const [] = test进行数组解构，但我没有解构任何东西，这显然会失败。如果我在其中使用{ count }，那么我将得到想要的值。

我无法将其分解到足以理解其工作原理。我想[] = test与test[0]相同，然后我执行{ count } = test [0]。但我只是想更好地理解它的工作原理。

我浏览了一些MDN文档之类的东西，但我找不到关于上述情况的良好解释。

谢谢！

- pourmesomecode

---

当你看到 const [ , , { count }] = [{ apple: 1}, {pear: 5}, {count: 13}, {delta: 2}] 将 13 赋值给 count，这有帮助吗？ - trincot

相反，const [temp] = test，{count} = temp; - Bergi

好的！谢谢@Bergi。看来我不知道你可以这样写：const [aVarName] = test;，它等同于 const aVarName = test[0];。我原以为你只能解构值并赋默认值，但你传入任何在 [] 中的值都会被视为析构参数。 - pourmesomecode

Answer 1

嵌套解构有时可能会让人感到困惑。您可以随时使用Babel编译器，获取相应的ES5代码并理解其工作原理。

因此，这段代码：

const test = [{ count: 0 }, { whatever: 1 }, { total: 2 }];
const [{ count }, , { total }] = test

console.log(count, total)

被转译成：

var count = test[0].count;
var total = test[2].total;

你可以看到，index = 1的项被忽略（MDN），我们只解构了索引属性0和2。

既然我们已经谈到了解构数组对象的话题，那么这可以以更高级的方式使用。你可以像这样解构任何索引处的项：

const test = [{ count: 0 }, { count: 1 }, { count: 2 }];

const { 2: { count } } = test;

console.log(count)

这将获取索引为2的计数。 这段代码相当于：

var count = test[2].count;

请注意，我们在此处使用 {} 而不是 []。这指示编译器在 键：2 处获取 count。您还可以使用此类型的解构来获取数组的 length。

const { length } = test; // same as test.length 

你可以使用计算属性名使其更加动态化：

const test = [{ count: 0 }, { count: 1 }, { count: 2 }];
const index = 2;

const { [index]: { count } } = test;

console.log(count)

- adiga

---

哇，谢谢你！所以这基本上是 variable.key 的语法糖。这就是为什么你可以进行长度解构的原因。我猜在那种情况下，我也可以从 String 对象中解构出任何方法，所以我可以提取 bind 或 prototype 方法吗？ - pourmesomecode

@TryingToLearnJS 你可以像这样获取它们。但是请注意，您不能像这样执行prototype方法 forEach()，因为它们需要一个this。长度有效是因为它是一个属性。但是您可以像这样执行数组的静态方法：const {from, isArray } = Array; var arr = from({ length: 5 }) // 返回长度为5的数组; isArray(arr) // 返回true - adiga

Answer 2

如果您将对象和数组解构视为对象和数组创建的反向操作，可能会使事情变得更容易：

 ({ key: value  } = // reverses building object with "key"
  { key: "test" }); // builds up object with "key"

 ([{ nested: value2 }] = // reverses building an array containing an object
  [{ nested: "test" }]); // builds up an array containing an object

- Jonas Wilms