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

Question

Basically the following code doesn't work and I don't understand why. in the nested loop, I have a variable called "children" that is an array containing objects with fields called children (like in a DOM tree for instance). But it looks like their is a name conflict when I try to desctructure each element of the array. Since I'm using let they should have different scope (at least, the destructured variable should hide the "parent" one). It's likely that I'm wrong but I would like to understand why.

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

Answer 1

By taking this statement,

for (let {children} of children)

you try to create a new local variable and take the same named variable as source for getting the elements for the new variable.

This does not work, because there is no distinction between both variables.

It would work, if you rename the target or source variable.

 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

You're attempting to get a property children from the wrong place. Remove the second for loop or rename your variable:

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

Or:

 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

The problem is in the nested for..of . See the line

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

Here you are trying to get children property of children which doesnot make sense. Due to let {children} it creates a local variable children which is currently no initialized. Now the second children doesnot refer to parent array. But it refers to uninitialized variable in local scope.

The code in this case will throw a reference error.

"Uncaught ReferenceError: Cannot access 'children' before initialization"

Consider an object with name children and it property name is also children .You are doing same as below.

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