使用 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"}];

原文由 Clem 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

 //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, someArray.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 ）。

请参阅此 Stackblitz 项目 或以下代码段：

 // non destructive filter > noJohn = John removed, but someArray will not change
 let someArray = getArray();
 let noJohn = someArray.filter( el => el.name !== "John" );
 log(`let noJohn = someArray.filter( el => el.name !== "John")`,
 `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("",
 `someArray2 = someArray2.filter( el => el.name !== "John" )`,
 `destructive filter/reassign John removed [someArray2] =`,
 format(someArray2));
 log(`**someArray2.length after filter ${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("",
 `someArray3.splice(someArray3.findIndex(v => v.name === "Kristian"), 1),`,
 `destructive splice /w findIndex Brian remains [someArray3] =`,
 format(someArray3));
 log(`**someArray3.length after splice ${someArray3.length}`);

 // 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("", `someArray4.splice(indx, indx >= 0 ? 1 : 0)`,
 `check findIndex result first [someArray4] = (nothing is removed)`,
 format(someArray4));
 log(`**someArray4.length (should still be 3) ${someArray4.length}`);

 // -- helpers --
 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 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

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

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

原文由 Jon 发布，翻译遵循 CC BY-SA 4.0 许可协议