13 種在 JavaScript 中删除/過濾數組的方法

英文 | https://javascript.plainenglish.io/13-methods-to-remove-filter-an-item-in-an-array-and-array-of-objects-in-javascript-f02b71206d9d

翻譯 | 楊小愛

我們可能總是會遇到根據一個屬性或多個屬性值從數組或對象數組中删除項目的時候，今天讓我們看看根據屬性值從數組中删除或過濾項目有哪些不同的方法。

1、POP

“pop() 方法從數組中删除最後一個元素并傳回該元素。這個方法改變了數組的長度。” （來源：MDN）

數組：

let arraypoptest = [2, 1, 2, 5, 6, 7, 8, 9, 9, 10];
let testpop = arraypoptest.pop();
console.log("array pop", testpop,"-", arraypoptest);
//10 - [2, 1, 2, 5, 6, 7, 8, 9, 9];

對象數組：

let users1 = [
{ id: 1, name: "ted" },
{ id: 2, name: "mike" },
{ id: 3, name: "bob" },
{ id: 4, name: "sara" }
];
let testpop1 = users1.pop();
console.log(
    "array of objects pop",
    JSON.stringify(testpop1),"-"
    JSON.stringify(users1)
);
//{"id":4,"name":"sara"} - [{"id":1,"name":"ted"},{"id":2,"name":"mike"},{"id":3,"name":"bob"}]

2、Shift()

“shift() 方法從數組中移除第一個元素并傳回移除的元素。這個方法改變了數組的長度。” （來源：MDN）

數組：

let arrayshifttest = [2, 1, 2, 5, 6, 7, 8, 9, 9, 10];
let testshift = arrayshifttest.shift();
console.log("array shift", testshift,"-", arrayshifttest);
//2 - [1, 2, 5, 6, 7, 8, 9, 9, 10]

對象數組：

let users2 = [
{ id: 1, name: "ted" },
{ id: 2, name: "mike" },
{ id: 3, name: "bob" },
{ id: 4, name: "sara" }];
let testshift1 = users2.shift();
console.log("array of objects shift", JSON.stringify(testshift1),"-", JSON.stringify(users2));
//{"id":1,"name":"ted"} - [{"id":2,"name":"mike"},{"id":3,"name":"bob"},{"id":4,"name":"sara"}]

3、slice

“slice() 方法将數組的一部分的淺拷貝傳回到從開始到結束（不包括結束）選擇的新數組對象中，其中開始和結束表示該數組中項目的索引。不會修改原始數組。” （來源：MDN）

數組：

let arrayslicetest = [2, 1, 2, 5, 6, 7, 8, 9, 9, 10];
let testslice = arrayslicetest.slice(0, 3);console.log("array slice", testslice, arrayslicetest); 
//not changed original array//[2, 1, 2] - [2, 1, 2, 5, 6, 7, 8, 9, 9, 10]

對象數組：

let users3 = [
{ id: 1, name: "ted" },
{ id: 2, name: "mike" },
{ id: 3, name: "bob" },
{ id: 4, name: "sara" }];
let testslice1 = users3.slice(0, 3);
console.log("array of objects slice", JSON.stringify(testslice1));
//not changed original array
//[{"id":1,"name":"ted"},{"id":2,"name":"mike"},{"id":3,"name":"bob"}]

4、splice

“ splice() 方法通過删除或替換現有元素和/或在适當位置添加新元素來更改數組的内容。” （來源：MDN）

數組：

let arraysplicetest = [2, 1, 2, 5, 6, 7, 8, 9, 9, 10];
let testsplice = arrayslicetest.splice(0, 3);

對象數組：

let users4 = [
{ id: 1, name: "ted" },
{ id: 2, name: "mike" },
{ id: 3, name: "bob" },
{ id: 4, name: "sara" }];
let testspice1 = users3.splice(0, 3);console.log("array of objects splice", JSON.stringify(testsplice));
//[{"id":1,"name":"ted"},{"id":2,"name":"mike"},{"id":3,"name":"bob"}]

5、使用 splice 删除特定值

數組：

let arr = [2, 1, 2, 5, 6, 7, 8, 9, 9, 10];
for (var i = 0; i < arr.length; i++) {
    if (arr[i] === 5) {
        arr.splice(i, 1);
    }
}
console.log("splice with specific value", arr);
//[2, 1, 2, 6, 7, 8, 9, 9, 10]

對象數組：

let users5 = [
{ id: 1, name: "ted" },
{ id: 2, name: "mike" },
{ id: 3, name: "bob" },
{ id: 4, name: "sara" }
];
for (var i = 0; i < users5.length; i++) {
    if (users5[i].name === "ted") {
        users5.splice(i, 1);
    }
}
console.log("splice with specific value array of objects",JSON.stringify( users5));
//[{"id":2,"name":"mike"},{"id":3,"name":"bob"},{"id":4,"name":"sara"}]

6、使用 splice 删除特定值 — 簡寫

“ splice() 方法通過删除或替換現有元素，或在适當位置添加新元素來更改數組的内容。”（來源：MDN）

“indexOf() 方法傳回可以在數組中找到給定元素的第一個索引，如果不存在，則傳回 -1。”（來源：MDN）

數組：

let arrShorthand = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
let val = arr.indexOf(5);
arrShorthand.splice(val, 1);
console.log("splice shorthand specific value", arrShorthand);
//[1, 2, 3, 4, 5, 6, 7, 8, 9]

對象數組：

let users6 = [
{ id: 1, name: "ted" },
{ id: 2, name: "mike" },
{ id: 3, name: "bob" },
{ id: 4, name: "sara" }
];
var removeIndex = users6.map(item => item.id).indexOf(1);
users6.splice(removeIndex, 1);
console.log("splice shorthand specific value array of objects", JSON.stringify(users6));
//[{"id":2,"name":"mike"},{"id":3,"name":"bob"},{"id":4,"name":"sara"}]

7、Filter

“filter() 方法建立一個新數組，其中包含所有通過所提供函數實作的測試的元素。”（來源：MDN）

數組：

let testarr = [2, 1, 2, 5, 6, 7, 8, 9, 9, 10];
let testarr2 = [2, 1, 2, 5, 6, 7, 8, 9, 9, 10];
let filtered = testarr.filter(function(value, index, arr) {
    return value > 5;
});
let filtered2 = testarr2.filter(item => item !== 2);
console.log("filter example 1", filtered);
//[6, 7, 8, 9, 9, 10]
console.log("filter example 2", filtered2);
//[1, 5, 6, 7, 8, 9, 9, 10]

删除多個值的過濾器：

let forDeletion = [2, 3, 5];
let mularr = [1, 2, 3, 4, 5, 3];
mularr = mularr.filter(item => !forDeletion.includes(item));
console.log("multiple value deletion with filter", mularr);
//[1, 4]

對象數組：

let users7 = [
{ id: 1, name: "ted" },
{ id: 2, name: "mike" },
{ id: 3, name: "bob" },
{ id: 4, name: "sara" }
];
let filterObj = users7.filter(item => item.id !== 2);
console.log("filter example array of objects", filterObj);
//[{"id":1,"name":"ted"},{"id":3,"name":"bob"},{"id":4,"name":"sara"}]

8、delete operator

“JavaScript delete 操作符從對象中删除一個屬性；如果不再持有對同一屬性的更多引用，它最終會自動釋放。”（來源：MDN）

let ar = [2, 1, 2, 5, 6, 7, 8, 9, 9, 10];
delete ar[4]; // delete element with index 4
console.log(ar);
//[2, 1, 2, 5, undefined, 7, 8, 9, 9, 10]

9、lodash remove

_remove “從數組中删除謂詞傳回真值的所有元素，并傳回已删除元素的數組。謂詞使用三個參數調用：（值、索引、數組）。” （來源：lodash）

數組：

let arrlodashtest = [2, 1, 2, 5, 6, 7, 8, 9, 9, 10];
let evens = _.remove(arrlodashtest, function(n) {
    return n % 2 == 0;
});
console.log("lodash remove array", arrlodashtest);
//[1, 5, 7, 9, 9]

對象數組：

let users8 = [
{ id: 1, name: "ted" },
{ id: 2, name: "mike" },
{ id: 3, name: "bob" },
{ id: 4, name: "sara" }
];
let evensObj = _.remove(users8, function(n) {
    return n.id % 2 == 0;
});
console.log("lodash remove array of object", JSON.stringify(evensObj));
//[{"id":2,"name":"mike"},{"id":4,"name":"sara"}]

10、對象實用程式

“Object.entries() 方法傳回給定對象自己的可枚舉字元串鍵控屬性 [key, value] 對的數組，其順序與 for...in 循環提供的順序相同。” （來源：MDN）

const object = [1, 2, 3, 4];
const valueToRemove = 3;
const arrObj = Object.values(
    Object.fromEntries(
        Object.entries(object).filter(([key, val]) => val !== valueToRemove)
    )
);
console.log("object utilites", arrObj); // [1,2,4]

11、 lodash filter

_filter “疊代集合的元素，傳回所有元素的數組，謂詞傳回真值。謂詞使用三個參數調用：（值、索引|鍵、集合）。” （來源：lodash）

let users10 = [
{ id: 1, name: “ted” },
{ id: 2, name: “mike” },
{ id: 3, name: “bob” },
{ id: 4, name: “sara” }
];
const lodashFilter = _.filter(users10, { id: 1 });
console.log(“lodash filter”, JSON.stringify(lodashFilter));
//[{"id":1,"name":"ted"}]

12、lodash without

_without “傳回過濾值的新數組。” （來源：lodash）

let lodashWithout = [2, 1, 2, 3];
let lodashwithoutTest = _.without(lodashWithout, 1, 2);
console.log(lodashwithoutTest);
//[3]

13、lodash reject

_reject “與 _.filter 做相反的事情，這個方法傳回predicate不傳回真值的集合元素。”（來源：lodash）

let users9 = [
{ id: 1, name: "ted" },
{ id: 2, name: "mike" },
{ id: 3, name: "bob" },
{ id: 4, name: "sara" }
];
const result = _.reject(users9, { id: 1 });
console.log("lodash reject", result);
//[{"id":2,"name":"mike"},{"id":3,"name":"bob"},{"id":4,"name":"sara"}]

總結

13 種在 JavaScript 中删除/過濾數組的方法

繼續閱讀

JSON三種建立方式

SpringMVC 傳回json的兩種方式

json傳輸資料解決中文亂碼問題

HDU 4609 3-idiots

HDU 1402 A * B Problem Plus

關于 underscore 中模闆引擎的應用示範樣例

underscore 模闆标簽修改。

Ajax——模闆引擎

使用underscore的template自定義模闆

underscore模闆功能的使用和學習

數組和類數組

[HTML5]自定義屬性 data-* 和 jQuery.data 詳解

七牛雲-C#SDK-上傳-前期準備

vue-cli簡介（中文翻譯）

Ajax發送和擷取json資料到Spring mvc 1.spring mvc後端2.web前段

JSONObject包導入異常 java.lang.NoClassDefFoundErrorweb項目的導入包的問題