遍历对象键值设置DOM元素属性时的循环赋值异常问题

AI 小北

2026-7-2

问题描述

我有一个对象数组headerElements，想用Object.keys遍历其中索引为4的元素的键，为每个键对应的DOM元素设置索引为5的元素数组里的href属性。但当前代码里的for循环会把所有元素的href都设成数组最后一项的值，试过do while等循环也没解决，想知道怎么正确实现这个逻辑。

原代码如下：

const headerElements = [
  {
    pageLinksHeader: document.createElement("div"),
    class: "page-links-header",
  },
  {
    companyNameHeader: document.createElement("div"),
    class: "company-name-header",
  },
  {
    mainPageLink: document.createElement("a"),
    text: "example",
    link: "../../index.html",
  },
  {
    webPagesHeader: document.createElement("div"),
    class: "webpages-header",
  },
  {
    webPageTarieven: document.createElement("a"),
    webPageReserveren: document.createElement("a"),
    webPageContact: document.createElement("a"),
  },
  {
    webPagesLinks: [
      "../../tarieven.html",
      "../../reseveren.html",
      "./contact.html",
    ],
    webPagesText: ["Tarieven", "Reserveren", "Contact"],
  },
];

Object.keys(headerElements[4]).forEach((attr) => {
  for (let i = 0; i < 3; i++) {
    headerElements[4][attr].setAttribute(
      "href",
      headerElements[5].webPagesLinks[i]
    );
  }
});

问题原因

当前代码逻辑错误：在forEach遍历每个DOM元素时，嵌套了完整的for循环（从i=0到i=2），这会导致每个DOM元素被连续设置3次href，最后一次赋值覆盖前两次，所以所有元素最终的href都是数组最后一项。

正确实现方案

需要把Object.keys拿到的键数组和webPagesLinks数组做一一对应，两者数量都是3个，顺序也匹配（Tarieven对应第一个链接，Reserveren对应第二个，Contact对应第三个）。可以利用forEach的第二个参数（当前元素的索引）来关联对应的链接：

const headerElements = [
  {
    pageLinksHeader: document.createElement("div"),
    class: "page-links-header",
  },
  {
    companyNameHeader: document.createElement("div"),
    class: "company-name-header",
  },
  {
    mainPageLink: document.createElement("a"),
    text: "example",
    link: "../../index.html",
  },
  {
    webPagesHeader: document.createElement("div"),
    class: "webpages-header",
  },
  {
    webPageTarieven: document.createElement("a"),
    webPageReserveren: document.createElement("a"),
    webPageContact: document.createElement("a"),
  },
  {
    webPagesLinks: [
      "../../tarieven.html",
      "../../reseveren.html",
      "./contact.html",
    ],
    webPagesText: ["Tarieven", "Reserveren", "Contact"],
  },
];

// 提取需要用到的数组
const linkElementKeys = Object.keys(headerElements[4]);
const targetLinks = headerElements[5].webPagesLinks;
const targetTexts = headerElements[5].webPagesText;

// 一一对应设置href和文本
linkElementKeys.forEach((key, index) => {
  const currentLink = headerElements[4][key];
  currentLink.setAttribute("href", targetLinks[index]);
  // 顺便设置对应文本，和需求匹配
  currentLink.textContent = targetTexts[index];
});

补充说明

利用forEach的index参数，让每个DOM元素精准对应到链接数组里同索引的项，彻底避免重复赋值覆盖的问题。
如果后续键的数量和链接数组数量可能不一致，可以添加判断逻辑，比如if (targetLinks[index])再执行设置，防止出现索引越界报错。

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