JavaScript递归打印二叉树：二维数组所有行被错误修改的问题求解

你的问题根源在于数组初始化时的引用共享，这是JavaScript里很容易踩的坑！

为什么所有子数组都会被修改？ #

看你初始化output的这行代码：

let output = new Array(depth).fill(new Array(width).fill(''));

fill方法在这里做了一件“偷懒”的事：它把new Array(width).fill('')这个数组的引用重复填充到了output的每个索引位置。也就是说，output[0]、output[1]……所有子数组其实都是同一个数组对象的别名。不管你修改哪一层的哪个位置，本质上都是在修改同一个底层数组，所以最后所有层都会变成一样的内容。

怎么修复？ #

你需要确保output里的每个子数组都是独立的新数组，而不是共享引用。可以用以下两种方式替换初始化代码：

方式1：使用Array.from

let output = Array.from({ length: depth }, () => new Array(width).fill(''));

Array.from的第二个参数是映射函数，每次迭代都会调用它创建一个新的子数组，完美避免引用共享。

方式2：手动循环创建

如果你更习惯循环写法，也可以这样：

let output = [];
for (let i = 0; i < depth; i++) {
    output.push(new Array(width).fill(''));
}

每次循环都创建一个新的子数组并push进去，每个子数组都是独立的。

修复后的测试效果 #

当你用上述方式初始化output后，再运行你的测试用例（根节点1，左子节点2），就能得到预期的输出：

[ ['', '1', ''], ['2', '', ''] ]

另外提个小建议：你递归里的水平位置计算在更深的树里可能会有偏差（比如深度3时，左右子节点的偏移量应该是Math.pow(2, depth - level - 2)而不是固定±1），不过这是另一个问题了，当前的核心问题已经解决。

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