使用JavaScript从数组中删除对象

Question

如何从数组中删除对象？我想删除,其中包括名称的对象Kristian从someArray.例如:

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

我想实现:

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

Answer 1

您可以使用多种方法从Array中删除项目:

//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

如果要删除位置处的元素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}`);

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>

Answer 2

我建议使用underscore.js或sugar.js来完成这样的常见任务:

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

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

在大多数项目中,拥有一组由这些库提供的辅助方法非常有用.

Answer 3

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

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

这个问题是它不适用于IE <9.但是,你可以包含来自Javascript库的代码(例如underscore.js),它可以为任何浏览器实现这一点.

Answer 4

这个怎么样？

$.each(someArray, function(i){
    if(someArray[i].name === 'Kristian') {
        someArray.splice(i,1);
        return false;
    }
});

Answer 5

您显示的"数组"是无效的JavaScript语法.Curly括号{}用于具有属性名称/值对的对象,但方括号[]用于数组 - 如下所示:

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);

Answer 6

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');

它将删除约翰!

Answer 7

你可以使用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')

Answer 8

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

我们得到名称属性值为“Kristian”的对象的索引

const index = someArray.findIndex(key => key.name === "Kristian");
console.log(index); // 0

通过使用 splice 函数，我们删除名称属性值为“Kristian”的对象

someArray.splice(index,1);
console.log(someArray); // [{name:"John", lines:"1,19,26,96"}]

Answer 9

我已经创建了一个动态函数获取对象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"));

Answer 10

这是一个适合我的功能:

function removeFromArray(array, value) {
    var idx = array.indexOf(value);
    if (idx !== -1) {
        array.splice(idx, 1);
    }
    return array;
}

Answer 11

someArray = jQuery.grep(someArray , function (value) {
        return value.name != 'Kristian';
});

Answer 12

你也可以尝试做这样的事情:

var myArray = [{'name': 'test'}, {'name':'test2'}];
var myObject = {'name': 'test'};
myArray.splice(myArray.indexOf(myObject),1);

Answer 13

在数组上使用拼接功能.指定start元素的位置以及要删除的子序列的长度.

someArray.splice(pos, 1);

Answer 14

为UndercoreJS投票,简单地使用数组.

_.without()函数有助于删除元素:

 _.without([1, 2, 1, 0, 3, 1, 4], 0, 1);
    => [2, 3, 4]

Answer 15

表现

今天 2021.01.27 我在 Chrome v88、Safari v13.1.2 和 Firefox v84 上针对选定的解决方案在 MacOs HighSierra 10.13.6 上执行测试。

结果

对于所有浏览器：

• 元素不存在时的最快/最快解决方案：A 和 B
• 大阵列的快速/最快解决方案：C
• 元素存在时大数组的快速/最快解决方案：H
• 小阵列的相当慢的解决方案：F 和 G
• 大数组的非常慢的解决方案：D、E 和 F

细节

我执行 4 个测试用例：

• 小数组（10 个元素）并且元素存在 - 您可以在此处运行它
• 小数组（10 个元素）并且元素不存在 - 您可以在此处运行它
• 大数组（百万个元素）和元素存在 - 你可以在这里运行它
• 大数组（百万个元素）和元素不存在 - 你可以在这里运行它

下面的片段展示了解决方案A B C D E F G H I之间的差异

function A(arr, name) {
  let idx = arr.findIndex(o => o.name==name);
  if(idx>=0) arr.splice(idx, 1);
  return arr;
}


function B(arr, name) {
  let idx = arr.findIndex(o => o.name==name);
  return idx<0 ? arr : arr.slice(0,idx).concat(arr.slice(idx+1,arr.length));
}


function C(arr, name) {
  let idx = arr.findIndex(o => o.name==name);
  delete arr[idx];
  return arr;
}


function D(arr, name) {
  return arr.filter(el => el.name != name);
}


function E(arr, name) {
  let result = [];
  arr.forEach(o => o.name==name || result.push(o));
  return result;
}


function F(arr, name) {
  return _.reject(arr, el => el.name == name);
}


function G(arr, name) {
  let o = arr.find(o => o.name==name);
  return _.without(arr,o);
}


function H(arr, name) {
  $.each(arr, function(i){
      if(arr[i].name === 'Kristian') {
          arr.splice(i,1);
          return false;
      }
  });
  return arr;
}


function I(arr, name) {
  return $.grep(arr,o => o.name!=name);
}








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

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

let test3 = [   
    {name:"John3", lines:"1,19,26,96"},
    {name:"John", lines:"1,19,26,96"},
  {name:"Joh2", lines:"1,19,26,96"},
];

console.log(`
Test1: original array from question
Test2: array with more data
Test3: array without element which we want to delete
`);

[A,B,C,D,E,F,G,H,I].forEach(f=> console.log(`
Test1 ${f.name}: ${JSON.stringify(f([...test1],"Kristian"))}
Test2 ${f.name}: ${JSON.stringify(f([...test2],"Kristian"))}
Test3 ${f.name}: ${JSON.stringify(f([...test3],"Kristian"))}
`));

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
  
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js" integrity="sha512-90vH1Z83AJY9DmlWa8WkjkV79yfS2n2Oxhsi2dZbIv0nC4E6m5AbH8Nh156kkM7JePmqD6tcZsfad1ueoaovww==" crossorigin="anonymous"> </script>
  
This shippet only presents functions used in performance tests - it not perform tests itself!

以下是 chrome 的示例结果

Answer 16

带 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)

Answer 17

这是一个带有地图和拼接的示例

const arrayObject = [
  { name: "name1", value: "value1" },
  { name: "name2", value: "value2" },
  { name: "name3", value: "value3" },
];

let index = arrayObject.map((item) => item.name).indexOf("name1");
if (index > -1) {
  arrayObject.splice(index, 1);
  console.log("Result", arrayObject);
}

输出

Result [
  {
    "name": "name2",
    "value": "value2"
  },
  {
    "name": "name3",
    "value": "value3"
  }
]