javascript - 将数组转换为树

Question

有人可以解释这段代码吗？我不明白“for”结构中的内容。

 var tree = {}

function addToTree(tree, array) { 
   for (var i = 0, length = array.length; i < length; i++) {
       tree = tree[array[i]] = tree[array[i]] || {}
   }
}

addToTree(tree, ["a", "b", "c"])
addToTree(tree, ["a", "b", "d"])

/*{
    "a": {
        "b": {
            "c": {},
            "d": {}
        }
    }
}*/

Answer 1

我扩展了for循环体并添加了一些注释，试图使事情更明确。

for (var i = 0, length = array.length; i < length; i++) {
   // Assign the current item in the array to a variable
   var current = array[i];

   // If there is no property on the "tree" object corresponding to the value of 
   // "current", set this property to a new object
   if (!tree[current]) {
      tree[current] = {};
   }

   // Set the "tree" variable to the field in the "tree" object whose 
   // name corresponds to "current". On the next loop iteration, "tree" will
   // refer to this "child" object, resulting in a tree-like object being
   // created as we iterate.
   tree = tree[current];
}

Answer 2

tree在对函数内部的引用掩盖了具有相同名称的外部变量之前，这令人困惑。但是由于引用在 JavaScript 中的工作方式，它最终还是会修改外部变量。

这是它的作用，一步一步，只考虑第一次调用：

1. tree使用（即）的引用{}并["a", "b", "c"]作为参数调用函数
2. 循环数组。
   1. 检查树中是否已经存在属性“a”；如果没有，就用价值创造它{}
   2. 完整的树现在看起来像{ a : {} }
   3. 现在考虑我们正在处理的树是tree.a（它是空的）
   4. 检查当前树中是否已经存在属性“b”；如果没有，就用价值创造它{}
   5. 完整的树现在看起来像{ a : { b: {} } }
   6. 现在考虑我们正在处理的树是tree.a.b（它是空的）
   7. 检查当前树中是否已经存在属性“c”；如果没有，就用价值创造它{}
   8. 完整的树现在看起来像{ a : { b: { c: {} } } }
   9. 现在考虑我们正在处理的树是tree.a.b.c（它是空的）
3. 功能结束