微信|web前端 - JavaScript 中删除/过滤数组的方法总结( 二 )


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); // [124

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\"

今天爱创课堂小编的分享就到这里了 , 有想学习前端 , 了解前端更多知识的同学 , 欢迎大家添加小编威haomei0452领取前端学习资料 , 也可以关注 , 点赞 , 私信小编!!!