在业务中,列表页跳转详情页时,经常会将Id值传入,然后再根据id值异步获取数据。

假设有服务端的json数据:  <注意,这里的data是指已经从后端获取的json, 而非后端原始的文件>

 let data = [
{id: 1, title: 'React'},
{id: 2, title: 'Vue'},
{id: 3, title: 'Angular'},
{id: 4, title: 'Django'},
{id: 5, title: 'Laravel'}
]

在前端,根据id,获取详情

 getDetail(_id) {
let result = data.find((item) => {
return item.id == _id
})
console.log(result)
} /*
_id是列表页传进来的id值, 注意:使用==, 如使用===必须左右值的类型相同
对比item.id 是否等于_id, 如相等,则返回。
*/

延伸:数组过滤方法还有filter,for循环,forEach

filter遍历整个数组,可以返回多个结果.

而find找到的第一个立即返回,不会继续往下遍历。

Javascript根据id获取数组对象的更多相关文章

  1. JavaScript 获取数组对象中某一值封装为数组

    1.获取数组对象中某一值封装为数组(一) data = [["2000-06-05",116],["2000-06-06",129]]; var dateLis ...

  2. JavaScript通过ID获取元素坐标

    JavaScript通过ID获取元素坐标 function getElementPos(elementId) {    var ua = navigator.userAgent.toLowerCase ...

  3. JavaScript中的类数组对象

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

  4. javascript事件:获取事件对象getEvent函数

    在javascript开发中我们会经常获取页面中的事件对象,然后来处理这些事件,例如下面的getEvent函数就是获取javascript下的页面事件对象. function getEvent(eve ...

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

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

  6. JavaScript通过id获取不到元素是什么原因阿?

    s代码 JavaScript code   ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 function show_more_mess() {     $(&qu ...

  7. Jquery判断$("#id")获取的对象是否存在的方法

    如果是下面的 jquery 代码判断一个对象是否存在,是不能用的 if($("#id")){ }else{} 因为 $(“#id”) 不管对象是否存在都会返回 object . 正 ...

  8. Jquery判断$("#id")获取的对象是否存在

    一.判断对象对象是否存在 如果是下面的 jQuery 代码判断一个对象是否存在,是不能用的  代码如下: if($("#id")){ }else{}  因为 $(“#id”) 不管 ...

  9. JavaScript把两个数组对象合并成一个一一对应的数组对象

    合并数组或者对象在数组或对象前面加...,是es6的新写法,然后数组的map方法会返回数组. var obj1 = [{ , "model": "XQG70-S1208F ...

随机推荐

  1. stm32f0 学习

    http://blog.csdn.net/mrlixirong/article/category/5842873

  2. UE4/Unity3d 根据元数据自动生成与更新UI

    大家可能发现一些大佬讲UE4,首先都会讲类型系统,知道UE4会根据宏标记生成一些特定的内容,UE4几乎所有高级功能都离不开这些内容,一般来说,我们不会直接去使用它. 今天这个Demo内容希望能加深大家 ...

  3. myeclipse及Eclipse中.classpath、.project、.settings、.mymetadata(myeclipse特有)介绍

    引言 今天在创建java项目的时候遇到了很多的错误,在解决的过程中遇到了一些根本不知道什么作用的文件,然后按照网上的一些做法可以将问题解决,但是这也说明我们在学习的时候很多基础和细节的地方是我们薄弱的 ...

  4. Oracle_lhr_CentOS 7.3 ECS上搭建RAC 18c+单实例DG+EMCC+DG的FSFO快速故障转移配置

    Oracle_lhr_CentOS 7.3  ECS上搭建RAC 18c+单实例DG+EMCC+DG的FSFO快速故障转移配置 [大型连续免费公开课]Oracle 18c rac+dg+13.3的em ...

  5. C#项目”XXXXX”针对的是”.NETFramework,Version=v4.7.1”但此计算机没有安装它

    遇到这样一个问题:C#项目”XXXXX”针对的是”.NETFramework,Version=v4.7.1”但此计算机没有安装它 就是我在打开别人的项目,发现别人的项目.Net Framework的版 ...

  6. a,abbr,address,area,article, aside, audio标签文档

    <a>标签 download属性 <!-- 下载hello.txt --> <a href="test.txt" download="hel ...

  7. php操作redis案例

    <?php     //实例化     $redis = new Redis();     //连接服务器     //默认端口是6379,可不写     $redis->connect( ...

  8. MUI学习01-顶部导航栏

    建议:先看一下MUI注意事项 连接:http://ask.dcloud.net.cn/article/122 固定栏靠前 所谓的固定栏,也就是带有.mui-bar属性的节点,都是基于fixed定位的元 ...

  9. python全栈开发 * 10知识点汇总 * 180612

    10 函数进阶 知识点汇总 一.动态参数 形参的第三种1.动态接收位置传参 表达:*args (在参数位置编写 * 表⽰接收任意内容) (1)动态位置参数def eat(*args): print(a ...

  10. python全栈开发 * 09知识点汇总 * 1806011

    09 函数初识一 函数的的定义# 函数: 对代码块和功能的封装和定义# 引入 回家过程 未用函数# print("步行")# print("坐地铁")# pri ...