js对象数组查找某一元素的各种方法(不改变原数组)

更新时间：2024年06月13日 10:23:57 作者：慢慢雨夜

前端经常要通过javaScript来处理数组中的数据,其中就包括检查数组中是否包含满足特定搜索条件的单个或者多个值,这篇文章主要给大家介绍了关于js对象数组查找某一元素的各种方法,文中介绍的方法不改变原数组,需要的朋友可以参考下

find()方法

这个方法会返回数组中第一个符合条件的元素，如果没有符合条件的元素则返回undefined。

const arr = [{name: '张三', age: 20}, {name: '李四', age: 30}, {name: '王五', age: 25}]
const result = arr.find(item => item.name === '李四')
//result = {name: '李四', age: 30}

filter()方法

这个方法会返回符合条件的元素组成的新数组，如果没有符合条件的元素则返回空数组。

const arr = [{name: '张三', age: 20}, {name: '李四', age: 30}, {name: '王五', age: 25}]
const result = arr.filter(item => item.age > 20)
// result = [{name: '李四', age: 30}, {name: '王五', age: 25}]

some()方法

这个方法会返回一个布尔值，表示数组中是否存在至少一个符合条件的元素。

const arr = [{name: '张三', age: 20}, {name: '李四', age: 30}, {name: '王五', age: 25}]
const result = arr.some(item => item.name === '李四')
// result = true

findIndex()方法

这个方法会返回数组中第一个符合条件的元素的索引，如果没有符合条件的元素则返回-1。

const arr = [{name: '张三', age: 20}, {name: '李四', age: 30}, {name: '王五', age: 25}]
const result = arr.findIndex(item => item.name === '李四')
// result = 1

forEach()方法

这个方法可以遍历整个数组，通过判断每一个元素是否符合条件来找到目标元素。

const arr = [{name: '张三', age: 20}, {name: '李四', age: 30}, {name: '李四', age: 66}]
let result
arr.forEach(item => {  if (item.name === '李四') {
    result = item
  }
})
// result = {name: '李四', age: 66}

注意：以上方法都不会改变原数组，如果想要改变原数组可以使用splice()方法。

附：js检查对象数组中的每个对象是否包含另一个数组中的属性,并取出相同的值

检查数组对象是否包含另一个数组的值,并取出相同的数组对象。

例子:

返回结果:

[{name:"zangsan",age:"18"},{name:"wangwu",age:"12"}]

js代码:

const movies  = [
{name:"zangsan",age:"18"},
{name:"zhaoliu",age:"21"},
{name:"wangwu",age:"12"}
];
const filters = ["zangsan", "wangwu"];
const res = movies.filter(
  movie => Object.values(movie).some(v => filters.includes(v))
);

console.log(res);

总结

到此这篇关于js对象数组查找某一元素的各种方法的文章就介绍到这了,更多相关js对象数组查找某一元素内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

JavaScript中ES6规范中let和const的用法和区别
这篇文章主要介绍了JavaScript中ES6规范中let和const的用法和区别，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-08-08
小程序Request的另类用法详解
这篇文章主要介绍了小程序Request的另类用法详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-08-08
JS实现QQ图片一闪一闪的效果小例子
这篇文章介绍了JS实现QQ图片一闪一闪的效果小例子，有需要的朋友可以参考一下
2013-07-07
JavaScript如何实现在文本框(密码框)输入提示语
为了更好的达到用户体验度，我们在登录表单时会有一些提示语言，比如说：“请输入用户名”和“请输入密码”等语言，下面小编通过本篇文章给大家分享JavaScript如何实现在密码框中出现提示语，对js密码框提示语相关知识感兴趣的朋友一起学习吧
2015-12-12
JavaScript中字符串(string)转json的2种方法
这篇文章主要介绍了JavaScript中字符串(string)转json的2种方法,两种方法分别是使用js函数eval()和、使用jquery.parseJSON()方法,需要的朋友可以参考下
2015-06-06
BootStrap 动态表单效果
这篇文章主要介绍了BootStrap 动态表单效果,实现代码分为js部分和html部分，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友可以参考下
2017-06-06
javascript getElementById 使用方法及用法
顾明思义，get-Element-By-Id，就是通过ID来设置/返回HTML标签的属性及调用其事件与方法。用这个方法基本上可以控制页面所有标签，条件很简单就是给每个标签分配一个ID号
2008-11-11
利用javascript如何随机生成一定位数的密码
这篇文章主要给大家介绍了关于利用javascript如何随机生成一定位数的密码的相关资料，文中给出了详细的示例代码，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
2017-09-09
基于JavaScript实现百叶窗动画效果不只单纯flas可以实现
看到这种百叶窗效果的动画，以为是用flash做的，下面通过本文给大家介绍基于JavaScript实现百叶窗动画效果，需要的朋友参考下吧
2016-02-02
浅析JavaScript中命名空间namespace模式
namespace即“命名空间”，也称“名称空间” 、”名字空间”。接下来通过本文给大家介绍JavaScript中命名空间namespace模式的相关知识，非常不错，具有参考借鉴价值，感兴趣的朋友一起学习吧
2016-06-06