對象總是在 forEach 循環中獲取最后一個值 - JavaScript

Question

嘗試根據array1的值type過濾array2的結果，但結果數組始終打印 forEach 循環中的最后一個值。

片段

 const array1 = [{ name: "Audi", type: "sedan" }, { name: "BMW", type: "sedan" }, { name: "Benz", type: "suv" } ]; const array2 = [{ year: "2020" }, { year: "2021" }]; let a = []; let customObject1 = {}; let array3 = []; array1.forEach((val1) => { array2.forEach((val2) => { if (val1.type === "sedan") { customObject1["label"] = "Sedan Car"; customObject1["year"] = val2.year; array3.push(customObject1); console.log(array3); } }); });

這是我期待的結果。 有人可以幫忙嗎？

array3 = [{label: 'Sedan Car', year: '2020'}, {label: 'Sedan Car', year: '2021'}]

Answer 1

當您推送到 array3 時，您需要在每個循環中克隆 customObject1，您可以使用 JSON.stringify() 然后使用 JSON.parse() 來獲取該對象的副本（在內存中有一個新的引用），否則您將覆蓋每個循環引用同一個對象。 檢查這個以了解 JS 如何處理內存中的對象： https://codeburst.io/explaining-value-vs-reference-in-javascript-647a975e12a0 。

 let a = []; let customObject1 = {}; let array3 = []; array1.forEach((val1) => { array2.forEach((val2) => { if (val1.type === "sedan") { customObject1["label"] = "Sedan Car"; customObject1["year"] = val2.year; array3.push(JSON.parse(JSON.stringify(customObject1))); console.log(array3); } }); });

Answer 2

知道你想在這里做什么。 但這是你可以做到的。

 const array1 = [ { name: 'Audi', type: 'sedan', }, { name: 'BMW', type: 'sedan', }, { name: 'Benz', type: 'suv', }, ]; const array2 = [ { year: '2020', }, { year: '2021', }, ]; const array3 = []; array2.forEach((item, index) => { array1.forEach((item2) => { if (item2.type === 'sedan') { item.label = 'Sedan Car'; } }); array3.push(item); }); console.log(array3);

Answer 3

您只獲得最后一個值，因為您為每個array3元素重復使用相同的customObject1實例。 通過為每個元素定義一個新的customObject1實例，您將獲得更好的結果：

 const array1 = [{ name: "Audi", type: "sedan" }, { name: "BMW", type: "sedan" }, { name: "Benz", type: "suv" } ]; const array2 = [{ year: "2020" }, { year: "2021" }]; let a = []; let array3 = []; array1.forEach((val1) => { array2.forEach((val2) => { if (val1.type === "sedan") { let customObject1 = {}; customObject1["label"] = "Sedan Car"; customObject1["year"] = val2.year; array3.push(customObject1); console.log(array3); } }); });

注意：這仍然不會產生您似乎期望的最終結果。 那是因為array1有兩個sedan s。

Answer 4

問題是，在內部 forEach 循環的每次迭代期間都使用相同的 customObject 引用。 我更喜歡一個完全不使用變量的解決方案，方法是在 push 函數中直接傳遞一個對象作為參數。

let a = [];
let array3 = [];
array1.forEach((val1) => {
  array2.forEach((val2) => {
    if (val1.type === "sedan") {
      array3.push({ label: "Sedan Car", year: val2.year });
    }
  });
});

如果你想保留你的變量，你也可以利用對象解構來創建一個副本

let a = [];
let customObject1 = {};
let array3 = [];
array1.forEach((val1) => {
  array2.forEach((val2) => {
    if (val1.type === "sedan") {
      customObject1["label"] = "Sedan Car";
      customObject1["year"] = val2.year;
      array3.push({...customObject1}) //destructuring the object;
      console.log(array3);
    }
  });
});