比較兩個物件陣列并修改原始物件陣列

讓我們有兩個物件陣列，

let oldArrayOfObject = [
    {
      Item: "ACC",
      Price: "",
      hasPrice: false,
    },
    {
      Item: "BCC",
      Price: "",
      hasPrice: false,
    },
    {
      Item: "CCC",
      Price: "",
      hasPrice: false,
    },
    {
      Item: "DCC",
      Price: "",
      hasPrice: false,
    },
    {
      Item: "ECC",
      Price: "",
      hasPrice: false,
    },
  ];

let newArrayOfObject = [
  {
    Item: "ACC",
    Price: 12,
  },
  {
    Item: "BCC",
    Price: 50,
  },
  {
    Item: "ECC",
    Price: 21,
  }
];

比較兩個物件陣列，如果特定專案的 newArrayOfObject 中存在價格，則將該特定專案的價格插入到 oldArrayOfObject 中，并設定 hasPrice: true。

預期 O/P：

console.log(oldArrayOfObject)

[
    {
      Item: "ACC",
      Price: 12,
      hasPrice: true,
    },
    {
      Item: "BCC",
      Price: 50,
      hasPrice: true,
    },
    {
      Item: "CCC",
      Price: "",
      hasPrice: false,
    },
    {
      Item: "DCC",
      Price: "",
      hasPrice: false,
    },
    {
      Item: "ECC",
      Price: 21,
      hasPrice: true,
    },
  ];

為此，我嘗試過，

const modifiedArrayOfObject = newArrayOfObject.map((node) => {
  const oldInfo = oldArrayOfObject.find((item) => item.Item === node.Item);
  if (oldInfo) {
    return { ...node, hasPrice: oldInfo.Price !==  node.Price }
  } else {
     return { ...node, hasPrice: true };
  }
});

但我無法從這里繼續前進。如果有人需要任何進一步的解釋或進一步的許可，請告訴我。

uj5u.com熱心網友回復：

您可以嘗試在示例中使用此功能：

let oldArrayOfObject = [
    {
      Item: "ACC",
      Price: "",
      hasPrice: false,
    },
    {
      Item: "BCC",
      Price: "",
      hasPrice: false,
    },
    {
      Item: "CCC",
      Price: "",
      hasPrice: false,
    },
    {
      Item: "DCC",
      Price: "",
      hasPrice: false,
    },
    {
      Item: "ECC",
      Price: "",
      hasPrice: false,
    },
  ];

let newArrayOfObject = [
  {
    Item: "ACC",
    Price: 12,
  },
  {
    Item: "BCC",
    Price: 50,
  },
  {
    Item: "ECC",
    Price: 21,
  }
];

function modifiedArrayOfObject(item) {
   newArrayOfObject.map(v => {
    if(v.Item === item){
      const index = oldArrayOfObject.findIndex(obj => obj.Item === v.Item);
      oldArrayOfObject[index] = { Item: v.Item, Price: v.Price, hasPrice: true };
    }
   })
 console.log("oldArrayOfObject:", oldArrayOfObject)
}
modifiedArrayOfObject("ACC")

uj5u.com熱心網友回復：

如果您打算修改，oldArrayOfObject那么我不建議map為此使用。而是使用一個簡單的for回圈 -

const oldArrayOfObject = ...

const newArrayOfObject = ...

for (const t of newArrayOfObject) {
  const q = oldArrayOfObject.find(o => o.Item=== t.Item)
  if (q == null) continue
  q.Price = t.Price
  q.hasPrice = true
}

console.log(oldArrayofObject)

uj5u.com熱心網友回復：

我認為你混淆了newArrayOfObjects和oldArrayOfObjects。這是您的方式的解決方案：

const modifiedArrayOfObject = oldArrayOfObject.map((node) => {
    const newInfo = newArrayOfObject.find((item) => item.Item === node.Item);
    if (newInfo) return { ...node, hasPrice: true, Price: newInfo.Price };
    return node;
});

uj5u.com熱心網友回復：

我不建議您更改任何陣列，讓它們保持不變并創建一個統一它們的新陣列。但是，您走在正確的軌道上，因為您最舊的串列有更多專案，您應該通過它而不是新串列，如果這種情況發生變化，您的代碼就會中斷。

const modifiedArrayOfObject = oldArrayOfObject.map((oldInfo) => {
  const newInfo = newArrayOfObject.find((newInfo) =>  newInfo.Item === oldInfo.Item);
  if (newInfo && newInfo.Price) {
    return { ...oldInfo, Price: newInfo.Price, hasPrice: true };
  }

  return { ...oldInfo, hasPrice: false };
});


console.log("modifiedArrayOfObject:", modifiedArrayOfObject);

另外，不要在沒有回傳的情況下使用地圖。

uj5u.com熱心網友回復：

您的代碼的問題是

• 您必須從oldArrayOfObjectin 中找到節點newArrayOfObject。你oldInfo應該被定義為oldInfo = newArrayOfObject.find((item) => item.Item === node.Item);
• 此外，如果oldInfo找到，你應該重新Price作為Price: oldInfo.Price
• 如果oldInfo未找到，則必須回傳當前節點本身。不要hasPrice: true手動設定。

作業小提琴

const oldArrayOfObject = [{ Item: "ACC", Price: "", hasPrice: false, }, { Item: "BCC", Price: "", hasPrice: false, }, { Item: "CCC", Price: "", hasPrice: false, }, { Item: "DCC", Price: "", hasPrice: false, }, { Item: "ECC", Price: "", hasPrice: false, }];

const newArrayOfObject = [{ Item: "ACC", Price: 12, }, { Item: "BCC", Price: 50, }, { Item: "ECC", Price: 21 }];

const modifiedArrayOfObject = oldArrayOfObject.map((node) => {
    const oldInfo = newArrayOfObject.find((item) => item.Item === node.Item);
    if (oldInfo) {
        return { ...node, Price: oldInfo.Price, hasPrice: oldInfo.Price !== node.Price }
    } else {
        return { ...node };
    }
});
console.log(modifiedArrayOfObject);

Array.map 始終從現有陣列創建一個新陣列。

如果你想更新原始陣列本身而不是創建一個新陣列，你可以運行一個回圈oldArrayOfObject并檢查每個節點oldArrayOfObject是否在newArrayOfObject. 然后更新hasPrice，Price如果找到匹配的節點。

作業小提琴

const oldArrayOfObject = [{ Item: "ACC", Price: "", hasPrice: false, }, { Item: "BCC", Price: "", hasPrice: false, }, { Item: "CCC", Price: "", hasPrice: false, }, { Item: "DCC", Price: "", hasPrice: false, }, { Item: "ECC", Price: "", hasPrice: false, }];

const newArrayOfObject = [{ Item: "ACC", Price: 12, }, { Item: "BCC", Price: 50, }, { Item: "ECC", Price: 21 }];

oldArrayOfObject.forEach((node) => {
    const oldInfo = newArrayOfObject.find((item) => item.Item === node.Item);
    if (oldInfo) {
        node.hasPrice = oldInfo.Price !== node.Price;
        node.Price = oldInfo.Price;
    }
});
console.log(oldArrayOfObject);

標籤：javascript 数组 目的

上一篇：從多個單選框和文本框中反應js更新值

下一篇：有人可以協助限制0.1步和無字符以及最小值和最大值的功能嗎