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 compiler以获得等效的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项是ignored (MDN)，我们仅在分解第0和第2个索引属性

因为，我们的主题是销毁数组对象，所以可以用更高级的方式使用它。您可以像这样在任何索引处破坏项目：

const test = [{ count: 0 }, { count: 1 }, { count: 2 }];

const { 2: { count } } = test;

console.log(count)

这将在索引2处获得计数。此代码等效于：

var count = test[2].count;

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

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

您可以使用computed object property name使它更加动态：

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

数组中的嵌套对象-破坏es6的对象

2 个答案: