匹配数组对象URL后无法正确调用对应属性，该如何修正？

你当前的代码是通过数组索引位置直接关联urls和arrayConst，而非根据URL实际值匹配对应属性，这会导致两个核心问题：

• 若urls的元素顺序与arrayConst不一致，索引匹配会完全错位，比如urls顺序改为["url2", "url1"]时，会把ABC的header错误绑定给url2对应的元素。
• 当urls长度大于arrayConst时（比如示例中的url3），arrayConst[i]会返回undefined，导致无法设置header和image属性，甚至触发报错。

先把arrayConst转换成以URL为键的映射对象，这样就能根据urls中的每个URL快速定位到对应的header和image：

let findRecentPosts = setInterval(function () {
 const arrayConst = [
        {
            header: "​​XYZ",
            url: "url1",
            image: "url(https://....jpg)",
        },
        {
            header: "​ABC",
            url: "url2",
            image: "url(https://....jpg)",
        },
    ];
   
    const urls = ["url1", "url2", "url3"];
    // 转成URL为键的映射对象，实现快速查找
    const urlToPropsMap = arrayConst.reduce((map, item) => {
        map[item.url] = { header: item.header, image: item.image };
        return map;
    }, {});
    
    if ($(".l-blog__sidebar").length > 0) {
        clearInterval(findRecentPosts);
        $(".c-related-single").each(function (i) {
            const currentUrl = urls[i];
            $(this).find("a").attr("href", currentUrl);
            // 根据当前URL获取对应属性
            const props = urlToPropsMap[currentUrl];
            if (props) {
                $(this).find(".c-related-single__header").text(props.header);
                $(this).find(".c-related-single__image .c-background-image").css("background-image", props.image);
            } else {
                // 处理arrayConst中无对应URL的情况，比如url3，可设置默认值或隐藏元素
                $(this).find(".c-related-single__header").text("默认标题");
                // 或者：$(this).hide();
            }
        });
    }
}, 1000);

$(document).ready(function () {
    // 修正拼写错误：setTimout → setTimeout
    setTimeout(function () {
        clearInterval(findRecentPosts);
    }, 5000);
});

• 原代码中的setTimout是拼写错误，需改为setTimeout，否则超时清除定时器的逻辑不会生效。
• 对于urls中存在但arrayConst未定义的URL，可根据业务需求设置默认内容，或直接隐藏对应元素。

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