1. 问题背景与常见误区
在JavaScript中，有时我们需要根据特定逻辑，在循环中动态地构建一个具有深层嵌套结构的对象，例如 l:num, r:{l:num, r:{l:num, r:{...}}}。初学者在尝试实现这种结构时，常会遇到一个问题：在循环中不断地向同一个顶层对象的属性赋值，导致之前的嵌套结构被覆盖，最终只剩下最外层和最后一层嵌套。
考虑以下初始尝试代码示例：
let num = 6;
if (num < 13 && num > 1) {
let remaining = num - 1;
let result = {
l: num,
r: remaining
};
while (remaining <= 12 && remaining >= 1) {
let o = {
l: num,
r: remaining
}
// 问题所在：result["r"] 始终指向顶层对象的 'r' 属性
result["r"] = o;
console.log(result, o);
remaining--
}
console.log(result)
} else {
throw new Error('Invalid number');
}这段代码的问题在于，result["r"] = o; 这一行始终修改的是最开始创建的 result 对象的 r 属性。在每次循环中，新的 o 对象都会覆盖前一个 o 对象在 result.r 位置上的引用，因此无法形成深层嵌套。为了实现深层嵌套，我们需要在每次循环中更新一个指向当前最内层对象的引用。
2. 解决方案一：通过引用跟踪构建嵌套对象
要正确地在循环中构建深层嵌套对象，关键在于维护一个指向当前最深层嵌套对象的引用。这样，我们就可以在该引用上添加新的嵌套层。
立即学习“Java免费学习笔记（深入）”；
let num = 6;
if (num < 13 && num > 1) {
let remaining = num - 1;
let result = {
l: num,
r: remaining
};
// 关键：引入一个可变的引用 'currentRef'，初始指向 'result' 对象
let currentRef = result;
while (remaining <= 12 && remaining >= 1) {
let o = {
l: num,
r: remaining
}
// 1. 将新创建的 'o' 对象赋值给 'currentRef' 的 'r' 属性
// 2. 更新 'currentRef'，使其指向刚刚被赋值的新对象 'o'
currentRef = currentRef.r = o;
remaining--;
}
console.log(result);
} else {
throw new Error('Invalid number');
}代码解析：
- let currentRef = result;：我们初始化一个 currentRef 变量，它最初指向 result 对象。这个 currentRef 将在循环中不断更新，始终指向当前最内层的对象。
- currentRef = currentRef.r = o;：这是实现嵌套的关键一步。
- currentRef.r = o;：这行代码将新创建的 o 对象赋值给 currentRef 所指向对象的 r 属性。
- currentRef = ...;：接着，currentRef 被更新为指向刚刚赋值的 o 对象。这样，在下一次循环迭代时，currentRef 就会指向新创建的 o 对象，从而可以在它的 r 属性上继续添加下一层嵌套。
注意事项： 在初始 result 对象中 r: remaining 的赋值 (result = { l: num, r: remaining };)，其 r 属性会在第一次循环时立即被 currentRef.r = o; 覆盖。因此，除了最内层的对象，其他层的 r 属性最终都将是一个嵌套对象，而不是原始的 remaining 值。
3. 解决方案二：从内向外构建（函数式编程风格）
除了在循环中逐步跟踪引用，我们还可以采用从内向外构建的策略。这种方法通常更简洁、更具函数式编程风格，并且可以避免在循环中修改外部引用。Array.from 结合 reduce 方法非常适合这种场景。
/**
* 创建一个指定嵌套深度的对象结构
* @param {number} depth - 嵌套的层数
* @returns {object} - 构建完成的嵌套对象
*/
const createNested = depth => {
// 创建一个长度为 depth 的数组，用于 reduce 迭代
// reduce 从右向左（或从左向右，取决于实现）构建
// 初始值 '1' 将作为最内层对象的 'r' 属性值
return Array.from({ length: depth }).reduce(r => ({ l: depth, r }), 1);
};
console.log(createNested(6));
// 预期输出：{l: 6, r: {l: 6, r: {l: 6, r: {l: 6, r: {l: 6, r: {l: 6, r: 1}}}}}}代码解析：
- Array.from({ length: depth })：创建一个长度为 depth 的空数组。这个数组本身的内容不重要，我们只利用它的长度来驱动 reduce 迭代。
- .reduce(r => ({ l: depth, r }), 1)：
- reduce 方法从数组的第一个元素开始迭代，但在这里，我们关注的是其累加器 r。
- 1 是 reduce 的初始值。在第一次迭代时，r 将是 1，它作为最内层对象的 r 属性值。
- 在每次迭代中，r => ({ l: depth, r }) 这个回调函数会接收当前的累加器 r（即前一次迭代构建的对象或初始值），然后返回一个新的对象 { l: depth, r: r }。这个新对象将成为下一次迭代的 r。
- 这个过程有效地从最内层的 1 开始，一层一层地向外包裹，最终形成所需的多层嵌套结构。
4. 解决方案三：从内向外构建（显式循环）
如果偏好使用显式的 for 循环，也可以实现从内向外构建的逻辑。
/**
* 创建一个指定嵌套深度的对象结构
* @param {number} depth - 嵌套的层数
* @returns {object} - 构建完成的嵌套对象
*/
const createNestedLoop = depth => {
let result = 1; // 初始值作为最内层对象的 'r' 属性
for (let i = 0; i < depth; i++) {
// 每次迭代都创建一个新对象，将当前的 result 作为其 'r' 属性
// 然后更新 result 为这个新对象，实现从内向外的包裹
result = { l: depth, r: result };
}
return result;
};
console.log(createNestedLoop(6));
// 预期输出：{l: 6, r: {l: 6, r: {l: 6, r: {l: 6, r: {l: 6, r: {l: 6, r: 1}}}}}}代码解析：
- let result = 1;：result 变量被初始化为最内层 r 属性的值。
- for (let i = 0; i
- result = { l: depth, r: result };：在每次迭代中，一个新的对象 { l: depth, r: result } 被创建。这里的 result 是前一次迭代中构建的对象（或初始值 1）。新创建的对象会成为下一次迭代的 result，从而实现层层包裹。
5. 总结与最佳实践
本文介绍了三种在JavaScript中动态构建深层嵌套对象结构的方法：
- 引用跟踪的 while 循环：适用于需要基于循环条件逐步构建的场景。它通过维护一个指向当前最内层对象的引用来避免属性覆盖。此方法较为直观，但需要小心管理引用。
- reduce 方法：这是一种函数式编程风格的解决方案，通过从内向外地“包裹”对象来构建结构。它简洁、优雅，且通常被认为是更现代的JavaScript实践。
- 显式 for 循环（从内向外）：与 reduce 方法的逻辑类似，但使用传统的 for 循环实现。对于不熟悉 reduce 的开发者来说，可能更容易理解。
在实际开发中，推荐优先考虑使用 reduce 或显式循环从内向外构建的方法，因为它们通常更简洁、更易于理解和维护，并且避免了在循环中对外部变量进行复杂引用管理。选择哪种方法取决于具体的业务需求、团队编码规范以及对函数式编程范式的熟悉程度。
