使用嵌套 for 循环和 return 修改对象数组比较两个对象的值

Question

我有两个对象数组：

const testArr1 = [
      {
        event: "Ryan's birthday",
        time: "4:00",
      },
      {
        event: "Steves's birthday",
        time: "2:00",
      },
      {
        event: "Helen's birthday",
        time: "1:00",
      },
      {
        event: "Paola's birthday",
        time: "3:00",
      },
      {
        event: "Jared's birthday",
        time: "9:00",
      },
    ];

和

const testArr2 = [
      {
        time: "4:00",
        temp: 41,
      },
      {
        time: "6:00",
        temp: 42,
      },
      {
        time: "8:00",
        temp: 43,
      },
      {
        time: "1:00",
        temp: 44,
      },
      {
        time: "3:00",
        temp: 45,
      },
      {
        time: "9:00",
        temp: 46,
      },
    ];

我想创建一个函数，它接受这两个对象数组和 return 一个名为 dataToDisplay 的新对象数组。 dataToDisplay 应包含与事件相关的对象。

我希望函数 getDataToDisplay 通过比较 time 键的 testArr1 和 testArr2 值来查看事件是否有可用的温度数据，然后给我一组对象，当 time 值匹配时具有相关的 temp 数据，或者当 time 值不匹配时具有 no matching data found 注释。

我的问题是，使用我现在构建的函数，一个对象在每次迭代中被推送到 dataToDisplay return比较时间值时为false，所以有很多重复数据。

函数如下：

const getDataToDisplay = (testArr1, testArr2) => {
  const dataToDisplay = [];

  for (let i = 0; i < testArr1.length; i++) {
    for (let j = 0; j < testArr2.length; j++) {
      let objToPush = {};

      //if times in both objects are equal, push an object containing event, time, and temp value at that time to dataToDisplay
      //break and move on if times are equal
      if (testArr1[i].time === testArr2[j].time) {
        Object.assign(objToPush, {
          event: testArr1[i].event,
          time: testArr1[i].time,
          temp: testArr2[j].temp,
        });
        dataToDisplay.push(objToPush);
        break;
      } else {
        //if times in both objects are NOT equal, push an object containing event, time, and a temp value of "no matching data found"
        Object.assign(objToPush, {
          event: testArr1[i].event,
          time: testArr1[i].time,
          temp: "no matching data found",
        });
        //this is pushing an object every time the condition returns false
        //I only want one object returned if false
        dataToDisplay.push(objToPush);
      }
    }
  }
  return dataToDisplay;
};

调用函数时会发生什么

console.log(getDataToDisplay(testArr1, testArr2));
    //logs
    //     [
    //   {
    //     "event": "Ryan's birthday",
    //     "time": "4:00",
    //     "temperature": 41
    //   },
    //   {
    //     "event": "Steves's birthday",
    //     "time": "2:00",
    //     "temperature": "no matching data found"
    //   },
    //   {
    //     "event": "Steves's birthday",
    //     "time": "2:00",
    //     "temperature": "no matching data found"
    //   },
    //   {
    //     "event": "Steves's birthday",
    //     "time": "2:00",
    //     "temperature": "no matching data found"
    //   }
    //   ...
    // ]

    //but I want it to log something like this
    // [
    //   {
    //     event: "Ryan's birthday",
    //     time: "4:00",
    //     temperature: 41,
    //   },
    //   {
    //     event: "Steves's birthday",
    //     time: "2:00",
    //     temperature: "no matching data found",
    //   },
    //   {
    //     event: "Helen's birthday",
    //     time: "1:00",
    //     temperature: 44,
    //   },
    //   ...
    // ];

如何只 return 每个事件一个新的修改对象，而不是每一个比较的结果？我觉得我很亲近！

Answer 1

您可以为 temparatures 数组的所有时间获取一个对象，并通过使用 time 作为键将 events 数组映射到 times 对象的值。

const
    noData = 'no matching data found',
    events = [{ event: "Ryan's birthday", time: "4:00" }, { event: "Steves's birthday", time: "2:00" }, { event: "Helen's birthday", time: "1:00" }, { event: "Paola's birthday", time: "3:00" }, { event: "Jared's birthday", time: "9:00" }],
    temperatures = [{ time: "4:00", temp: 41 }, { time: "6:00", temp: 42 }, { time: "8:00", temp: 43 }, { time: "1:00", temp: 44 }, { time: "3:00", temp: 45 }, { time: "9:00", temp: 46 }],
    times = Object.fromEntries(temperatures.map(({ time, temp }) => [time, temp])),
    result = events.map(o => ({ ...o, temperature: times[o.time] || noData }));

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 2

您可以使用 Array.prototype.reduce 遍历 testArr1 中的每个对象，然后使用 Array.prototype.find 在 testArr2 中找到匹配 temp 的对象。如果匹配结合其他两个填充“未找到匹配的记录”：

const testArr1 = [{ event: "Ryan's birthday", time: "4:00" }, { event: "Steves's birthday", time: "2:00" }, { event: "Helen's birthday", time: "1:00" }, { event: "Paola's birthday", time: "3:00" }, { event: "Jared's birthday", time: "9:00" }],
testArr2 = [{ time: "4:00", temp: 41 }, { time: "6:00", temp: 42 }, { time: "8:00", temp: 43 }, { time: "1:00", temp: 44 }, { time: "3:00", temp: 45 }, { time: "9:00", temp: 46 }];

const getDataToDisplay = (testArr1, testArr2) => {
  const defaultText =  "no matching records found";
  return testArr1.reduce((acc, p) => {
    const matchingTime = testArr2.find(t => t.time === p.time);
    const temperature = (matchingTime && matchingTime.temp) || defaultText;
    acc.push({...p, temperature});
    return acc;
  }, []);
}
console.log(getDataToDisplay(testArr1, testArr2));

您的方法的问题是您将外部 for-loop 中的对象与内部 for-loop 中的每个对象进行比较。您只需要在第二个数组中找到一个具有相同时间的对象 testArr2 如果没有找到则添加消息“找不到匹配的记录”。

但在您的情况下，每次与 time 属性.

不匹配时，内部循环都会在输出数组中推送一个新对象

使用嵌套 for 循环和 return 修改对象数组比较两个对象的值

Compare values of two objects using nested for loops and return an array of modified objects

javascript

arrays

if-statement

object

assign