需要代码解释(它是如何工作的以及为什么)



我很难理解下面的代码以及它是如何工作的。

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] ] || {};作品吗?

假设我们在循环的第一个回合,那么basewindow,i0,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] ];

相关内容

  • 没有找到相关文章