为什么 for-of 循环中的这个对象解构不起作用？答案

【问题标题】：Why this object destructuring in for-of loop doesn't work?为什么 for-of 循环中的这个对象解构不起作用？
【发布时间】：2019-09-27 00:18:56
【问题描述】：

基本上以下代码不起作用，我不明白为什么。在嵌套循环中，我有一个名为“children”的变量，它是一个包含对象的数组，其中包含名为 children 的字段（例如在 DOM 树中）。但是当我尝试解构数组的每个元素时，它们看起来像是名称冲突。由于我使用的是 let 他们应该有不同的范围（至少，解构变量应该隐藏“父”变量）。可能我错了，但我想了解原因。

let o = {
    children: [
     {children: [{}, {}, {}]},
     {children: [{}, {}, {}]}
    ]
};
for (let {children} of o.children) {
    console.log(children)
    for (let {children} of children) {
        console.log(children)
    }
}

【问题讨论】：

您只有两个级别的children，但您正试图解构三个（o.children、let {children} 和 let {children}）。
let {children} of children 这将不起作用并且会抛出 ReferenceError，因为在声明它之前使用了 {children}，因为它与 children 具有相同的名称。此外，第二个 for 循环不能工作，解构也不能工作，因为在那个级别你已经在循环空对象了。
为什么你还有两个for...of 循环？ let {children} of o.children 已经处理了顶级 children 键和二级 children

标签： javascript arrays loops object ecmascript-6

【解决方案1】：

通过此声明，

for (let {children} of children)

您尝试创建一个新的局部变量并使用与源相同的命名变量来获取新变量的元素。

这不起作用，因为两个变量之间没有区别。

如果您重命名目标或源变量，它会起作用。

let o = {
        children: [
            { children: [{ children: [{}, {}, {}] }, { children: [{}, {}, {}] }] },
            { children: [{ children: [{}, {}, {}] }, { children: [{}, {}, {}] }] },
        ]
    };

for (let { children } of o.children) {
    console.log(children)
    for (let { children: c } of children) { // rename here
        console.log(c)
    }
}

【讨论】：

是的，我认为for 声明中的第二个children 位于“时间死区”中，因此尝试引用它会引发ReferenceError。 .?不过，of 之后的内容应该是对在外部范围内 的引用。我想知道规范是否有理由说尝试首先引用尚未声明的 children，如果 of 之后的内容显然还不能引用它

【解决方案2】：

您试图从错误的位置获取属性children。删除第二个 for 循环或重命名变量：

let o = {
    children: [
     {children: [{}, {}, {}]},
     {children: [{}, {}, {}]}
    ]
};
for (let { children } of o.children) {
  console.log(children);
}

或者：

let o = {
    children: [
     {children: [{children: "child"}, {children: "child"}, {children: "child"}]},
     {children: [{children: "child"}, {children: "child"}, {children: "child"}]}
    ]
};
for (let { children } of o.children) {
  console.log(children);
  for (let { children: childrenB } of children) {
    console.log(childrenB);
  }
}

.as-console-wrapper { max-height: 100% !important; top: auto; }

【讨论】：

“你正试图从一个空对象 {} 中获取一个属性 children”。你能解释一下吗？ OP 在哪里尝试从 empty object 获取属性？
哎呀，我的坏@MaheerAli

【解决方案3】：

问题出在嵌套的for..of 中。见行

for (let {children} of children){...}

在这里，您试图获取 children 的 children 属性，这是没有意义的。由于let {children}，它创建了一个当前未初始化的局部变量children。现在第二个children 不引用父数组。但它指的是本地范围内的未初始化变量。

这种情况下的代码会抛出引用错误。

“未捕获的 ReferenceError：在初始化之前无法访问 'children'”

考虑一个名称为children 的对象，它的属性名称也是children。您正在执行以下操作。

let children = {children:'something'}
{
  let {children} = children;
}

【讨论】：

作为旁注，您可以添加它会引发 ReferenceError :)