通过匹配对象数组属性与元素ID数字填充文本

嘿，我来帮你搞定这个需求！你需要把包含id和value的对象数组里的值，对应填充到页面上digit_*格式的div中——比如数组里id=1的项对应digit_1的div，要是数组里没某个id的项，对应的div就保持为空。

先看一下你给出的HTML示例：

<ul>
  <li>One: <div id="digit_1">s</div></li>
  <li>Two: <div id="digit_2">sd</div></li>
  <li>Three: <div id="digit_3">sdf</div></li>
  <li>Four: <div id="digit_4">sdff</div></li>
</ul>

假设你的对象数组结构是这样的（举个例子）：

const num = {
  items: [
    { id: 1, value: "第一组数据" },
    { id: 2, value: "第二组数据" },
    // 这里没有id=3的项
    { id: 4, value: "第四组数据" }
  ]
};

下面给你两种实用的原生JavaScript实现方法：

方法一：先清空所有目标div，再遍历数组填充 #

这种方法逻辑简单，先把所有digit_开头的div都设为空，再逐个填充数组里有的值，没覆盖到的自然就是空的：

// 第一步：清空所有digit_开头的div
document.querySelectorAll('[id^="digit_"]').forEach(div => {
  div.textContent = '';
});

// 第二步：遍历数组，把对应值填充到目标div
num.items.forEach(item => {
  const targetDiv = document.getElementById(`digit_${item.id}`);
  if (targetDiv) { // 确保页面上存在这个div，避免报错
    targetDiv.textContent = item.value;
  }
});

方法二：用映射表匹配填充（更高效） #

先把数组里的id和value做成键值对映射，再遍历所有目标div，根据id匹配对应值，没有匹配到就留空：

// 先创建id到value的映射表
const valueMap = new Map(num.items.map(item => [item.id, item.value]));

// 遍历所有digit_开头的div，匹配填充
document.querySelectorAll('[id^="digit_"]').forEach(div => {
  // 从div的id里提取数字部分（比如从digit_3拿到3）
  const digitId = parseInt(div.id.split('_')[1], 10);
  // 有对应值就填充，没有就设为空
  div.textContent = valueMap.get(digitId) || '';
});

两种方法都能满足你的需求，你可以根据自己的场景选择：如果数组项比页面div少很多，方法一更省事；如果div数量多或者数组项和div数量接近，方法二的效率更高。

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