Question

基本上，以下代码不起作用，我也不明白为什么。在嵌套循环中，我有一个名为“ 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)
    }
}

Answer 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)
    }
}

Answer 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; }

Answer 3

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

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

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

在这种情况下，代码将引发参考错误。

“未捕获的ReferenceError：初始化前无法访问'子代'

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

children

为什么此对象在for-of循环中进行销毁不起作用？

3 个答案: