JS中向嵌套数组添加元素异常：所有子数组均被修改

问题根源 #

你遇到的问题核心是**Array.fill()方法的特性**：当你用new Array(data[0].length).fill([])创建数组时，fill会把传入的[]这个单个数组引用复制到数组的每一个位置。也就是说，columns里的所有子数组其实指向的是同一个内存地址的数组，不管你对哪个columns[i]执行push操作，本质上都是在修改同一个数组，所以所有子数组都会同步变化。

修复方案 #

要创建每个元素都是独立空数组的数组，需要确保每个子数组都是新创建的，而不是复用同一个引用。推荐两种方法：

方法1：使用Array.from()

let columns = Array.from({ length: data[0].length }, () => []);

Array.from的第二个参数是映射函数，每次迭代都会执行() => []，返回一个全新的空数组，这样每个子数组都是独立的。

方法2：使用Array.map()（需先初始化数组元素）

let columns = new Array(data[0].length).fill(null).map(() => []);

注意：直接用new Array(n).map(...)会跳过空位，所以需要先用fill(null)填充占位符，再通过map生成新的空数组。

修复后的代码示例 #

let columns = Array.from({ length: data[0].length }, () => []);

data[0].split('').forEach((el, i) => {
    if (i < 5) {
        console.log('el: ', el, 'i: ', i);
        columns[i].push(el);
    }
});

console.log(columns);

此时执行代码，就会只有前5个子数组包含元素，其余保持为空，符合预期。

内容的提问来源于stack exchange，提问作者Paweł Czekaj