javascript - Object.keys() 返回属性

Question

来自this SO answer他说Object.keys()获取对象本身定义的属性(返回 true for obj.hasOwnProperty(key) 但下面的代码返回 4 keys 的属性，并且还会产生一个令我困惑的错误。

(function () {
    "use strict";
    var buttons = document.getElementsByClassName('remove');
    console.log("No of keys: ", Object.keys(buttons).length);
    for ( var i in Object.keys( buttons ) ) {
        buttons[i].onclick = function() {
            this.parentElement.remove();
            console.log(this.id);
        };
    }
})();

<div>Some entry here
    <button id="0" class="remove">Remove</button>
</div>
<div>Another entry here
    <button id="1" class="remove">Remove</button>
</div>

如何在 JavaScript 中正确执行此操作？

Answer 1

下面是如何使用 for 循环遍历原始代码中的按钮:

(function () {
    "use strict";
    var buttons = document.getElementsByClassName('remove');

    console.log(buttons);
    
    for (var index = 0 ; index < buttons.length ; ++index) {
        buttons[index].onclick = function() {
            this.parentElement.remove();
            console.log(this.id);
        };
    }
})();

<div>Some entry here
    <button id="a" class="remove">Remove</button>
</div>
<div>Another entry here
    <button id="b" class="remove">Remove</button>
</div>

请注意，buttons 对象是一个 HTMLCollection。这通过索引和 id 公开元素。在您的原始示例中，您的 id 是 0 和 1，在这种情况下非常令人困惑，因为它会导致它们与索引冲突。 Object.keys(buttons) 返回了 ['0', '1', '0', '1']，这有点奇怪，大概是因为一些数字/字符串恶作剧。我已将示例中的 id 更改为 a 和 b，因此现在 Object.keys(buttons) 将是 ['0 ', '1', 'a', 'b'].