1

我正在尝试解决 JavaScript 中的一个问题，并相信使用该reduce方法将是最优雅的。我有一组看起来像这样的对象：

let existingLots = [
    {
        id: 1,
        title: 'one',
        colour: 'red',
        speed: 100
    },
    {
        id: 2,
        title: 'two',
        colour: 'blue',
        speed: 70
    },
    {
        id: 3,
        title: 'three',
        colour: 'white',
        speed: 120
    },
    {
        id: 4,
        title: 'four',
        colour: 'yellow',
        speed: 90
    },
]

另一个看起来像这样的数组：

let newLots = [
    {
        id: 1,
        title: 'one',
        colour: 'orange',
        speed: 100,
        owner: 'Ted'
    },
    {
        id: 2,
        title: 'two',
        colour: 'blue',
        speed: 75
    },
    {
        id: 3,
        title: 'three updated',
        colour: 'white',
        speed: 120,
    },
    {
        id: 4,
        title: 'four',
        colour: 'yellow',
        speed: 90
    },
    {
        id: 5,
        title: 'five',
        colour: 'green',
        speed: 50
    },
]

如您所见，一些 id 之间存在重叠。我想更新existingLots数组，以便如果一个对象与数组id中的一个共享相同newLots，则该对象将使用其对应对象中的任何新属性/值进行更新newLots。另外，我希望将不在其中的任何对象newLots（即带有idof 的对象）添加到数组中。5existingObjectsexistingObjects

我尝试了以下方法，但没有达到预期的结果：

const res = existingLots.reduce((acc, obj) => {
    let updatedObj = newLots.filter(newLot => newLot.id === obj.id);
    // if object exists in currentLots, merge it
    if(updatedObj) {
        [...acc, {...obj, ...updatedObj}]
    } else {
        let newObj = !newLots.filter(newLot => newLot.id === obj.id);
        [...acc, {...newObj}]
    }
    return acc
}, [])

我是 JavaScript 数组方法的新手，因此不胜感激。

4

2 回答 2

0

1) You are using filter which will return an array of filter elements

The filter() method creates a new array with all elements that pass the test implemented by the provided function. - MDN

2) This code just push/add all objects after the last element in the array and then discarded since you are not storing them anywhere

[...acc, {...obj, ...updatedObj}]

SOLUTION: You can use forEach to loop over the newLots array and add data to existingLots element

newLots.forEach((newLot) => {
  let objExist = existingLots.find((o) => o.id === newLot.id);
  if (objExist) {
    for (let key in newLot) objExist[key] = newLot[key];
  } else existingLots.push(newLot);
});

or

newLots.forEach((newLot) => {
  let index = existingLots.findIndex((o) => o.id === newLot.id);
  if (index !== -1) existingLots[index] = { ...existingLots[index], ...newLot };
  else existingLots.push(newLot);
});


let existingLots = [
  {
    id: 1,
    title: "one",
    colour: "red",
    speed: 100,
  },
  {
    id: 2,
    title: "two",
    colour: "blue",
    speed: 70,
  },
  {
    id: 3,
    title: "three",
    colour: "white",
    speed: 120,
  },
  {
    id: 4,
    title: "four",
    colour: "yellow",
    speed: 90,
  },
];

let newLots = [
  {
    id: 1,
    title: "one",
    colour: "orange",
    speed: 100,
    owner: "Ted",
  },
  {
    id: 2,
    title: "two",
    colour: "blue",
    speed: 75,
  },
  {
    id: 3,
    title: "three updated",
    colour: "white",
    speed: 120,
  },
  {
    id: 4,
    title: "four",
    colour: "yellow",
    speed: 90,
  },
  {
    id: 5,
    title: "five",
    colour: "green",
    speed: 50,
  },
];

newLots.forEach((newLot) => {
  let index = existingLots.findIndex((o) => o.id === newLot.id);
  if (index !== -1) existingLots[index] = { ...existingLots[index], ...newLot };
  else existingLots.push(newLot);
});

console.log(existingLots);

于 2021-08-05T12:06:44.113 回答
0

我认为你可以使用一些“魔法”的唯一地方是查找。此代码在对象 id-s 和它们在实际数组中的索引之间创建一个map，然后循环遍历更新器数组，使用 查找和更新现有对象map，如果id是全新的对象，则简单地附加该对象。

let existingLots = [{
    id: 1,
    title: 'one',
    colour: 'red',
    speed: 100
  },
  {
    id: 2,
    title: 'two',
    colour: 'blue',
    speed: 70
  },
  {
    id: 3,
    title: 'three',
    colour: 'white',
    speed: 120
  },
  {
    id: 4,
    title: 'four',
    colour: 'yellow',
    speed: 90
  },
];

let newLots = [{
    id: 1,
    title: 'one',
    colour: 'orange',
    speed: 100,
    owner: 'Ted'
  },
  {
    id: 2,
    title: 'two',
    colour: 'blue',
    speed: 75
  },
  {
    id: 3,
    title: 'three updated',
    colour: 'white',
    speed: 120,
  },
  {
    id: 4,
    title: 'four',
    colour: 'yellow',
    speed: 90
  },
  {
    id: 5,
    title: 'five',
    colour: 'green',
    speed: 50
  },
];

let map = existingLots.reduce((acc, obj, idx) => acc.set(obj.id, idx), new Map());
for (let obj of newLots)
  if (map.has(obj.id)) {
    let idx = map.get(obj.id);
    existingLots[idx] = {...existingLots[idx], ...obj};
  } else
    existingLots.push(obj);


console.log(existingLots);

更新程序部分实际上也可以在您的代码中工作，就像filter()总是为您提供一个数组，if(updatedObj)应该是if(updatedObj.length)和使用updatedObj将是updatedObj[0]。并且acc =（或简单的return）也丢失了。但是所有这些数组方法（filter(), reduce(), map()）通常都在单个数组上工作，它们并不真正适合根据条件从另一个数组中附加元素，因此第二种if方法无法工作 - 为此您最好使用正如两个答案所暗示的那样，简单的循环，然后更新可能发生在同一个循环中。

于 2021-08-05T12:44:33.600 回答