英文 | 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 中删除/过滤数组的方法【转】的更多相关文章

  1. JavaScript中常见的数组操作函数及用法

    JavaScript中常见的数组操作函数及用法 昨天写了个帖子,汇总了下常见的JavaScript中的字符串操作函数及用法.今天正好有时间,也去把JavaScript中常见的数组操作函数及用法总结一下 ...

  2. 从数组A中删除在数组B中存在的元素,用C语言实现

    从数组A中删除在数组B中存在的元素,用C语言实现 考验数组操作的能力,C语言的熟练程度. //功能:从数组A中删除在数组B中也存在的数据 //输入:arrA --- 数组A // lenA --- 数 ...

  3. 深入了解JavaScript中的Symbol的使用方法

    这篇文章主要介绍了深入了解JavaScript中的Symbol的使用方法,本文针对ES6版本的JS进行讲解,需要的朋友可以参考下 Symbol 是什么? Symbols 不是图标,也不是指在代码中可以 ...

  4. JavaScript中类似PHP的uniqid()方法

    JavaScript中类似PHP的uniqid()方法: function generateUIDNotMoreThan1million() { return ("0000" + ...

  5. JavaScript中Number常用属性和方法

    title: JavaScript中Number常用属性和方法 toc: false date: 2018-10-13 12:31:42 Number.MAX_VALUE--1.79769313486 ...

  6. [转贴]JavaScript中Array(数组)的属性和方法

    数组有四种定义的方式 使用构造函数:var a = new Array();var b = new Array(8); var c = new Array("first", &qu ...

  7. sort方法实际应用详解---javascript中对一个对象数组按照对象某个属性进行排序

    转载: 查看原文 在javascript中,对象和数组是两种不同的类型,这和php中的数组概念不同.在javascript中,也有一些精妙的算法,用来对一些对象进行排序.我在面试迅雷的时候,也拿到一道 ...

  8. java基础64 JavaScript中的Arrays数组对象和prototype原型属性(网页知识)

    1.Arrays数组对象的创建方式 方式一: var 变量名=new Array(); //创建一个长度为0的数组. 方式二: var 变量名=new Array(长度); //创建一个指定长度的数组 ...

  9. JavaScript中的Array数组详解

    ECMAScript中的数组与其他多数语言中的数组有着相当大的区别,虽然数组都是数据的有序列表,但是与其他语言不同的是,ECMAScript数组的每一项可以保存任何类型的数据.也就是说,可以用数组的第 ...

  10. JavaScript中的类数组对象

    在javascript中,对象与数组都是这门语言的原生规范中的基本数据类型,处于并列的位置. 一般来说,如果我们有一个对象obj和一个数组a: obj["attr1"];    / ...

随机推荐

  1. 【4】配置和运行Opencv常见的一些问题总结,以及bug解决。

    相关文章: [1]windows下安装OpenCV(4.3)+VS2017安装+opencv_contrib4.3.0配置 [2]Visual Studio 2017同时配置OpenCV2.4 以及O ...

  2. 21.11 Python 使用CRC图片去重

    使用CRC32还可实现图片去重功能,如下FindRepeatFile函数,运行后通过对所有文件做crc校验并将校验值存储至CatalogueDict字典内,接着依次提取CRC特征值并将其存储至Cata ...

  3. TP5图片处理常见问题

    一.Class 'think\Image' not found composer require topthink/think-image 装上了扩展控制器头部加了 use think\Image然后 ...

  4. [奶奶看了都会]ChatGPT接入企业微信成为聊天机器人

    1.聊天效果 上次给大家讲了ChatGPT接入个人微信的方法,但是个人微信容易被封号.这次就教大家接入企业微信,不会再被封号哦~ 话不多说,直接看机器人的聊天效果.基本能实现ChatGPT的聊天效果了 ...

  5. 手把手带你上手swagger3

    配置POM 只需要加一个依赖,并且要注意,swagger3在springboot2.5版本以上会出现问题 <dependency> <groupId>io.springfox& ...

  6. NOI 2019 补全记录

    D1T1 回家路线 好久之前写的,忘了具体细节,但是发现有平方项所以考虑拆项之后斜率优化. D1T2 机器人 考虑 DP. 记 \(f_{l,r,i}\) 表示 \([l,r]\) 这段区间,最大值为 ...

  7. NC207751 牛牛的旅游纪念品

    题目链接 题目 题目描述 牛牛在牛市的旅游纪念商店里面挑花了眼,于是简单粗暴的牛牛决定--买最受欢迎的就好了. 但是牛牛的背包有限,他只能在商店的n个物品里面带m个回去,不然就装不下了. 并且牛牛希望 ...

  8. JavaScript 的灵异事件之一

    场景 在做项目的时候需要用到Ajax 做多次的异步处理数据, 三次Ajax:A --ok--> B --ok--> C 在入参数据相同的情况下,做了两论这个操作,但发现没有发送 A 的 A ...

  9. 【framework】ATMS启动流程

    1 前言 ​ ATMS 即 ActivityTaskManagerService,用于管理 Activity 及其容器(任务.堆栈.显示等).ATMS 在 Android 10 中才出现,由原来的 A ...

  10. Java设计模式-解释器模式Interpreter

    介绍 在编译原理中,一个算术表达式通过词法分析器形成词法单元,而后这些词法单元再通过语法分析器构建语法 分析树,最终形成一颗抽象的语法分析树.这里的词法分析器和语法分析器都可以看做是解释器 解释器模式 ...