如何从对象中删除属性？

Question

当前在

checkboxes

上设置了一个事件，

event.target

为我提供了被单击的复选框的

status (checked = true/false)

。

我正在维护一个对象，它可以跟踪所有选定的复选框

var selectedMap  = {};

if(event.target == true){
    var key = event.target.id;
    var val = event.target.name;
    selectedMap[key] = val;
}

我想从地图中删除未选中的元素

else if(event.target == false){
  selectedMap.remove(event.target.id);
}

当我运行此命令时，它会在

Firebug

中给我错误：

selectedMap.remove is not a function

所以我的问题是取消选中复选框时如何删除该元素？

Answer 1

使用

delete

：

delete selectedMap[event.target.id];

不过，您设置的值不正确。正确的做法是这样的：

if(event.target == true){
    var key = event.target.id;   // <== No quotes
    var val = event.target.name; // <== Here either
    selectedMap[key] = val;
}

事实上，你可以：

if(event.target == true){
    selectedMap[event.target.id] = event.target.name;
}

去掉事件目标的内容，用简单的字符串更容易想象这一点：

var obj = {};
obj.foo = "value of foo";
alert(obj.foo);    // alerts "value of foo" without the quotes
alert(obj["foo"]); // ALSO alerts "value of foo" without the quotes, dotted notation with a literal and bracketed notation with a string are equivalent
delete obj.foo;    // Deletes the `foo` property from the object entirely
delete obj["foo"]; // Also deletes the `foo` property from the object entirely
var x = "foo";
delete obj[x];     // ALSO deeltes the `foo` property

当使用像这样的普通对象时，我总是在键上使用前缀以避免出现问题。 （例如，如果目标元素的 ID 是“toString”，会发生什么？该对象已经有一个名为“toString”的[继承]属性，事情很快就会变得非常奇怪。）

所以对我来说，我这样做：

if(event.target == true){
    selectedMap["prefix" + event.target.id] = event.target.name;
}

...当然：

delete selectedMap["prefix" + event.target.id];

Answer 2

你拥有的是一个对象而不是一个数组（尽管数组是一个对象）。您可以使用

{}

声明对象文字，而使用

[]

声明数组文字。

您可以使用

delete

来删除对象属性，如下所示

delete selectedMap[event.target.id];

Answer 3

var selectedMap = {};

document.querySelectorAll('input[type=checkbox]').forEach(function(checkbox) {
    checkbox.addEventListener('change', function(event) {
        var key = event.target.id;
        var val = event.target.name;

        if (event.target.checked) {
            selectedMap[key] = val;
        } else {
            delete selectedMap[key];
        }
    });
});