JavaScript遍历数组渲染电影海报时imdbID拼接错误求助

算力阿峰

2026-9-26

问题原因

你调用两次map分别提取了海报地址数组、imdbID数组，后者是包含所有筛选结果ID的集合。你在遍历海报数组拼接链接时，直接传入了整个imdbId数组，JS默认会把数组转为逗号拼接所有元素的字符串，因此所有ID都会被拼到每个链接的末尾。
分开提取两个数组的写法完全没有必要，反而会增加索引匹配的成本（如果要按索引取值还得拿forEach的第二个index参数去imdbId数组里取对应值，更容易出bug）。

修正后的代码

const addMoviesToDom = function (movieArray) {
    const movieList = document.querySelector("#movielist");
    movieList.innerHTML = "";
    // 直接遍历原始电影数组，单次循环处理单个电影的所有逻辑
    movieArray.forEach(item => {
        const newLi = document.createElement("li");
        const newLink = document.createElement("a");
        const images = document.createElement("img");
        // 直接取当前循环项的海报和对应ID
        images.src = item.Poster;
        newLink.setAttribute("href", "https://www.imdb.com/title/" + item.imdbID);
        newLink.setAttribute("target", "_blank");
        newLink.append(images);
        newLi.append(newLink);
        movieList.appendChild(newLi);
    })
};
addMoviesToDom(movies);