如何在JavaScript中用匹配数组对象填充数组内对象的空值

我正在尝试创建一个可根据已有信息自动填充空字段的表格，但不知如何实现。示例代码如下：

//The 'doYouLike' field is what I'm trying to fill out

const CheckingFruits = () => {
  var fruits = [
    { name: 'orange', color: 'orange', doYouLike: '' },
    { name: 'banana', color: 'yellow', doYouLike: '' },
    { name: 'pinneaple', color: 'yellow', doYouLike: '' },
    { name: 'apple', color: 'red', doYouLike: '' },
  ];

//Taking this info I want to fill it out, but I don't know the logic to apply it
   const doILke = [
    { name: 'orange', answer: 'yes' },
    { name: 'banana', answer: 'no' },
    { name: 'pinneaple', answer: 'no' },
    { name: 'apple', answer: 'yes' },
  ];

  return (
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Color</th>
          <th>Do you like?</th>
        </tr>
      </thead>
      <tbody>
        {fruits.map((fruit, id) => (
          <tr key={id}>
            <td>{fruit.name}</td>
            <td>{fruit.color}</td>
      //This is were I would like to show the answer
            <td>{fruit.doYouLike}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};

CheckingFruits()

我已尝试多日在YouTube及技术论坛寻找答案但无果，目前仅能实现单个对象的查找：

function filterByOneFruit(fruit, fruitName) {
    return fruit.filter((item) => item.name=== name);

const foundTheFruit= filterByOneFruit(
    fruits,'apple'
);

//Output: { name: 'apple', color: 'red', doYouLike: '' }

但不知如何批量查找并修改多个值，希望能得到帮助。

方法一：提前构建映射关系，批量填充数组 #

先把doILke数组转换成以水果名为键、答案为值的对象，这样后续查找的时间复杂度是O(1)，效率更高。然后遍历fruits数组，给每个元素的doYouLike字段赋值。

修改后的代码如下：

const CheckingFruits = () => {
  const fruits = [
    { name: 'orange', color: 'orange', doYouLike: '' },
    { name: 'banana', color: 'yellow', doYouLike: '' },
    { name: 'pinneaple', color: 'yellow', doYouLike: '' },
    { name: 'apple', color: 'red', doYouLike: '' },
  ];

  const doILke = [
    { name: 'orange', answer: 'yes' },
    { name: 'banana', answer: 'no' },
    { name: 'pinneaple', answer: 'no' },
    { name: 'apple', answer: 'yes' },
  ];

  // 构建水果名到答案的映射
  const likeMap = doILke.reduce((map, item) => {
    map[item.name] = item.answer;
    return map;
  }, {});

  // 批量填充doYouLike字段（创建新数组，不修改原数据）
  const filledFruits = fruits.map(fruit => ({
    ...fruit,
    doYouLike: likeMap[fruit.name] || ''
  }));

  return (
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Color</th>
          <th>Do you like?</th>
        </tr>
      </thead>
      <tbody>
        {filledFruits.map((fruit, id) => (
          <tr key={id}>
            <td>{fruit.name}</td>
            <td>{fruit.color}</td>
            <td>{fruit.doYouLike}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};

CheckingFruits();

方法二：渲染时直接查找对应答案 #

如果不想修改原数组，可以在map渲染的时候，直接从doILke数组里找到对应水果的答案。这种方式代码更直观，但如果数组较大，性能不如方法一（每次查找是O(n)）。

代码示例：

const CheckingFruits = () => {
  const fruits = [
    { name: 'orange', color: 'orange', doYouLike: '' },
    { name: 'banana', color: 'yellow', doYouLike: '' },
    { name: 'pinneaple', color: 'yellow', doYouLike: '' },
    { name: 'apple', color: 'red', doYouLike: '' },
  ];

  const doILke = [
    { name: 'orange', answer: 'yes' },
    { name: 'banana', answer: 'no' },
    { name: 'pinneaple', answer: 'no' },
    { name: 'apple', answer: 'yes' },
  ];

  return (
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Color</th>
          <th>Do you like?</th>
        </tr>
      </thead>
      <tbody>
        {fruits.map((fruit, id) => {
          // 查找当前水果的对应答案
          const likeItem = doILke.find(item => item.name === fruit.name);
          return (
            <tr key={id}>
              <td>{fruit.name}</td>
              <td>{fruit.color}</td>
              <td>{likeItem ? likeItem.answer : ''}</td>
            </tr>
          );
        })}
      </tbody>
    </table>
  );
};

CheckingFruits();

补充说明 #

• 方法一中使用扩展运算符...fruit创建新对象，是为了避免修改原数组；如果不需要保留原数组，也可以直接修改原对象：fruit.doYouLike = likeMap[fruit.name]。
• 两种方法都处理了水果名不匹配的情况，默认显示空字符串，避免页面出现undefined。

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