循环对象数组并通过不同的键将它们连接在一起

Question

我正在尝试遍历产品数组并在描述数组中找到它的描述。产品id 和描述parent 代表同一个产品。如果可以找到描述，则将产品及其描述推送到结果数组。

我真的不知道这个循环应该是什么样子。

产品

let products = [
  {
    "id": "43",
    "titel": "Phone",
    "price": "211"
  },{
    "id": "76",
    "titel": "Battery",
    "price": "34"
  },{
    "id": "102",
    "titel": "Pen",
    "price": "45"
  },{
    "id": "127",
    "titel": "Apple",
    "price": "10"
  }
]

说明

let descriptions= [
  {
    "description": "Good battery",
    "parent": "76"
  },{
    "description": "Sharp pen",
    "parent": "102"
  },
]

预期输出results

let results = [
  {
    "id": "76",
    "titel": "Battery",
    "price": "34"
    "description": "Good battery",
    "parent": "76"
  },{
    "id": "102",
    "titel": "Pen",
    "price": "45"
    "description": "Sharp pen",
    "parent": "102"
  },
]

Answer 1

您可以利用Array.prototype.reduce，它允许将数组转换为另一种类型的数组对象。

结合Array.prototype.find 来检查id 的项目是否存在于descriptions 数组中

let products = [
  {
    "id": "43",
    "titel": "Phone",
    "price": "211"
  },{
    "id": "76",
    "titel": "Battery",
    "price": "34"
  },{
    "id": "102",
    "titel": "Pen",
    "price": "45"
  },{
    "id": "127",
    "titel": "Apple",
    "price": "10"
  }
]


let descriptions= [
  {
    "description": "Good battery",
    "parent": "76"
  },{
    "description": "Sharp pen",
    "parent": "102"
  },
]

const result = products.reduce((acc, item) => {

  // Check if the description of the current product exists
  let exist = descriptions.find(desc => {
    return item.id === desc.parent;
  });
  
  if(exist) {
    return acc.concat({...item, description: exist.description});
  }
  return acc;
}, []);


console.log(result);

如果您添加另一个数组comments，您可以更新代码而不是直接连接accumulator 中的项目，您将创建另一个对象，在评论数组中找到相关评论后，您将添加评论用他们的评论键入该对象。

这里是代码

let products = [
  {
    "id": "43",
    "titel": "Phone",
    "price": "211"
  },{
    "id": "76",
    "titel": "Battery",
    "price": "34"
  },{
    "id": "102",
    "titel": "Pen",
    "price": "45"
  },{
    "id": "127",
    "titel": "Apple",
    "price": "10"
  }
]


let descriptions= [
  {
    "description": "Good battery",
    "parent": "76"
  },{
    "description": "Sharp pen",
    "parent": "102"
  },
]

let comments = [
  {
    "comment": "Good battery comment",
    "product": "76",
  }, {
    "comment": "Sharp pen comment",
    "product": "102"
  }
];

const result = products.reduce((acc, item) => {

  // Check if the description of the current product exists
  let productExists = descriptions.find(desc => {
    return item.id === desc.parent;
  });
  
  let commentExists = comments.find(comment => {
    return item.id === comment.product
  });
  let newItem = null;
  
  if(productExists) {
    newItem = {
      ...item, 
      description: productExists.description
     };
  }
  if(commentExists) {
    newItem.comment = commentExists.comment;
  }
  
  return newItem? acc.concat(newItem): acc;
}, []);


console.log(result);

Answer 2

您应该遍历描述，然后使用 Array.find 并将它们合并到一个新对象中，使用 Object.assign 并将它们推送到您的结果中

let products = [
    {
      "id": "43",
      "titel": "Phone",
      "price": "211"
    },{
      "id": "76",
      "titel": "Battery",
      "price": "34"
    },{
      "id": "102",
      "titel": "Pen",
      "price": "45"
    },{
      "id": "127",
      "titel": "Apple",
      "price": "10"
    }
  ];
  let descriptions= [
    {
      "description": "Good battery",
      "parent": "76"
    },{
      "description": "Sharp pen",
      "parent": "102"
    },
  ];
  let results = [];
  for (const desc of descriptions) {
      const product = products.find(v => v.id === desc.parent);
      if (!product) {
          continue;
      }
      results.push(Object.assign({}, product, desc));
  }
  console.log(results);

Answer 3

const result = descriptions.map(descr => {
    const product = products.find(prod => prod.id === descr.parent);
    return {...product, ...descr}
})