为什么循环内获取data-attribute属性功能正常但仍抛出报错？

document.getElementsByClassName() 返回的是HTMLCollection类数组对象，不是普通数组。你用for...in遍历的时候，除了遍历到集合里的3个input元素，还会遍历到HTMLCollection自带的属性和方法（比如length、item()、namedItem()），这些非元素的值访问dataset属性自然会抛出报错。
因为前3次遍历刚好对应3个有效input元素，值都被正确重置了，后续遍历触发的报错不影响已经执行完成的逻辑，所以功能看起来是正常的。

任选以下任意一种方案修改即可：

方法1：用for...of遍历HTMLCollection #

写法最简洁，直接遍历集合里的元素项，不会遍历到额外属性：

function reset() {
  for (const person of people) {
    person.value = person.dataset.name
  }
}

方法2：转成数组后用forEach遍历 #

把HTMLCollection转成普通数组，再用数组的遍历方法执行逻辑：

function reset() {
  Array.from(people).forEach(person => {
    person.value = person.dataset.name
  })
}

方法3：使用传统索引for循环 #

通过下标访问集合内的元素，规避额外属性的遍历：

function reset() {
  for (let i = 0; i < people.length; i++) {
    people[i].value = people[i].dataset.name
  }
}

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