JavaScript合并对象：XHR返回数组元素如何分组批量发送？

问题原因 #

你使用Object.assign只能得到最后一个元素是因为这个API的设计逻辑是将多个源对象的属性合并覆盖到同一个目标对象，你传入的多个数组元素结构完全一致，相同key的属性会被后续传入的对象依次覆盖，最终自然只剩下最后一个元素的内容。你不需要合并对象，直接将分组后的多个对象放在数组里批量提交即可。

实现步骤 #

1. 先对返回的result数组做固定长度的分组，这里以10个一组为例
2. 遍历分组后的二维数组，每组作为一个整体批量发送，不需要单条遍历
3. 可以根据你接收端的要求调整每组的长度，不需要额外做对象合并操作

示例代码 #

const data = JSON.parse(this.responseText).result;
// 分组函数，参数为原始数组、每组长度
const chunk = (arr, size) => 
  Array.from({ length: Math.ceil(arr.length / size) }, (_, i) => 
    arr.slice(i * size, i * size + size)
  );

// 按10个元素一组分组
const groupedData = chunk(data, 10);

// 遍历分组批量发送
for (const group of groupedData) {
  // 直接传递整组数组给发送方法，接收端直接解析数组即可
  sendDataToPage(group);
  await sleep(500); // 可根据需要调整每组的发送间隔
}

补充说明 #

如果你的接收端要求接收的是扁平的对象结构而不是数组，可以给每个元素加唯一前缀后再合并，比如用元素的id作为key组装成一个大对象：

// 适用于需要合并成单个对象提交的场景
const mergedObj = data.reduce((acc, item) => {
  acc[item.id] = item;
  return acc;
}, {});
sendDataToPage(mergedObj);

这种方式不会出现属性覆盖的问题，每个元素都可以通过自身id作为key被单独取到。

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