如何转换API返回对象的键并构建目标images数组？

原始API数据 #

[
    {
        "aspect_ratio": 0.667,
        "height": 1160,
        "iso_639_1": null,
        "file_path": "/728rlT3uW8qzXSxa0sWGhkOvE7X.jpg",
        "vote_average": 5.388,
        "vote_count": 4,
        "width": 774
    },
    {
        "aspect_ratio": 0.667,
        "height": 1381,
        "iso_639_1": null,
        "file_path": "/4L8UmlXVoJ3rOmkkkjcGE0XsCEz.jpg",
        "vote_average": 5.322,
        "vote_count": 5,
        "width": 921
    }
]

目标images数组结构 #

[
    {
        "original": [
            "https://image.tmdb.org/t/p/original//728rlT3uW8qzXSxa0sWGhkOvE7X.jpg"
        ],
        "thumbnail": [
            "https://image.tmdb.org/t/p/w500//728rlT3uW8qzXSxa0sWGhkOvE7X.jpg"
        ]
    },
    {
        "original": [
            "https://image.tmdb.org/t/p/original/4L8UmlXVoJ3rOmkkkjcGE0XsCEz.jpg"
        ],
        "thumbnail": [
            "https://image.tmdb.org/t/p/w500/4L8UmlXVoJ3rOmkkkjcGE0XsCEz.jpg"
        ]
    }
]

已实现的代码 #

const fullSizeImg = "https://image.tmdb.org/t/p/original";
const halfSizeImg = "https://image.tmdb.org/t/p/w500";
const fullSize = pics.map(({ file_path }) => ([fullSizeImg + file_path]))
const halfSize = pics.map(({ file_path }) => ([halfSizeImg + file_path]))

解决方案 #

方法一：直接遍历原数组生成目标结构（推荐） #

不需要分开生成两个独立数组，直接一次遍历原始pics数组，一步构建目标images数组，代码更简洁高效：

const fullSizeImg = "https://image.tmdb.org/t/p/original";
const halfSizeImg = "https://image.tmdb.org/t/p/w500";

const images = pics.map(({ file_path }) => ({
  original: [fullSizeImg + file_path],
  thumbnail: [halfSizeImg + file_path]
}));

方法二：基于已生成的两个数组合并 #

如果要保留你已生成的fullSize和halfSize数组，可以通过索引对应合并：

const images = fullSize.map((originalLink, index) => ({
  original: originalLink,
  thumbnail: halfSize[index]
}));

两种方法都能得到符合要求的images数组。

内容的提问来源于stack exchange，提问作者Akhil