如何像专业人士一样将数组合并到对象数组中？答案

【问题标题】：How to merge arrays into array of objects like a pro?如何像专业人士一样将数组合并到对象数组中？
【发布时间】：2022-01-21 19:15:25
【问题描述】：

我必须将三个数组合并为一个对象数组，其中每个 i 对象都包含每个数组中的值 i。

我有三个数组，其中包含来自 firebase 的数据（缩略图的 url 数组，全尺寸图像的 url 和带有元数据的对象。

let finalArrayOfImagesAndMetadata = [];
  // Getting array of download url's for every file
  const getDownloadUrlFullFile =  await Promise.all(getAllFilesList.items.map(itemRef => getDownloadURL(itemRef)));
  const getDownloadUrlThumbnails = await Promise.all(getAllThumbnails.items.map(itemRef => getDownloadURL(itemRef)));
  // Getting metadata for all files
  const getMetadataForAllFiles = await Promise.all(getAllFilesList.items.map(itemRef => getMetadata(itemRef)));

我已经设法开发了两种方法来解决这个问题：

第一：

// Merging full size image url, thumbnail url and metadata in one object
  const processArray = async () => {
    getDownloadUrlFullFile.forEach((o)=>{
      finalArrayOfImagesAndMetadata.push({'fullImageUrl': o});
    });
    getDownloadUrlThumbnails.forEach((x, i)=>{
      finalArrayOfImagesAndMetadata[i].imageUrl =x;
    })
    getMetadataForAllFiles.forEach((x, i)=>{
      const element = x.customMetadata;
      finalArrayOfImagesAndMetadata[i] = {...finalArrayOfImagesAndMetadata[i], ...element};
    })
    console.log(finalArrayOfImagesAndMetadata)
    return finalArrayOfImagesAndMetadata;
  }

秒：

// Merging full size image url, thumbnail url and metadata in one object
 const processArray = async () => {
  return new Promise(async function (resolve, reject) {
  for (let i =0 ; i<getDownloadUrlFullFile.length; i++){
    const getSpecificFileThumbnail = getDownloadUrlThumbnails[i];
    const getFileMetadata = loadedMetaData[i].customMetadata;
    const imageUrl = {'imageUrl': getSpecificFileThumbnail};
    const fullImageUrl = {'fullImageUrl': getDownloadUrlFullFile[i]}
    finalArrayOfImagesAndMetadata.push({...getFileMetadata, ...imageUrl, fullImageUrl});
    if ( finalArrayOfImagesAndMetadata.length === getDownloadUrlThumbnails.length) {
      return (finalArrayOfImagesAndMetadata);
       }
   resolve (finalArrayOfImagesAndMetadata);
 }})}

这两种解决方案都有效，但有没有更复杂、更好的方法来解决这个问题？也许要等到写入数组的每一步都完成？

换句话说：如何像专业人士一样做？

【问题讨论】：

标签： javascript arrays object merge

【解决方案1】：

您可以像第一个选项一样迭代元素，但使用 map 方法构造新数组。然后你可以使用 index 参数来获取其他数据（比如你的第二个选项）：

 const mergedArray = getDownloadUrlFullFile.map((fullImageUrl, i)=>({
   // Shorthand to set fullImageUrl: fullImageUrl
   fullImageUrl,
   // assign the property directly
   'imageUrl': getSpecificFileThumbnail[i],
   // You can also spread values if you want them directly on the object
   {...loadedMetaData[i].customMetadata}
}));

如果您想将请求和数据合并在一起，您可以使用 Promise.all 和 Promise.map 模式https://www.techiediaries.com/promise-all-map-async-await-example/

【讨论】：

【解决方案2】：

是的，有几种方法取决于结果数据的所需形状...

const urls =  await Promise.all(getAllFilesList.items.map(itemRef => getDownloadURL(itemRef)));
const thumbnails = await Promise.all(getAllThumbnails.items.map(itemRef => getDownloadURL(itemRef)));
const metadata = await Promise.all(getAllFilesList.items.map(itemRef => getMetadata(itemRef)));

// simplest merge is just a concatenation
const oneBigArray = [...urls, ...thumbnails, ...metadata]

// another sort of merge is to have the arrays as props in an object
const oneBigObject = { urls, thumbnails, metadata }; // notice no spread ... operator

真正的“合并”将关闭数组中每个对象的共同点，以构建对象数组，例如：

[
  { key: 'some common key',
    url: 'some url',
    thumbnail: 'some url',
    metadata: { /* some meta data object */ }
  },
  // ...
];

在这里详细说明需要了解更多有关返回对象的信息，例如，每个返回对象中是否有一个键将它们与其他数组中的朋友联系起来。

【讨论】：

【解决方案3】：

@danh

// simplest merge is just a concatenation
const oneBigArray = [...urls, ...thumbnails, ...metadata]

这看起来很酷！有什么方法可以为每个“... urls”添加密钥，让所有 url 都像这样？

{imageUrl: www....,
 thumbnailUrl: www...,
 metadata : {}
}

@阿萨夫

我也很喜欢你的方法。我不认为我可以一次对每个数组使用迭代器，很好。

谢谢大家。我一定会缩短代码。

【讨论】：