在对象数组中映射对象数组答案

【问题标题】：map array of object inside an array of object在对象数组中映射对象数组
【发布时间】：2022-06-17 19:37:20
【问题描述】：

我有这个对象数组，我已经通过它映射了它的内容

const teamSliderContent = [
    {
        Describtion1: 'Chef. Mordy Wenk',
        Title: 'Head of the Chief staff.',
        id: 1,
    },
    {
        Describtion1: 'Chef. Mark Brunnett',
        Title: 'Junior chef.',
        id: 2,
    },
    {
        Describtion1: 'Chef. Griffin Zach',
        Title: 'a Talented Chef.',
        id: 3,
    },
    {
        Describtion1: 'Chef. Will Smith',
        Title: 'a Talented Chef.',
        id: 4,
    },
];

这就是我的映射方式：

{teamSliderContent.map(item => (
   <p>{item}</p>
))}

我想将这个对象数组映射到前一个数组中

const pizzaSlicesContent = [
    {
        sliceUp:
            'https://user-images.githubusercontent.com/86873404/169595266-b0085f5c-cdd9-4f96-93b0-49edcc08fa72.png',
        id: 1,
    },
    {
        sliceLeft:
            'https://user-images.githubusercontent.com/86873404/169595240-fe7f4c80-c8c3-44f6-9cc8-4fec55587f87.png',
        id: 2,
    },
    {
        sliceDown:
            'https://user-images.githubusercontent.com/86873404/169595250-a5692462-8aec-43f8-91a8-a042d9dd35db.png',
        id: 3,
    },
    {
        sliceRight:
            'https://user-images.githubusercontent.com/86873404/169595259-e8cc76a8-437c-4260-9d53-aaefd606173b.png',
        id: 4,
    },
];

我的意思是我需要让第二个数组出现在第一个数组的每个对象中

【问题讨论】：

什么意思：将这个对象数组映射到前一个数组中。你想达到什么目的？到目前为止，您尝试过什么？
我的意思是我需要让第二个数组出现在我尝试在第一个地图中执行此操作的第一个数组的每个对象中 {pizzaSlicesContent.map(item2 => ( ))} ，但它给了我一个错误
你遇到了什么错误？
请edit您的问题包括您的说明、预期输出以及您收到的错误。 minimal reproducible example 也不错。有关更多提示，请参阅How to Ask。

标签： javascript arrays reactjs jsx chakra-ui

【解决方案1】：

你可以在map(codesandbox)里面做array.find-

{teamSliderContent.map((item) => (
  <p key={item.id}>
    {item.Title}
    <img
      width={100}
      height={100}
      alt="pizza"
      src={
        pizzaSlicesContent.find((slice) => slice.id === item.id)
          .sliceRight
      }
    />
  </p>
))}

唯一的问题是数组pizzaSlicesContent有不同的属性名，sliceUp、sliceDown、sliceLeft&sliceRight。

【讨论】：

来自 OP 的评论：“我的意思是我需要让第二个数组出现在第一个数组的每个对象中”。

【解决方案2】：

let newArray = teamSliderContent.map((e, i) => {
  return ({
    ...e,
    pizzaSlicesContent:pizzaSlicesContent
  })
})

【讨论】：

请说明您分享的代码的逻辑。

【解决方案3】：

这个函数可以解决问题：

/**
 * Zips and merges two object arrays
 * @param {Array<object>} a 
 * @param {Array<object>} b 
 * @returns 
 */
function mergeZip(a, b){
  return a.map((itemA, index) => ({...itemA, ...b[index]}))
}

你要做的是zip()（这就是Python中为此内置的函数的调用方式），同时合并两个数组中的两个对象。

zip() 的最简单方法是使用map()，假设两个数组的长度相同。 map() 的回调提供了当前循环的数组中的项目以及索引。使用该索引，您可以获得第二个数组在同一位置的值，然后使用spread syntax 将对象合并在一起。

这里是用于您的用例的函数：

const teamSliderContent = [
  {
    Describtion1: "Chef. Mordy Wenk",
    Title: "Head of the Chief staff.",
    id: 1,
  },
  {
    Describtion1: "Chef. Mark Brunnett",
    Title: "Junior chef.",
    id: 2,
  },
  {
    Describtion1: "Chef. Griffin Zach",
    Title: "a Talented Chef.",
    id: 3,
  },
  {
    Describtion1: "Chef. Will Smith",
    Title: "a Talented Chef.",
    id: 4,
  },
];

const pizzaSlicesContent = [
  {
    sliceUp:
      "https://user-images.githubusercontent.com/86873404/169595266-b0085f5c-cdd9-4f96-93b0-49edcc08fa72.png",
    id: 1,
  },
  {
    sliceLeft:
      "https://user-images.githubusercontent.com/86873404/169595240-fe7f4c80-c8c3-44f6-9cc8-4fec55587f87.png",
    id: 2,
  },
  {
    sliceDown:
      "https://user-images.githubusercontent.com/86873404/169595250-a5692462-8aec-43f8-91a8-a042d9dd35db.png",
    id: 3,
  },
  {
    sliceRight:
      "https://user-images.githubusercontent.com/86873404/169595259-e8cc76a8-437c-4260-9d53-aaefd606173b.png",
    id: 4,
  },
];

/**
 * Zips and merges two object arrays
 * @param {Array<object>} a 
 * @param {Array<object>} b 
 * @returns 
 */
function mergeZip(a, b){
  return a.map((itemA, index) => ({...itemA, ...b[index]}))
}

const result = mergeZip(teamSliderContent, pizzaSlicesContent)
console.log(result)

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

【讨论】：