JS从一组数据中找到指定的单条数据的方法

 更新时间:2016年06月02日 09:52:55   作者:FungLeo  
这篇文章给大家介绍基于js如何从一组数据中找到指定的单条数据,非常实用,实现方案也很简单,需要的朋友可以参考下

下面小编给大家介绍基于js如何从一组数据中找到指定的单条数据。具体方法如下所示:

在一般情况下,我们会要求后端在列表的时候输出一堆列表的JSON数据给我们,然后我们把这堆数据循环,就能在前端上显示列表了.

而我们在内容页的时候,则要求输出一个内容页的JSON数据给我们,我们就可以做内容页了.

但是,有时候,数据并不是特别复杂,我们可能需要从列表的数据中指定其中的单条数据.怎么做呢?

标准答案,find方法

var json = [{"id":1,"name":"张三"},{"id":2,"name":"李四"},{"id":3,"name":"王五"}];

如上所示,json是一个典型的列表数据.我如何指定找到ID=1的这条数据呢?

var data = json.find(function(e){return e.id == 1});
console.log(data);

通过这样的回调函数,就能找到列表数据中的单条数据了.

这段代码用了一个find方法,并且使用了一个回调函数.很优雅的解决了这个问题.下面,我将给出我的原始方案.

我的方案,for循环

上面的find方法是我通过搜索引擎找到的解决方法,点击此处: Array.prototype.find() .而我的原始解决方案如下:

var json = [{"id":1,"name":"张三"},{"id":2,"name":"李四"},{"id":3,"name":"王五"}];
var data = getJsonById(2,json);
function getJsonById(id,data){
for (var i = 0; i < data.length; i++) {
if (data[i].id==id) {
return data[i];
}
};
}

原理非常简单.通过循环遍历,找到和条件一致的内容,然后返回它即可.

以上内容是小编给大家介绍的JS从一组数据中找到指定的单条数据的方法,希望对大家有所帮助!

相关文章

  • 原生js实现新闻列表展开/收起全文功能

    原生js实现新闻列表展开/收起全文功能

    本文主要介绍了原生js实现新闻列表展开/收起全文功能的知识要点、注意事项以及完整代码。具有一定的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • 从延迟处理解析JavaScript惰性编程

    从延迟处理解析JavaScript惰性编程

    这篇文章主要为大家介绍了从延迟处理解析JavaScript惰性编程示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-10-10
  • Javascript中click与blur事件的顺序详析

    Javascript中click与blur事件的顺序详析

    这篇文章主要给大家介绍了关于Javascript中click与blur事件顺序的相关资料,文中介绍的非常详细,对大家学习或者使用Javascript中的click与blur事件具有一定的参考学习价值,需要的朋友可以下面来一起看看吧。
    2017-04-04
  • js实现文本框宽度自适应文本宽度的方法

    js实现文本框宽度自适应文本宽度的方法

    这篇文章主要介绍了js实现文本框宽度自适应文本宽度的方法,可实现根据文本框内容动态改变宽度的功能,涉及javascript动态操作页面元素属性的技巧,需要的朋友可以参考下
    2015-08-08
  • Aptos SDK交互实现过程详解

    Aptos SDK交互实现过程详解

    这篇文章主要为大家介绍了Aptos SDK交互实现过程详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • JavaScript实现轮播图方法(逻辑清晰一看就懂)

    JavaScript实现轮播图方法(逻辑清晰一看就懂)

    这篇文章主要给大家介绍了关于JavaScript实现轮播图方法的相关资料,JS轮播图的实现核心是使用JavaScript来控制图片的切换和显示,配合HTML和CSS完成布局和样式设置,文中介绍的方法逻辑清晰一看就懂,需要的朋友可以参考下
    2023-12-12
  • 无缝滚动改进版支持上下左右滚动(封装成函数)

    无缝滚动改进版支持上下左右滚动(封装成函数)

    无缝滚动改进版,封装成函数,同时支持上下左右无缝滚动。
    2012-12-12
  • 原生JS实现各种运动之复合运动

    原生JS实现各种运动之复合运动

    这篇文章主要为大家详细介绍了原生JS实现各种运动之复合运动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • 有关Promises异步问题详解

    有关Promises异步问题详解

    这篇文章主要介绍了有关JavaScript Promises异步问题详解的相关资料,需要的朋友可以参考下
    2015-11-11
  • Firefox下设为主页的JavaScript代码

    Firefox下设为主页的JavaScript代码

    在IE下,我们可以轻松使用以下代码来实现设置主页 但在firefox我们需要做的更多
    2008-09-09

最新评论