如何将循环获取的同type对象属性合并至现有数组以得到指定结果

嘿，我明白你的需求了——每次循环拿到数据库返回的newObject后，要把它的属性合并到原数组里同type的对象上对吧？咱们来一步步调整你的代码，实现目标效果：

核心思路拆解 #

• 每次获取到newObject时，先在原数组里找到和它type一致的对象
• 把newObject的属性合并到这个匹配的对象上（两种合并方式可选，看你要不要修改原对象）

具体代码实现 #

先看同步场景（对应你给出的示例模拟） #

const array = [ { type: 'animal', color: 'green' }, { type: 'plant', color: 'red' }];

// 模拟循环里的两次数据库返回结果
const mockResponses = [
  {type: 'plant', size: 'small'},
  {type: 'animal', size: 'large'}
];

for(let i=0; i<array.length; i++){
  const newObject = mockResponses[i];
  // 找到原数组中type匹配的对象
  const matchedItem = array.find(item => item.type === newObject.type);
  
  if(matchedItem) {
    // 方式1：直接修改原对象（用Object.assign）
    Object.assign(matchedItem, newObject);
    
    // 方式2：生成新对象不修改原数组（适合需要保留原数据的场景）
    // const index = array.indexOf(matchedItem);
    // array[index] = {...matchedItem, ...newObject};
  }
}

console.log(array);
// 输出就是你想要的目标数组：
// [ { type: 'animal', color: 'green', size: 'large' }, { type: 'plant', color: 'red', size: 'small' }]

再看真实异步场景（实际数据库GET请求大多是异步的） #

如果你的数据库请求是异步的（比如用fetch或axios），得处理异步逻辑避免顺序问题，推荐用Promise.all批量处理：

const array = [ { type: 'animal', color: 'green' }, { type: 'plant', color: 'red' }];

// 模拟异步数据库请求
const fetchFromDB = (type) => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(type === 'animal' ? {type: 'animal', size: 'large'} : {type: 'plant', size: 'small'});
    }, 100);
  });
};

// 批量发起请求+合并属性
Promise.all(array.map(item => fetchFromDB(item.type)))
  .then(responses => {
    responses.forEach(newObject => {
      const matchedItem = array.find(item => item.type === newObject.type);
      if(matchedItem) Object.assign(matchedItem, newObject);
    });
    console.log(array); // 这里就能拿到合并后的目标数组
  });

关键细节提醒 #

• Array.find()：用来快速定位匹配的对象，比手动循环查找更简洁直观
• 属性合并方式：Object.assign会直接修改原对象，展开语法{...a, ...b}会生成新对象，根据你的业务需求选就行
• 异步处理：真实场景下一定要注意异步请求的顺序，用Promise.all能保证所有请求完成后再统一合并，避免数据错乱

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