JavaScript中json数组查找数据的几种方式(含模糊查找)

 更新时间:2023年09月10日 08:54:06   作者:Tanjia_kiki  
这篇文章主要给大家介绍了关于JavaScript中json数组查找数据的几种方式,文中包括模糊查找,文中给出了详细的代码示例,对大家学习或者使用json具有一定的参考借鉴价值,需要的朋友可以参考下

在 JavaScript 中,有几种常见的方式可以用来查找 JSON 数组中的数据。

下面介绍了其中的几种方式:

1、使用 find() 方法: find() 方法用于在数组中查找满足指定条件的第一个元素,并返回该元素。它接受一个回调函数作为参数,该回调函数会对数组中的每个元素进行执行,如果回调函数返回 true,则返回该元素,否则返回 undefined

var jsonArray = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Jane' },
  { id: 3, name: 'Alice' }
];
var result = jsonArray.find(function(item) {
  return item.id === 2;
});
console.log(result); // { id: 2, name: 'Jane' }

2.使用 filter() 方法: filter() 方法用于在数组中查找满足指定条件的所有元素,并返回一个包含符合条件的元素的新数组。它也接受一个回调函数作为参数,并在回调函数返回 true 时将当前元素添加到结果数组中。

var jsonArray = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Jane' },
  { id: 3, name: 'Alice' }
];
var result = jsonArray.filter(function(item) {
  return item.name.includes('a');
});
console.log(result); // [{ id: 2, name: 'Jane' }, { id: 3, name: 'Alice' }]

3.使用 forEach() 方法或普通的 for 循环: 你可以使用 forEach() 方法或普通的 for 循环遍历数组,并通过条件判断来找到匹配的元素。

使用 forEach() 方法的示例:

var jsonArray = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Jane' },
  { id: 3, name: 'Alice' }
];
var result;
jsonArray.forEach(function(item) {
  if (item.name === 'Jane') {
    result = item;
  }
});
console.log(result); // { id: 2, name: 'Jane' }

4.使用 for 循环的示例:

var jsonArray = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Jane' },
  { id: 3, name: 'Alice' }
];
var result;
for (var i = 0; i < jsonArray.length; i++) {
  if (jsonArray[i].name === 'Jane') {
    result = jsonArray[i];
    break;
  }
}
console.log(result); // { id: 2, name: 'Jane' }

这些方法都提供了不同的灵活性和适用场景。你可以根据具体的需求选择最适合的方式来查找 JSON 数组中的数据。

总结

到此这篇关于JavaScript中json数组查找数据的几种方式的文章就介绍到这了,更多相关json数组查找数据方式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 将input file的选择的文件清空的两种解决方案

    将input file的选择的文件清空的两种解决方案

    上传文件时,选择了文件后想清空文件路径,经搜索发现个不错的方法在此与大家分享下,感兴趣的朋友不要错过
    2013-10-10
  • QTreeWidget中MainWindow窗体中布局器不起作用详解

    QTreeWidget中MainWindow窗体中布局器不起作用详解

    本文主要介绍了QTreeWidget中MainWindow窗体中布局器不起作用详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04
  • js调用webservice构造SOAP进行身份验证

    js调用webservice构造SOAP进行身份验证

    这篇文章主要介绍了js调用webservice构造SOAP进行身份验证的相关资料,需要的朋友可以参考下
    2016-04-04
  • js函数的延迟加载实现代码

    js函数的延迟加载实现代码

    延迟加载的函数,第一次调用后,会覆盖原来的老函数,以后再次调用的是新函数,不会再进行条件的判断,提升效率
    2012-10-10
  • js实现浮动在网页右侧的简洁QQ在线客服代码

    js实现浮动在网页右侧的简洁QQ在线客服代码

    这篇文章主要介绍了js实现浮动在网页右侧的简洁QQ在线客服代码,通过简单的自定义函数控制客服图片的显示与隐藏效果,非常具有实用价值,需要的朋友可以参考下
    2015-09-09
  • 小程序中实现excel数据的批量导入的示例代码

    小程序中实现excel数据的批量导入的示例代码

    本文主要介绍了小程序中实现excel数据的批量导入的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-07-07
  • uniapp自定义页面跳转loading的实现代码

    uniapp自定义页面跳转loading的实现代码

    有些页面加载起来比较慢,为了加强用户体验效果,所以一般都会做一个页面加载等待的提示,页面加载完成后消失,下面这篇文章主要给大家介绍了关于uniapp自定义页面跳转loading的实现代码,需要的朋友可以参考下
    2023-06-06
  • 让textarea自动调整大小的js代码

    让textarea自动调整大小的js代码

    让textarea自动调整大小的js代码,需要的朋友可以参考下。
    2011-04-04
  • javascript 实现map集合

    javascript 实现map集合

    本文给大家分享的是个人项目中需要的一个小功能,当时经过一番度娘才实现,现在从项目中拿出来,分享给大家,需要的小伙伴快来参考下吧。
    2015-04-04
  • 深入理解JS中的Promise.race控制并发量

    深入理解JS中的Promise.race控制并发量

    这篇文章主要为大家介绍了JS中的Promise.race控制并发量的深入理解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-04-04

最新评论