如何将数组项添加到另一个数组中

Question

如何将一个数组中的值添加到另一个数组中以创建一个新数组？

我有两个数组，我想通过 arrayTwo 进行过滤，从 arrayOne 中找到 id === productID 的位置。然后将 arrayOne 中的 quantity 添加到 arrayTwo 这样我就可以得到 arrayThree 这样的结果

arrayOne = [
  {
   productID: "DuWTLdYkpwF1DJ2x8SGB",
   quantity: 2
  },
]

arrayTwo = [
{
  id: "DuWTLdYkpwF1DJ2x8SGB",
  minQuantity: 1,
  name: "5 Shade Palette",
  price: "950",
  size: "30g",
  unitPrice: 950,
  },
]

想要的结果::

arrayThree = [
{
  id: "DuWTLdYkpwF1DJ2x8SGB",
  minQuantity: 1,
  name: "5 Shade Palette",
  price: "950",
  size: "30g",
  unitPrice: 950,
  quantity: 2,
  },
]

Answer 1

您可以使用扩展运算符轻松合并两个对象：

arrayOne = [
  {
   productID: "DuWTLdYkpwF1DJ2x8SGB",
   quantity: 2
  },
]

arrayTwo = [
{
  id: "DuWTLdYkpwF1DJ2x8SGB",
  minQuantity: 1,
  name: "5 Shade Palette",
  price: "950",
  size: "30g",
  unitPrice: 950,
  },
]

console.log({...arrayOne[0], ...arrayTwo[0]})

将它与您的初始过滤器结合使用，您应该会得到想要的东西。但是我建议改用 'find()'。

这看起来像这样：

// Loop every item of one array
arrayOne.forEach( (product) => {
  // Find linked product
  let productToMerge = arrayTwo.find(p => p.productID === product.productID)

 // Let's merge them
 let newItem = {...product, ...productToMerge}
})

现在只需将这个 newItem 推入数组即可收集所有新项目。

Spread

Find

Answer 2

这里的时间复杂度是O(n^2)。如果给定的数组真的很长，那不是最好的选择。基本上：对于 arrayOne 中的每个项目，在 arrayTwo 中找到它的对并合并它们。

let arrayThree = arrayOne.map(first => {
    return {
        ...first,
        ...arrayTwo.find(second => second.id == first.productID)
    }
});

Answer 3

以下是实现目标的一种可能方法。

代码段

// add "quantity" to existing products
const addDeltaToBase = (delta, base) => (
  // iterate over the "base" (ie, existing product array)
  base.map(
    ({ id, ...rest }) => {        // de-structure to access "id"
      // check if "id" is part of the delta (to update "quantity")
      const foundIt = delta.find(({ productID }) => productID === id);
      if (foundIt) {              // found a match, so update "quantity
        return ({
          id, ...rest, quantity: foundIt.quantity
        })
      };
      // control reaches here only when no match. Return existing data as-is
      return { id, ...rest }
    }
  )     // implicit return from "base.map()"
);

const arrayOne = [
  {
   productID: "DuWTLdYkpwF1DJ2x8SGB",
   quantity: 2
  },
];

const arrayTwo = [
{
  id: "DuWTLdYkpwF1DJ2x8SGB",
  minQuantity: 1,
  name: "5 Shade Palette",
  price: "950",
  size: "30g",
  unitPrice: 950,
  },
];

console.log(addDeltaToBase(arrayOne, arrayTwo));

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

说明

在上面的代码片段中添加了内联评论。

注意

这个答案将能够处理 arrayOne 和 arrayTwo 的多个对象。
它将 productId 与 id 匹配，当匹配时，它将 quantity 合并到输出中（即 arrayThree）。
它的目标是不可变的，因此输入数组可能会保持不变 as-is

如何将数组项添加到另一个数组中

How can I add an array item into another array

javascript

arrays

reactjs

react-native