在物件陣列中映射物件陣列

我有這個物件陣列，我已經通過它進行映射以獲取其內容

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 => ( ))}在第一個地圖中這樣做，但它給了我一個錯誤

uj5u.com熱心網友回復：

let newArray = teamSliderContent.map((e, i) => {
  let tempIndex = pizzaSlicesContent.findIndex(bb => bb.id === e.id)
  return ({
    ...e,
    ...pizzaSlicesContent[tempIndex]
  })
})

uj5u.com熱心網友回復：

你可以array.find在map（代碼和框）內做 -

{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。

uj5u.com熱心網友回復：

這個函式可以解決問題：

/**
 * 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()提供當前回圈的陣列中的專案以及索引。使用該索引，您可以獲得第二個陣列在同一位置的值，然后使用擴展語法將物件合并在一起。

這里是用于您的用例的函式：

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; }

標籤：javascript 数组 反应 jsx 脉轮

上一篇：如何計算陣列中相同的值并創建不同的陣列？

下一篇：根據鍵值對JSON陣列進行排序