试图结合 a.forEach 和 a.map function 但我得到返回未定义

Question

我有以下.map function 创建一个新的元素数组并将其选择的属性更改为 false：

const newAlteredData = alteredData.map((element) => {
  return { ...element, selected: false };
});

但是，现在我只想更改也存在于另一个名为changeRows的数组中的元素

我尝试了以下内容：

const newAlteredData = alteredData.map((element) => {
  changeRows.forEach((changeRow) => {
    if (changeRow.deviceId === element.deviceId) {
      return { ...element, selected: false };
    }
    return element;
  });
});

然而，这只是返回一个未定义的数组。 我在这里没有正确使用 .map 和/或 .forEach 吗？

Answer 1

我在这里没有正确使用 .map 和/或 .forEach 吗？

forEach()不是在这里使用的正确方法。 它用于遍历数组 - 而不是在其中查找元素。

forEach()方法不返回任何东西。 从其回调 function 返回的任何值都将被忽略。

Javascript 提供了多种方法来查找数组中的元素。 您可以使用find方法在changeRows数组中查找元素。

const newAlteredData = alteredData.map((element) => {
   const exists = changeRows.find(el => el.deviceId === element.deviceId);
 
   if (exists) {
      return { ...element, selected: false };
   }
});

其他可以使用的方法：

• 查找索引
• 包括
• 一些

Answer 2

正如@sirius 提到的，您忘记从forEach返回一些东西。

我会这样修复它：

const newAlteredData = alteredData.map((element) => {
  const arr = []
  changeRows.forEach((changeRow) => {
    if (changeRow.deviceId === element.deviceId) {
      arr.push({ ...element, selected: false });
    }
    arr.push(element);
  });
  return arr
});

Answer 3

你不能在forEach中返回任何东西。

改变这个：

const newAlteredData = alteredData.map((element) => {
  changeRows.forEach((changeRow) => {
    if (changeRow.deviceId === element.deviceId) {
      return { ...element, selected: false };
    }
    return element;
  });
});

到

const newAlteredData = alteredData.map((element) => {
  changeRows.find(changeRow => changeRow.deviceId === element.deviceId) {
     return { ...element, selected: false };
  }
  return element;
});

Answer 4

forEach不返回 javascript 中的任何内容。

您可以使用filter来实现您想要的效果，而 map 仅通过现有元素。

const newAlteredData = alteredData.filter(
  element => changeRows.find(
      changeRow => changeRow.deviceId === element.deviceId
    )
  ).map((element) => {
  return { ...element, selected: false };
});