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从一组数据中找到指定的单条数据的方法,希望对大家有所帮助!

相关文章

  • javascript之锁定表格栏位

    javascript之锁定表格栏位

    javascript之锁定表格栏位...
    2007-06-06
  • 前端url拼接参数格式&?用&和? =拼接方法实例

    前端url拼接参数格式&?用&和? =拼接方法实例

    在一些情况下需要直接往url上拼接请求参数,下面这篇文章主要给大家介绍了关于前端url拼接参数格式&?用&和? =拼接的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-02-02
  • js中字符替换函数String.replace()使用技巧

    js中字符替换函数String.replace()使用技巧

    js中字符替换函数String.replace()使用技巧,字符替换经常用的到。
    2011-08-08
  • 关于对TypeScript泛型参数的默认值理解

    关于对TypeScript泛型参数的默认值理解

    泛型可以理解为宽泛的类型,通常用于类和函数,下面这篇文章主要给大家介绍了关于对TypeScript泛型参数默认值的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-07-07
  • 微信小程序判断手机号是否合法的实例代码

    微信小程序判断手机号是否合法的实例代码

    我们在微信小程序开发的时候,手机号的验证是经常需要操作的,那么如何验证手机号呢?这篇文章主要给大家介绍了关于微信小程序判断手机号是否合法的相关资料,需要的朋友可以参考下
    2021-09-09
  • 基于逻辑运算的简单权限系统(实现) JS 版

    基于逻辑运算的简单权限系统(实现) JS 版

    基于逻辑运算的简单权限系统(实现) JS 版...
    2007-03-03
  • 浅谈layer弹出层按钮颜色修改方法

    浅谈layer弹出层按钮颜色修改方法

    今天小编就为大家分享一篇浅谈layer弹出层按钮颜色修改方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 微信小程序实现轮播图指示器

    微信小程序实现轮播图指示器

    这篇文章主要为大家详细介绍了微信小程序实现轮播图指示器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-06-06
  • 微信小程序在text文本实现多种字体样式

    微信小程序在text文本实现多种字体样式

    这篇文章主要介绍了微信小程序在text文本实现多种字体样式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-11-11
  • JavaScript函数的使用教程

    JavaScript函数的使用教程

    这篇文章主要介绍了JavaScript函数的使用教程,JavaScript函数是被设计为执行特定任务的代码块。JavaScript函数会在某代码调用它时被执行。文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-07-07

最新评论