JavaScript动态创建嵌套对象代码中连续赋值语句原理解析

你提到的base = base[ names[i] ] = base[ names[i] ] || {}是典型的JavaScript连续赋值语句，遵循右结合运算规则，也就是从最右侧开始向左依次执行，完整运行逻辑拆分如下： #

拆分执行步骤（从右到左） #

• 第一步：计算最右侧的base[ names[i] ] || {}
  利用JavaScript逻辑或||的短路特性：如果当前base对象上已经存在names[i]对应的属性，且属性值为真值（已存在的对象、非空值等），就直接返回这个已有值；如果属性不存在、值为undefined/null等假值，就返回新的空对象{}。这一步的作用是保证当前层级的属性一定有可用的对象值，且不会覆盖已存在的内容。
• 第二步：将第一步得到的结果赋值给base[ names[i] ]
  给当前base对象的对应属性完成赋值，确保该属性确实存在于当前对象上。
• 第三步：将同样的结果赋值给变量base
  把循环中用到的base变量指向刚处理完的子对象，下一轮循环就可以基于这个子对象继续创建更深层级的属性。

结合示例走读完整流程 #

以调用createNestedObject( window, ["shapes", "triangle", "points"] )为例，三轮循环的执行过程如下：

1. 第一轮循环（i=0，当前base是window，names[i]为shapes）
   • 计算window.shapes || {}：初始状态下window没有shapes属性，返回空对象{}
   • 给window.shapes赋值为这个空对象
   • 把base变量更新为window.shapes
2. 第二轮循环（i=1，当前base是window.shapes，names[i]为triangle）
   • 计算base.triangle || {}：shapes对象初始没有triangle属性，返回空对象{}
   • 给shapes.triangle赋值为这个空对象
   • 把base变量更新为shapes.triangle
3. 第三轮循环（i=2，当前base是shapes.triangle，names[i]为points）
   • 计算base.points || {}：triangle对象初始没有points属性，返回空对象{}
   • 给triangle.points赋值为这个空对象
   • 把base变量更新为triangle.points
     循环结束后，就得到了完整的嵌套对象window.shapes.triangle.points。如果中间某层级的对象已经提前存在，逻辑或会直接复用已有对象，不会清空原有属性。

内容的提问来源于stack exchange，提问作者galacticq