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

不仅适用于此true for obj.hasOwnProperty(key)条件，而且其中一个名为enumerable的属性属性也必须设置为true。

你的代码怎么样？让我们看看buttons实际上是什么。您会看到这是一个包含7个属性的对象。 Chrome中仅显示4个属性，因为它们是可枚举的

＆＃13;

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

＆＃13;

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

＆＃13;

所以当你尝试执行这段代码时

＆＃13;

(function () {
    "use strict";
    var buttons = document.getElementsByClassName('remove');

    for ( var i in Object.keys( buttons ) ) {
        console.log(i);
    }
 
})();

＆＃13;

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

＆＃13;

它实际上得到了从indexes Object.keys返回的数组1,2,3,4，但您没有名称为{{1}的属性在2, 3, 4对象中。那么为什么你会得到这个错误。使用buttons函数迭代每个属性并添加事件侦听器。

＆＃13;

forEach

＆＃13;

(function () {
    "use strict";
    var buttons = document.getElementsByClassName('remove');

    Array.prototype.forEach.call(buttons, button => {
        button.addEventListener('click', function() {
            this.parentElement.remove();
            console.log(this.id);
        });
    });
 
})();

＆＃13;

Answer 2

以下是您使用buttons循环从原始代码循环for的方法：

＆＃13;

(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);
        };
    }
})();

＆＃13;

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

＆＃13;

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

Object.keys（）返回属性

2 个答案: