使用JavaScript从数组中删除对象

545

如何从数组中删除对象？我想删除，其中包括名称的对象Kristian从someArray。例如：

someArray = [{name:"Kristian", lines:"2,5,10"},
             {name:"John", lines:"1,19,26,96"}];

我要实现：

someArray = [{name:"John", lines:"1,19,26,96"}];
javascript  arrays 
— 克莱姆
source
1
— 昆丁
3
仅供参考，我已经撤消了对该问题的编辑，因此数组语法再次错误，并且所有这些答案都在上下文中。
— Dunhamzzz'4
2
然后再次对数组语法进行“更正”（两次），以使答案不再与上下文相关。
— Teepeemm，2015年
4
语法错误如何使某些答案有意义？
— Samy Bencherif '16
1
@SamyBencherif-一些答案明确解决了问题原始版本中的语法错误，因此，如果您删除该语法错误，那么这些答案现在正在谈论的是不存在的内容。
— nnnnnn

Answers:

778

您可以使用多种方法从数组中删除项目：

//1
someArray.shift(); // first element removed
//2
someArray = someArray.slice(1); // first element removed
//3
someArray.splice(0, 1); // first element removed
//4
someArray.pop(); // last element removed
//5
someArray = someArray.slice(0, a.length - 1); // last element removed
//6
someArray.length = someArray.length - 1; // last element removed

如果要删除position处的元素x，请使用：

someArray.splice(x, 1);

要么

someArray = someArray.slice(0, x).concat(someArray.slice(-x));

回复@ chill182的评论：您可以使用Array.filter或Array.splice结合使用Array.findIndex（参见MDN）从数组中删除一个或多个元素，例如

// non destructive filter > noJohn = John removed, but someArray will not change
let someArray = getArray();
let noJohn = someArray.filter( el => el.name !== "John" ); 
log("non destructive filter > noJohn = ", format(noJohn));
log(`**someArray.length ${someArray.length}`);

// destructive filter/reassign John removed > someArray2 =
let someArray2 = getArray();
someArray2 = someArray2.filter( el => el.name !== "John" );
log("", "destructive filter/reassign John removed > someArray2 =", 
  format(someArray2));
log(`**someArray2.length ${someArray2.length}`);

// destructive splice /w findIndex Brian remains > someArray3 =
let someArray3 = getArray();
someArray3.splice(someArray3.findIndex(v => v.name === "Kristian"), 1);
someArray3.splice(someArray3.findIndex(v => v.name === "John"), 1);
log("", "destructive splice /w findIndex Brian remains > someArray3 =", 
  format(someArray3));
log(`**someArray3.length ${someArray3.length}`);

// Note: if you're not sure about the contents of your array, 
// you should check the results of findIndex first
let someArray4 = getArray();
const indx = someArray4.findIndex(v => v.name === "Michael");
someArray4.splice(indx, indx >= 0 ? 1 : 0);
log("", "check findIndex result first > someArray4 (nothing is removed) > ",
  format(someArray4));
log(`**someArray4.length (should still be 3) ${someArray4.length}`);

function format(obj) {
  return JSON.stringify(obj, null, " ");
}

function log(...txt) {
  document.querySelector("pre").textContent += `${txt.join("\n")}\n`
}

function getArray() {
  return [ {name: "Kristian", lines: "2,5,10"},
           {name: "John", lines: "1,19,26,96"},
           {name: "Brian", lines: "3,9,62,36"} ];
}
<pre>
**Results**

</pre>
展开摘要

— KooiInc
source
2
@Klemzy您的意思不是不是通过索引吗？按价值...？
— 罗伊·纳米尔
327
最初的问题询问如何从数组中删除名称为“ Kristian”的对象。您的答案假定它是数组中的第一项，但是如果Kristin不在第一项中怎么办？这样您的答案就不起作用了。
— 罗谢尔C
7
@ chill182：这不是一个具体的答案，而是一个更通用的答案。从中，您应该能够推断出删除元素的方法。如果要删除位置x处的元素 ...可能是删除第一个元素以外的提示，对吗？
— KooiInc 2012年
6
拼接功能对我很有帮助，但是您不应该重新分配someArray。这将导致someArray包含已删除的项目，而不是包含已删除项目的结果数组。
— 肯恩·卡尔
1
findIndex在中使用它之前，您应该检查结果splice。如果数组中没有匹配的元素，则条件findIndex将返回-1，直接将其放入splice将导致数组中最后一个元素的任意删除。
— jdnz
131

我建议对此类常见任务使用lodash.js或sugar.js：

// lodash.js
someArray = _.reject(someArray, function(el) { return el.Name === "Kristian"; });

// sugar.js
someArray.remove(function(el) { return el.Name === "Kristian"; });

在大多数项目中，像这样的库提供一组辅助方法非常有用。

— 精神病
source
13
我认为下划线示例略有不足。应该是someArray = _.reject(someArray, function(el) { return el.Name === "Kristian"; });
— 安迪·福特
7
如果你不希望使用underscore.js或sugar.js，你可以做到这一点someArray = someArray.filter(function(e) { return e.Name !== "Kristian"; });
— BenR
1
我想要的另一件事，是数组中的每个对象都有单独的按钮。如果我想删除单击数组按钮中的特定对象。怎么做 。我已经使用angular js ng-repeat生成项目。你能帮我吗
— Thilak Raj
5
这里要与谷物作对；建议其中包括一个整个库，其简单目的是从对象中删除项目（如已接受的答案所示，js干净利索地支持该库）形式不佳。除非您已经需要库提供的更强大的功能，否则它将为您的代码增加不必要的重量和复杂性。
— 乔什·多伯伯特
4
为了简单操作，我永远不建议包括图书馆
— Munna Bhakta，
130

干净的解决方案是使用Array.filter：

var filtered = someArray.filter(function(el) { return el.Name != "Kristian"; });

这样做的问题是它在IE <9上不起作用。但是，您可以包括来自Java库的代码（例如underscore.js），该代码可为任何浏览器实现此功能。

— 乔恩
source
9
但是，这将删除所有发现的事件，而不仅仅是第一个事件
— Flavien Volken '16
4
并且它将返回一个新数组，而不是修改原始数组。根据使用情况，这可能不是您想要的。
— Jochie Nabuurs
1
@JochieNabuurs这确实是一个新数组。但是，对象保持不变。您仍然可以修改每个对象的值，它将反映在原始数组的对象上。
— DriLLFreAK100
2
关于返回一个新数组的问题，只是将解决方案更改为解决someArray = someArray.filter(function(el) { return el.Name != "Kristian"; }); 这个问题，不是吗？
— hBrent
93

这个怎么样？

$.each(someArray, function(i){
    if(someArray[i].name === 'Kristian') {
        someArray.splice(i,1);
        return false;
    }
});
— 艾伦·泰勒
source
8
不会导致错误，因为$.each()在循环之前会缓存数组长度，因此，如果删除一个元素，$.each()它将超出（现在更短）数组的末尾。（因此someArray[i]将会undefined并且undefined.name将会崩溃。）
— nnnnnn
5
然后在拼接后添加“ return false”。
— 艾伦·泰勒
18
这不是JavaScript。-1
— 尸检
20
请注意，此答案需要jQuery
— Clarkey
68

所示的“数组”是无效的JavaScript语法。圆括号{}用于具有属性名称/值对的对象，而方括号[]用于数组-像这样：

someArray = [{name:"Kristian", lines:"2,5,10"}, {name:"John", lines:"1,19,26,96"}];

在这种情况下，您可以使用该.splice()方法删除项目。要删除第一项（索引0），请说：

someArray.splice(0,1);

// someArray = [{name:"John", lines:"1,19,26,96"}];

如果您不知道索引，但想在数组中搜索以找到要删除的名称为“ Kristian”的项目，则可以这样做：

for (var i =0; i < someArray.length; i++)
   if (someArray[i].name === "Kristian") {
      someArray.splice(i,1);
      break;
   }

编辑：我刚刚注意到您的问题被标记为“ jQuery”，所以您可以尝试该$.grep()方法：

someArray = $.grep(someArray,
                   function(o,i) { return o.name === "Kristian"; },
                   true);
— nnnnnn
source
他们为什么要增加过载？当然，您可以只输入！=“ Kristian”。过载有什么作用？
— markthewizard1234年
@ markthewizard1234-您是说“反转”布尔参数$.grep()吗？在此示例中，它并没有增加太多，是的，我可以放进去!=，但是在其他情况下，您可能已经定义了一个函数，该函数恰好对您要grep的内容进行了相反的测试，因此，而不是定义一个附加功能，您可以仅使用该重载来反转结果。
— nnnnnn
嗯，因此，如果您有一个包含grep的包装函数，则可以将布尔值设置为参数。知道了谢谢！
— markthewizard1234
@ markthewizard1234-您可以，但是那并不是我的想法：想像您有function isEven(num) { return num%2===0 }。您可以用来$.grep(someArray, isEven)从数组中仅获取偶数，或者$.grep(someArray, isEven, true)进行相反的操作以获取非偶数。
— nnnnnn
63

ES2015

let someArray = [
               {name:"Kristian", lines:"2,5,10"},
               {name:"John", lines:"1,19,26,96"},
               {name:"Kristian", lines:"2,58,160"},
               {name:"Felix", lines:"1,19,26,96"}
            ];

someArray = someArray.filter(person => person.name != 'John');

它将删除约翰！

— 赛义德
source
4
伙计...来自Java，我非常困惑，要做这样的基本操作需要过滤列表... wtf。这是到目前为止我对OP问题最准确的答案。
— codepleb
是的，这是一个好方法。虽然它也可以在ES2015（ES6）之前运行。自版本5.1（2011）ecma-international.org/ecma-262/5.1/#sec-15.4.4.20
— user3777549
40

您可以使用array.filter（）。

例如 

        someArray = [{name:"Kristian", lines:"2,5,10"},
                     {name:"John", lines:"1,19,26,96"}];

        someArray = someArray.filter(function(returnableObjects){
               return returnableObjects.name !== 'Kristian';
        });

        //someArray will now be = [{name:"John", lines:"1,19,26,96"}];

箭头功能：

someArray = someArray.filter(x => x.name !== 'Kristian')
— 达柯达
source
我想要的另一件事，是数组中的每个对象都有单独的按钮。如果我想删除单击数组按钮中的特定对象。怎么做 。我已经使用angular js ng-repeat生成项目。你能帮我吗
— Thilak Raj
daCoda如果您有两个条件怎么办？
— 马尔科姆·萨尔瓦多
@MalcolmSalvador例如说，如果您还有其他条件，则可以像下面这样写，并继续使用不同的&&或|| 根据您的需要进行操作。someArray = someArray.filter（function（returnableObjects）{return returnableObjects.name！=='Kristian'&& cond2Query.age> = 22;}）;
— Biswajit Panday
18

我制作了一个动态函数，将对象Array，Key和value删除，并在删除所需对象后返回相同的数组：

function removeFunction (myObjects,prop,valu)
        {
             return myObjects.filter(function (val) {
              return val[prop] !== valu;
          });

        }

完整示例：DEMO

var obj = {
            "results": [
              {
                  "id": "460",
                  "name": "Widget 1",
                  "loc": "Shed"
              }, {
                  "id": "461",
                  "name": "Widget 2",
                  "loc": "Kitchen"
              }, {
                  "id": "462",
                  "name": "Widget 3",
                  "loc": "bath"
              }
            ]
            };


        function removeFunction (myObjects,prop,valu)
        {
             return myObjects.filter(function (val) {
              return val[prop] !== valu;
          });

        }


console.log(removeFunction(obj.results,"id","460"));
— 比绍伊·汉娜（Bishoy Hanna）
source
15

这是一个对我有用的函数：

function removeFromArray(array, value) {
    var idx = array.indexOf(value);
    if (idx !== -1) {
        array.splice(idx, 1);
    }
    return array;
}
— 格门德斯
source
我想要的另一件事，是数组中的每个对象都有单独的按钮。如果我想删除单击数组按钮中的特定对象。怎么做 。我已经使用angular js ng-repeat生成项目。您能帮我吗
— Thilak Raj
12

您也可以尝试执行以下操作： 

var myArray = [{'name': 'test'}, {'name':'test2'}];
var myObject = {'name': 'test'};
myArray.splice(myArray.indexOf(myObject),1);
— 迈克巴森
source
10

在数组上使用拼接功能。指定起始元素的位置和要删除的子序列的长度。

someArray.splice(pos, 1);
— 含蓄的
source
4

具有ES 6箭头功能 

let someArray = [
                 {name:"Kristian", lines:"2,5,10"},
                 {name:"John", lines:"1,19,26,96"}
                ];
let arrayToRemove={name:"Kristian", lines:"2,5,10"};
someArray=someArray.filter((e)=>e.name !=arrayToRemove.name && e.lines!= arrayToRemove.lines)
— 悉达多
source
3

最简单的解决方案是创建一个按名称存储每个对象的索引的映射，如下所示：

//adding to array
var newPerson = {name:"Kristian", lines:"2,5,10"}
someMap[ newPerson.name ] = someArray.length;
someArray.push( newPerson );

//deleting from the array
var index = someMap[ 'Kristian' ];
someArray.splice( index, 1 );
— Creynders
source
我喜欢这个主意，但还必须问，随着索引的添加，这种主意的内存使用限制是多少？我有一个数组，我想在对象的2个不同字段上建立索引，因此除了原始源数组之外，我还有2个映射。这是为了支付查询速度而付出的小代价，还是有一种使用内存效率更高的解决方案？
— 布拉德·G。
3

尽管这可能不适合这种情况，但有一天我发现，delete如果不需要更改数组的大小，也可以使用关键字从数组中删除项目。

var myArray = [1,2,3];

delete myArray[1];

console.log(myArray[1]); //undefined

console.log(myArray.length); //3 - doesn't actually shrink the array down
— 杜加·麦克唐纳
source
3

这个答案 

for (var i =0; i < someArray.length; i++)
   if (someArray[i].name === "Kristian") {
      someArray.splice(i,1);
   }

对于满足条件的多个记录不起作用。如果您有两个这样的连续记录，则仅删除第一个，而另一个跳过。您必须使用：

for (var i = someArray.length - 1; i>= 0; i--)
   ...

相反。

— JarmoP
source
2

数组语法中似乎有一个错误，因此假设您的意思是数组而不是对象，Array.splice是您的朋友：

someArray = [{name:"Kristian", lines:"2,5,10"}, {name:"John", lines:"1,19,26,96"}];
someArray.splice(1,1)
— 西蒙·斯卡夫
source
2

您也可以使用地图功能。

someArray = [{name:"Kristian", lines:"2,5,10"},{name:"John",lines:"1,19,26,96"}];
newArray=[];
someArray.map(function(obj, index){
    if(obj.name !== "Kristian"){
       newArray.push(obj);
    }
});
someArray = newArray;
console.log(someArray);
— solanki ...
source
1
但是，如果要遍历数组，使用forEach更好吗？
— corse32
2

您还可以使用some：

someArray = [{name:"Kristian", lines:"2,5,10"},
             {name:"John", lines:"1,19,26,96"}];

someArray.some(item => { 
    if(item.name === "Kristian") // Case sensitive, will only remove first instance
        someArray.splice(someArray.indexOf(item),1) 
})
— 阿图尔·格里吉奥（Artur Grigio）
source
2

这就是我用的。

Array.prototype.delete = function(pos){
    this[pos] = undefined;
    var len = this.length - 1;
    for(var a = pos;a < this.length - 1;a++){
      this[a] = this[a+1];
    }
    this.pop();
  }

那就这么简单

var myArray = [1,2,3,4,5,6,7,8,9];
myArray.delete(3);

用任何数字代替三。预期输出后应为：

console.log(myArray); //Expected output 1,2,3,5,6,7,8,9
— 马蒂亚斯S
source
2

如果要删除所有出现的给定对象（基于某种条件），请在循环中使用javascript splice方法。

由于删除对象会影响数组的长度，因此请确保将计数器递减一级，以使长度检查保持不变。

var objArr=[{Name:"Alex", Age:62},
  {Name:"Robert", Age:18},
  {Name:"Prince", Age:28},
  {Name:"Cesar", Age:38},
  {Name:"Sam", Age:42},
  {Name:"David", Age:52}
];

for(var i = 0;i < objArr.length; i ++)
{
  if(objArr[i].Age > 20)
  {
    objArr.splice(i, 1);
    i--;  //re-adjust the counter.
  }
}

上面的代码段删除了所有年龄大于20的对象。

— 奥拜德
source
1

splice（i，1）其中i是数组的增量索引将删除对象。但是请记住，拼接也会重置数组长度，因此请注意“ undefined”。以您的示例为例，如果删除“ Kristian”，则在循环内的下一次执行中，我将为2，但是someArray的长度为1，因此，如果尝试删除“ John”，则会收到“未定义”错误。尽管不是很优雅的一种解决方案是具有单独的计数器以跟踪要删除的元素的索引。

— 马克苏德
source
1

仅返回属性name不是“ Kristian” 的数组中的对象

var noKristianArray = $.grep(someArray, function (el) { return el.name!= "Kristian"; });

演示：

 var someArray = [
                {name:"Kristian", lines:"2,5,10"},
                {name:"John", lines:"1,19,26,96"},
                {name:"Kristian", lines:"2,58,160"},
                {name:"Felix", lines:"1,19,26,96"}
                ];
			 
var noKristianArray = $.grep(someArray, function (el) { return el.name!= "Kristian"; });

console.log(noKristianArray);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
展开摘要

— 传说
source
0

使用Kendo Grid的本概念 

var grid = $("#addNewAllergies").data("kendoGrid");

var selectedItem = SelectedCheckBoxList;

for (var i = 0; i < selectedItem.length; i++) {
    if(selectedItem[i].boolKendoValue==true)
    {
        selectedItem.length= 0;
    }
}
— 西瓦·拉古（Siva Ragu）
source
-2

如果您想访问和删除数组的对象，只需尝试以下操作即可。

// inside some function

let someArray = [ {"ColumnName" : "a", "PropertySerno" : 100005,"UpdateType" : 1},
                  {"ColumnName" : "b", "PropertySerno" : 100202,"UpdateType" : 1,
        "ShowRemoveButton" : true} ];
        
        for (let item of someArray) {
          delete item.ShowRemoveButton;
        }
        console.log(item.outputMappingData.Data);
        
//output will be like that = [ {"ColumnName" : "a", "PropertySerno" : 100005,"UpdateType" : 1},
//                             {"ColumnName" : "b", "PropertySerno" : 100202,"UpdateType" : 1 }];
展开摘要

— Ismailuztemur
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.