如何在JavaScript中为已有键追加值并避免键重复？

需求 #

分块接收键值文本数据，最终要生成一个没有重复键的JSON对象——如果同一个键多次出现，就把对应的值拼接成单个字符串。

原尝试代码 #

var jsonData = {};
var incoming = {
  "p1": "value1",
  "p2": "value2",
  "p3": "value3",
  "p1": "value4"
};

for (var key in incoming) {
  if (key in jsonData) {
    key = key + p[key]; // 想拼接值但逻辑错误
    jsonData[key].push(incoming[key]);
  } else {
    jsonData[key] = [incoming[key]];
  }
}

console.log(JSON.stringify(jsonData));

期望输出 #

{"p1":"value1value4","p2":"value2","p3":"value3"}

问题分析与解决 #

首先要明确：JavaScript里直接定义带重复键的对象时，后面的键会直接覆盖前面的。你写的incoming对象里，第一个p1: "value1"会被p1: "value4"覆盖，原代码根本拿不到value1，这也是原代码达不到预期的核心问题之一。

如果是分块接收数据（比如多次收到不同的键值对），可以按下面的方式实现：

正确代码 #

var jsonData = {};

// 模拟分块接收的两组数据
const chunk1 = { p1: "value1", p2: "value2" };
const chunk2 = { p3: "value3", p1: "value4" };

// 处理单块数据的函数
function mergeChunk(chunk) {
  for (const key in chunk) {
    if (jsonData[key]) {
      // 键已存在，拼接文本值
      jsonData[key] += chunk[key];
    } else {
      // 键不存在，直接赋值
      jsonData[key] = chunk[key];
    }
  }
}

// 依次处理所有分块
mergeChunk(chunk1);
mergeChunk(chunk2);

console.log(JSON.stringify(jsonData));

运行结果 #

{"p1":"value1value4","p2":"value2","p3":"value3"}

核心要点 #

1. 分块处理：不要一次性把所有重复键放到同一个对象里，而是分批次接收并处理，这样能保留每个键的所有值。
2. 值拼接逻辑：遇到已存在的键，直接将新值拼接到已有字符串后面，而不是用数组存储（原代码用数组的逻辑不符合期望输出）。
3. 避免错误操作：原代码里的key = key + p[key]是错误的——既没有定义p变量，也不应该修改键名，我们要的是合并值，不是改键。

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