Javascript - 从数组中删除重复的对象

Question

我正在构建一个涉及创建对象数组的应用程序，类似于：

var foo = [{
'foo' : 'foo1' 
},
{
'foo' : 'foo2' 
},
{
'foo' : 'foo3' 
}];

然后有一个 HTML 表单，用户可以在其中填写新对象的值。提交表单时，新值被推送到数组中。我想要的是一个 if/else 语句，它检查新对象是否已经存在于数组中。 所以像：

document.getElementById('form').addEventListener('submit',function(){
var newObject = {'foo' : input value goes here }
if (//Checks that newObject doesn't already exist in the array) {
    foo.push(newObject)
}
else {
//do nothing
}
});

值得注意的是，我正在使用 Angular

Answer 1

您必须遍历 foo 数组并检查是否有任何重复项。

document.getElementById('form').addEventListener('submit',function(){
    var newObject = {'foo' : input value goes here }
    if (!isInArray(foo, newObject, 'foo')) {
        foo.push(newObject)
    }
});
function isInArray(arr, newObj, type) {
    var i, tempObj, result = false;
    for (i = 0; i < arr.length; i += 1) {
        tempObj = arr[i];
         if (tempObj[type] === newObj[type]) {
            result = true;
        }
    }
    return result;
}

如果您的数组不包含对象，它会更容易和更快。然后，您只需将 if 子句设置为：

document.getElementById('form').addEventListener('submit',function(){
    var newString = "foo bar";
    if (foo.indexOf(newString) === -1) {
        foo.push(newString);
    }
});

Answer 2

您可以使用这种方法：

你需要：

1. 了解如何比较 2 个对象。
2. 循环执行。

如何比较 2 个对象。

其中一种方法是：

JSON.stringify(obj1) === JSON.stringify(obj2) 

注意，这样比较对象不好：

序列化对象只是为了比较是非常昂贵的，而且不 保证可靠

正如本文中 cmets 中提到的 cookie 怪物。 我只是建议它，以实现您想要的。您可以找到更好的变体。你可以找到一些漂亮的答案here。

如何在循环中做到：D

你的情况是：

function checkIfObjectExists(array, newObject) {
    var i = 0;
    for(i = 0; i < array.length; i++ ) {
        var object = array[i];
        if(JSON.stringify(object) === JSON.stringify(newObject)) 
        {
            return true;
        }   
    }
    return false;
}

另外，我添加了函数，所以你可以在你的代码中使用它。

现在将其添加到您的代码中：

if (checkIfObjectExists(foo, newObject)) {
    // objects exists, do nothing
}
else {
    foo.push(newObject);
}

DEMO