数组中的嵌套对象-破坏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文档和资料，但是找不到上面提到的方案的很好的解释。

谢谢！

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;

请注意，我们在这里使用{}而不是[] 。 这指示编译器从键处获取count ： 2 。 您还可以使用这种类型的解构来获取数组的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) 

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