新手技术问询：对象数组新增对象或更新指定属性的实现问题

需求说明 #

我有一个食谱对象数组，现有一个新食谱对象，需要：

• 检查新对象是否与数组内的对象存在相同的nome（名称）键
• 若为全新对象（无同名），则添加至数组
• 若已存在同名对象，则仅更新该对象的ingredienti（配料）属性

想了解是否可以用map函数实现这个功能，作为编程新手容易混淆。另外我写的代码导师说没问题，但运行后查看数组没得到预期结果，附上我的代码：

原代码 #

var ricette = [
  {
    nome: "Carbonara",
    ingredienti: ["guanciale", "uovo", "sale"],
    tipologia: "primo",
  },
  {
    nome: "Amatriciana",
    ingredienti: ["guanciale", "pecorino", "pomodoro"],
    tipologia: "primo",
  },
  {
    nome: "Cacio e Pepe",
    ingredienti: ["pepe", "pecorino"],
    tipologia: "primo",
  },
  {
    nome: "Cicoria",
    ingredienti: ["aglio", "peperoncino"],
    tipologia: "contorno",
  },
];

let oNuovo = {
  nome: "Tiramisu",
  ingredienti: ["uovo", "mascarpone", "savoiardo"],
  tipologia: "dolce",
};

function aggiungiRicetta(ricetta) {
  
  let cerca = (el) => ricetta.nome === el.nome;
  let trovato = ricette.findIndex(cerca); 
  if (trovato === -1) {
    ricette.push(ricetta);
  } else {
    ricette[trovato].ingredienti = ricetta.ingredienti;
    
  }
}

console.log(ricetta)

原代码问题分析 #

你的代码逻辑本身没问题，没得到预期结果是两个小错误：

1. 最后一行打印的变量名写错了：应该是ricette（数组变量的复数形式），不是ricetta
2. 没有调用aggiungiRicetta(oNuovo)函数，导致添加/更新逻辑根本没执行

用Map函数实现的方案 #

当然可以用map实现，map的特点是返回一个新数组，不会直接修改原数组（适合需要保留原数组的场景）。以下是实现代码：

方案代码 #

function aggiungiOAggiornaConMap(ricette, nuovaRicetta) {
  // 先检查是否存在同名食谱
  const esiste = ricette.some(el => el.nome === nuovaRicetta.nome);
  
  if (!esiste) {
    // 不存在则返回原数组+新食谱的新数组
    return [...ricette, nuovaRicetta];
  } else {
    // 存在则遍历数组，更新对应食谱的配料
    return ricette.map(el => {
      if (el.nome === nuovaRicetta.nome) {
        // 返回新对象，避免修改原对象（可选，若允许修改原对象可直接改el.ingredienti）
        return {...el, ingredienti: nuovaRicetta.ingredienti};
      }
      // 其他食谱直接返回
      return el;
    });
  }
}

// 使用示例
const ricetteAggiornate = aggiungiOAggiornaConMap(ricette, oNuovo);
console.log(ricetteAggiornate);

逻辑说明 #

• map遍历数组的每个元素，对每个元素做判断：
  • 如果是同名食谱，用扩展运算符...复制原对象的所有属性，再覆盖ingredienti属性，返回新对象
  • 非同名食谱直接返回原元素
• 如果不存在同名食谱，用扩展运算符把原数组元素和新食谱合并成新数组返回

修复后的原代码（修改原数组版本） #

如果你想直接修改原数组，修复后的代码如下：

var ricette = [
  {
    nome: "Carbonara",
    ingredienti: ["guanciale", "uovo", "sale"],
    tipologia: "primo",
  },
  {
    nome: "Amatriciana",
    ingredienti: ["guanciale", "pecorino", "pomodoro"],
    tipologia: "primo",
  },
  {
    nome: "Cacio e Pepe",
    ingredienti: ["pepe", "pecorino"],
    tipologia: "primo",
  },
  {
    nome: "Cicoria",
    ingredienti: ["aglio", "peperoncino"],
    tipologia: "contorno",
  },
];

let oNuovo = {
  nome: "Tiramisu",
  ingredienti: ["uovo", "mascarpone", "savoiardo"],
  tipologia: "dolce",
};

function aggiungiRicetta(ricetta) {
  let cerca = (el) => ricetta.nome === el.nome;
  let trovato = ricette.findIndex(cerca); 
  if (trovato === -1) {
    ricette.push(ricetta);
  } else {
    ricette[trovato].ingredienti = ricetta.ingredienti;
  }
}

// 调用函数执行逻辑
aggiungiRicetta(oNuovo);
// 打印正确的数组变量
console.log(ricette);

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