按对象属性从数组中删除对象

Question

var listToDelete = ['abc', 'efg'];

var arrayOfObjects = [{id:'abc',name:'oh'}, // delete me
                      {id:'efg',name:'em'}, // delete me
                      {id:'hij',name:'ge'}] // all that should remain

如何通过匹配对象属性从数组中删除对象？

请使用原生JavaScript.

我在使用拼接时遇到问题,因为每次删除都会缩短长度.在orignal索引上使用克隆和拼接仍然会给你带来缩短长度的问题.

Answer 1

我假设你用过splice这样的东西？

for (var i = 0; i < arrayOfObjects.length; i++) {
    var obj = arrayOfObjects[i];

    if (listToDelete.indexOf(obj.id) !== -1) {
        arrayOfObjects.splice(i, 1);
    }
}

你需要做的就是修复这个bug i,下次再减量,然后(向后循环也是一个选项):

for (var i = 0; i < arrayOfObjects.length; i++) {
    var obj = arrayOfObjects[i];

    if (listToDelete.indexOf(obj.id) !== -1) {
        arrayOfObjects.splice(i, 1);
        i--;
    }
}

为了避免线性时间删除,您可以编写要保留在数组上的数组元素:

var end = 0;

for (var i = 0; i < arrayOfObjects.length; i++) {
    var obj = arrayOfObjects[i];

    if (listToDelete.indexOf(obj.id) === -1) {
        arrayOfObjects[end++] = obj;
    }
}

arrayOfObjects.length = end;

为了避免在现代运行时中进行线性时间查找,您可以使用哈希集:

const setToDelete = new Set(listToDelete);
let end = 0;

for (let i = 0; i < arrayOfObjects.length; i++) {
    const obj = arrayOfObjects[i];

    if (setToDelete.has(obj.id)) {
        arrayOfObjects[end++] = obj;
    }
}

arrayOfObjects.length = end;

它可以包含在一个很好的功能中:

const filterInPlace = (array, predicate) => {
    let end = 0;

    for (let i = 0; i < array.length; i++) {
        const obj = array[i];

        if (predicate(obj)) {
            array[end++] = obj;
        }
    }

    array.length = end;
};

const toDelete = new Set(['abc', 'efg']);

const arrayOfObjects = [{id: 'abc', name: 'oh'},
                        {id: 'efg', name: 'em'},
                        {id: 'hij', name: 'ge'}];

filterInPlace(arrayOfObjects, obj => !toDelete.has(obj.id));
console.log(arrayOfObjects);

如果您不需要这样做,那就是Array#filter:

const toDelete = new Set(['abc', 'efg']);
const newArray = arrayOfObjects.filter(obj => !toDelete.has(obj.id));

Answer 2

您可以通过其中一个属性删除项目,而无需使用任何第三方库,如下所示:

var removeIndex = array.map(function(item) { return item.id; })
                       .indexOf("abc");

~removeIndex && array.splice(removeIndex, 1);

Answer 3

使用lodash /下划线:

如果要修改现有数组本身,则必须使用splice.这是使用findWhere of underscore/lodash的更好/可读的方式:

var items= [{id:'abc',name:'oh'}, // delete me
                  {id:'efg',name:'em'},
                  {id:'hij',name:'ge'}];

items.splice(_.indexOf(items, _.findWhere(items, { id : "abc"})), 1);

使用ES5或更高版本

(没有lodash /下划线)

从ES5开始,我们findIndex在阵列上有方法,所以很容易没有lodash /下划线

items.splice(items.findIndex(function(i){
    return i.id === "abc";
}), 1);

(几乎所有现代浏览器都支持ES5)

关于findIndex

Answer 4

根据给定数组中的 id 删除对象；

const hero = [{'id' : 1, 'name' : 'hero1'}, {'id': 2, 'name' : 'hero2'}];
//remove hero1
const updatedHero = hero.filter(item => item.id !== 1);

Answer 5

findIndex适用于现代浏览器:

var myArr = [{id:'a'},{id:'myid'},{id:'c'}];
var index = arr.findIndex(function(o){
     return o.id === 'myid';
})
if (index !== -1) myArr.splice(index, 1);

Answer 6

如果您只想将其从现有阵列中删除而不是创建新阵列,请尝试:

var items = [{Id: 1},{Id: 2},{Id: 3}];
items.splice(_.indexOf(items, _.find(items, function (item) { return item.Id === 2; })), 1);

Answer 7

通过递减i来反向循环以避免问题：

for (var i = arrayOfObjects.length - 1; i >= 0; i--) {
    var obj = arrayOfObjects[i];

    if (listToDelete.indexOf(obj.id) !== -1) {
        arrayOfObjects.splice(i, 1);
    }
}

或使用filter：

var newArray = arrayOfObjects.filter(function(obj) {
    return listToDelete.indexOf(obj.id) === -1;
});

Answer 8

使用 Set 和 ES5 过滤器检查一下。

  let result = arrayOfObjects.filter( el => (-1 == listToDelete.indexOf(el.id)) );
  console.log(result);

这是 JsFiddle：https ://jsfiddle.net/jsq0a0p1/1/

Answer 9

请使用原生JavaScript.

作为替代方案,使用ECMAScript 5的更多"功能"解决方案,您可以使用:

var listToDelete = ['abc', 'efg'];
var arrayOfObjects = [{id:'abc',name:'oh'}, // delete me
                      {id:'efg',name:'em'}, // delete me
                      {id:'hij',name:'ge'}]; // all that should remain

arrayOfObjects.reduceRight(function(acc, obj, idx) {
    if (listToDelete.indexOf(obj.id) > -1)
        arrayOfObjects.splice(idx,1);
}, 0); // initial value set to avoid issues with the first item and
       // when the array is empty.

console.log(arrayOfObjects);
[ { id: 'hij', name: 'ge' } ]

根据ECMA-262中'Array.prototype.reduceRight'的定义:

reduceRight不会直接改变调用它的对象,但是对象可能会被callbackfn的调用所突变.

所以这是一个有效的用法reduceRight.