我很难理解下面的代码以及它是如何工作的。
var createNestedObject = function( base, names ) {
for( var i = 0; i < names.length; i++ ) {
base = base[ names[i] ] = base[ names[i] ] || {};
}
};
// Usage:
createNestedObject( window, ["shapes", "triangle", "points"] );
// Now window.shapes.triangle.points is an empty object, ready to be used.
这是来自这个问答:Javascript:如何使用数组
给出的对象名动态创建嵌套对象你能解释一下base = base[ names[i] ] = base[ names[i] ] || {};
是如何工作的吗?
我的思维过程卡住了,因为上面的代码。快把我逼疯了
您能解释一下
base = base[ names[i] ] = base[ names[i] ] || {}
;作品吗?
假设我们在循环的第一个回合,那么base
是window
,i
是0
,names[i]
是"shapes"。首先计算的部分是base[ names[i] ] || {}
。如果存在则解析为window.shapes
,如果不存在则解析为空对象。
接下来,我们向左移动到这个赋值:
base[ names[i] ] = base[ names[i] ] || {};
这将赋值给window.shapes
无论我们从右边得到什么。因此,如果window.shapes
已经存在,我们将其赋值给自身,没有任何变化。如果不存在,则给它赋值一个空对象。
再向左移动一次:
base = base[ names[i] ] = base[ names[i] ] || {};
我们现在要重新分配base
变量,以指向我们刚刚创建的对象(或我们重用的对象)。所以在下一轮循环中,base
不再是window
,而是window.shapes
。
base
为"window.shapes
",i
为"1
",names[i]
为"三角角"。由于base
现在是window.shapes
,我们正在探测和分配一个更深一层的对象。所以在第一次循环中,我们确保window.shapes
存在,这次我们检查window.shapes.triangle
是否存在。因此,它将继续,在每次循环中越来越深入对象。
这行代码一次做了好几件事——可能太多了。理解它的一种方法是把事情分开,分成不同的步骤:
// Original line
base = base[ names[i] ] = base[names[i]] || {};
// Add parentheses according to JavaScript operator preferences
base = base[ names[i] ] = ( base[names[i]] || {} );
// Separate the two assignments
base[ names[i] ] = base[names[i]] || {};
base = base[ names[i] ];
// Replace the use of || as null coalescing operator with the ?: operator
base[ names[i] ] = base[names[i]] ? base[names[i]] : {};
base = base[ names[i] ];
// Replace the ?: operator with if-else
if (base[names[i]]) {
base[names[i]] = base[names[i]]
} else {
base[names[i]] = {}
}
base = base[ names[i] ];
// Swap if and else branches
if (!base[names[i]]) {
base[names[i]] = {}
} else {
base[names[i]] = base[names[i]]
}
base = base[ names[i] ];
// Get rid of the else branch as it is not doing anything
if (!base[names[i]]) {
base[names[i]] = {}
}
base = base[ names[i] ];