如何在 Javascript 的 foreach 循環中合並多個 arrays

Question

如何在 foreach 循環中合並多個 arrays。 我正在嘗試將所有 3 個imageData arrays 合並到一個數組中。 請告訴我是否遺漏了以下方法中的任何內容。

  const imageArray = [
      {
        imageData: [
          'https://via.placeholder.com/50',
          'https://via.placeholder.com/60'
        ],
      },
      {
        imageData: [
          'https://via.placeholder.com/100'
        ],
      },
      {
        imageData: [
          'https://via.placeholder.com/150'
        ],
     }
  ];

  processImage() {
    imageArray.forEach((element) => {
      const imageCollection = [...element.imageData];
      console.log(imageCollection);
      // Expected result 
      //['https://via.placeholder.com/50', 'https://via.placeholder.com/60', 'https://via.placeholder.com/100', https://via.placeholder.com/150]
    });
  }

Answer 1

您在循環中聲明新的 imageCollection ..因此您每次迭代都會創建一個新數組...

在外面做，並在 forEach 循環中使用imageCollection.push(...element.imageData)

Answer 2

您的數組需要在forEach循環之外，以便在forEach完成后可以訪問它。

const imageArray = [
  {
    imageData: [
      'https://via.placeholder.com/50',
      'https://via.placeholder.com/60'
    ]
  },
  {
    imageData: ['https://via.placeholder.com/100']
  },
  {
    imageData: ['https://via.placeholder.com/150']
  }
];

const processImage = function (imageArray) {
  const imageCollection = [];
  imageArray.forEach(element => {
    imageCollection.push(...element.imageData);
  });
  return imageCollection;
};

processImage(imageArray)的預期結果

[
  'https://via.placeholder.com/50',
  'https://via.placeholder.com/60',
  'https://via.placeholder.com/100',
  'https://via.placeholder.com/150'
]

Answer 3

試試這個，object imageData 中的 foreach，並使用另一個 Foreach 將每個值保存在數組中。

    let newImageData = []

    imageArray.forEach((data)=>{

       const imageDataArray = data.imageData
       imageDataArray.forEach(link => {
        newImageData.push(link)
       });
      

  })
  
  const NewImageArray = {imageData:newImageData}
  console.log(NewImageArray)

Answer 4

您可以在forEach之外分配imageCollection （但仍在processImage()之內）。 然后在forEach內部的imageCollection的重新定義中，傳播每個先前的imageCollection數組的內容，然后是element.imageData的內容。 像這樣：

//...
processImage() {
  let imageCollection = [];
  imageArray.forEach((element) => {
    imageCollection = [...imageCollection, ...element.imageData];
//...

您的上下文的完整代碼

const imageArray = [
    {
      imageData: [
        'https://via.placeholder.com/50',
        'https://via.placeholder.com/60'
      ],
    },
    {
      imageData: [
        'https://via.placeholder.com/100'
      ],
    },
    {
      imageData: [
        'https://via.placeholder.com/150'
      ],
    }
];

processImage() {
  let imageCollection = [];
  imageArray.forEach((element) => {
    imageCollection = [...imageCollection, ...element.imageData];
    console.log(imageCollection);
    // Expected result 
    //['https://via.placeholder.com/50', 'https://via.placeholder.com/60', 'https://via.placeholder.com/100', https://via.placeholder.com/150]
  });
  console.log('ImageCollection',imageCollection);
}

在上下文之外運行的完整代碼

const imageArray = [
    {
      imageData: [
        'https://via.placeholder.com/50',
        'https://via.placeholder.com/60'
      ],
    },
    {
      imageData: [
        'https://via.placeholder.com/100'
      ],
    },
    {
      imageData: [
        'https://via.placeholder.com/150'
      ],
    }
];

function processImage() {
  let imageCollection = [];
  imageArray.forEach((element) => {
    imageCollection = [...imageCollection, ...element.imageData];
    console.log(imageCollection);
    // Expected result 
    //['https://via.placeholder.com/50', 'https://via.placeholder.com/60', 'https://via.placeholder.com/100', https://via.placeholder.com/150]
  });
  console.log('ImageCollect',imageCollection);
}

processImage();