如何使用 JavaScript 从数组中删除对象?

IT技术 javascript arrays object
2021-01-30 12:56:03

我有一个这样的 JavaScript 对象:

id="1";
name = "serdar";

我有一个包含上述许多对象的数组。如何从该数组中删除一个对象,例如:

obj[1].remove();
6个回答

很好的splice作品:

var arr = [{id:1,name:'serdar'}];
arr.splice(0,1);
// []

不要delete在数组上使用运算符。delete不会从数组中删除条目,它会简单地将其替换为undefined.

var arr = [0,1,2];
delete arr[1];
// [0, undefined, 2]

但也许你想要这样的东西?

var removeByAttr = function(arr, attr, value){
    var i = arr.length;
    while(i--){
       if( arr[i] 
           && arr[i].hasOwnProperty(attr) 
           && (arguments.length > 2 && arr[i][attr] === value ) ){ 

           arr.splice(i,1);

       }
    }
    return arr;
}

下面只是一个例子。

var arr = [{id:1,name:'serdar'}, {id:2,name:'alfalfa'},{id:3,name:'joe'}];
removeByAttr(arr, 'id', 1);   
// [{id:2,name:'alfalfa'}, {id:3,name:'joe'}]

removeByAttr(arr, 'name', 'joe');
// [{id:2,name:'alfalfa'}]

如果您可以访问 ES2015 函数,并且正在寻找一种更实用的方法,我会采用以下方法:

const people = [
  { id: 1, name: 'serdar' },
  { id: 5, name: 'alex' },
  { id: 300, name: 'brittany' }
];

const idToRemove = 5;

const filteredPeople = people.filter((item) => item.id !== idToRemove);

// [
//   { id: 1, name: 'serdar' },
//   { id: 300, name: 'brittany' }
// [

不过要注意,filter()它是非变异的,所以你会得到一个新的数组。

请参阅 Mozilla 开发者网络关于 Filter 的说明

最干净和最快的方式(ES6)

const apps = [
  {id:1, name:'Jon'}, 
  {id:2, name:'Dave'},
  {id:3, name:'Joe'}
]

//remove item with id=2
const itemToBeRemoved = {id:2, name:'Dave'}

apps.splice(apps.findIndex(a => a.id === itemToBeRemoved.id) , 1)

//print result
console.log(apps)

更新:如果查找数组中不存在任何机会项目,请使用以下解决方案,根据 MaxZoom 的评论进行更新

const apps = [
  {id:1, name:'Jon'}, 
  {id:3, name:'Joe'}
]

//remove item with id=2
const itemToBeRemoved = {id:2, name:'Dave'}

const findIndex = apps.findIndex(a => a.id === itemToBeRemoved.id)

findIndex !== -1 && apps.splice(findIndex , 1)

//print result
console.log(apps)

我喜欢这个解决方案。这里要添加的一件事是检查索引 > -1
2021-03-21 12:56:03

您可以使用splice()方法或delete运算符。

主要区别在于,使用delete运算符删除数组元素时,即使删除数组的最后一个元素,也不影响数组的长度。另一方面,该splice()方法移动所有元素,使得在被删除元素的位置上没有空洞。

使用delete运算符的示例

var trees = ["redwood", "bay", "cedar", "oak", "maple"];  
delete trees[3];  
if (3 in trees) {  
   // this does not get executed  
}
console.log(trees.length);  //  5
console.log(trees);         //  ["redwood", "bay", "cedar", undefined, "maple"]

使用该splice()方法的示例

var trees = ["redwood", "bay", "cedar", "oak", "maple"];  
trees.splice(3, 1);
console.log(trees.length);  //  4
console.log(trees);         //  ["redwood", "bay", "cedar", "maple"]

我经常使用它,所以我创建了一个小原型。只需查找该项目,然后在匹配时将其拉出即可。

//Prototype to remove object from array, removes first
//matching object only
Array.prototype.remove = function (v) {
    if (this.indexOf(v) != -1) {
        this.splice(this.indexOf(v), 1);
        return true;
    }
    return false;
}

可以这样调用:

var arr = [12, 34, 56];
arr.remove(34);

结果将是 [12, 56]

如果删除成功则返回布尔值,如果元素不存在则返回 false。