数组中的嵌套对象 - 对象破坏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），我们只是在解构0th 和2nd 索引属性

由于我们讨论的是解构数组对象的主题，因此可以以更高级的方式使用它。您可以像这样在任何索引处解构项目：

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

这将获取 index 处的计数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 { 2: { count } } = test;

console.log(count)