JavaScript拼接数组时所有元素均为最后赋值结果的问题如何解决？

问题根因 #

该问题是JavaScript引用类型特性导致的：你代码中全程操作的是同一个b数组里的同一个对象，concat拼接数组时只会把对象的引用追加到新数组中，不会创建独立的新对象。后续修改b[0].Value时，所有指向该对象的引用都会同步更新，因此最终数组所有元素都显示最后一次赋值的结果。

代码修正方案 #

你只需要每次循环时创建独立的新对象/数组，切断引用关联即可，同时可以用push代替concat，避免每次拼接都生成新数组，性能更高：

function test1() {
    const a = [];
    for (let i = 0; i < 5; i++) {
        // 每次循环创建新的数组和对象，互不影响
        const b = [{ Value: i }];
        a.push(...b);
    }
    console.log(a);
}

如果你的b是提前定义的模板对象，每次循环需要基于模板修改，可以用浅拷贝：

// 提前定义的模板
const templateB = [{ Value: 0 }];
function test1() {
    const a = [];
    for (let i = 0; i < 5; i++) {
        // 浅拷贝对象+覆盖属性，和原模板切断引用
        const newB = [{ ...templateB[0], Value: i }];
        a.push(...newB);
    }
    console.log(a);
}

CSV业务场景优化实现 #

针对你提到的CSV处理导出JSON的场景，有以下优化点：

• 不需要额外定义中间数组b，读取到每行数据后直接生成新对象存入结果数组即可
• 大文件场景可以使用流式逐行读取，避免全量加载导致页面卡顿
• 导出时用Blob生成下载链接，性能更高

参考实现代码（浏览器端）：

async function csvToJson(file) {
    const result = [];
    // 读取CSV文本
    const csvText = await file.text();
    // 拆分所有行，兼容不同系统换行符，过滤空行
    const rows = csvText.split(/\r?\n/).filter(row => row.trim());
    // 提取表头（如果你的CSV没有表头，可跳过该步）
    const headers = rows[0].split(',').map(item => item.trim());

    // 逐行处理数据，有表头就从第2行开始，无表头从第0行开始
    for (let i = 1; i < rows.length; i++) {
        const rowValues = rows[i].split(',').map(item => item.trim());
        const rowObj = {};
        // 表头和值映射成对象
        headers.forEach((header, index) => {
            rowObj[header] = rowValues[index];
        });
        result.push(rowObj);
    }

    // 导出JSON文件
    const blob = new Blob([JSON.stringify(result, null, 2)], { type: 'application/json' });
    const downloadUrl = URL.createObjectURL(blob);
    const downloadLink = document.createElement('a');
    downloadLink.href = downloadUrl;
    downloadLink.download = 'output.json';
    downloadLink.click();
    // 释放内存
    URL.revokeObjectURL(downloadUrl);

    return result;
}

内容的提问来源于stack exchange，提问作者BH.Sean