在业务中,列表页跳转详情页时,经常会将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. Oracle 19C的下载和安装部署(图形安装和静默安装)

    Oracle 19C的下载和安装部署(图形安装和静默安装)   https://docs.oracle.com/en/database/oracle/oracle-database/19/ladbi/ ...

  2. geoserver 图层样式

    1.Styled Layer Descriptor 标准描述了稳当的结构合使用规则.一个文档包含了符号定义和绘制规则,那么这个文档就叫做Styled Layer Desciptor(SLD)样式,它是 ...

  3. python利用opencv合成模糊图像

    之前需要评估图像质量来筛选成像质量不错的图片,去除由于对焦,运动等造成的模糊图像,所以在构建数据集的时候考虑用opencv对清晰的图片进行处理获得模糊的图片从而进行训练. 1) 运动模糊图像 一般来说 ...

  4. Windows下Codeblocks调试Cocos2d-x项目体验(一次失败的体验)

    很久之前的一篇文章有介绍过在Ubuntu下安装Cocos2d-x3.11并使用Codeblock调试Cocos2d-x程序:http://www.cnblogs.com/moonlightpoet/p ...

  5. [原]Failed connect to mirrors.cloud.aliyuncs.com:80; Connection refused

    web site : https://opsx.alibaba.com/mirror 运行后出现下面的Error: base//x86_64/other_db FAILED http://mirror ...

  6. pandas replace 替换功能function

    list like replace method dict like replace method regex expression import pandas as pd import numpy ...

  7. 创建多进程Process

    注册一个进程: from multiprocessing import Process import os def func(args): # 在子进程里面.args接收一个参数,如果要接受多个参数使 ...

  8. Windows 环境下 wampserver 与 phpStudy 的环境配置

    一. wamperserver 1.下载好安装到本地指定目录,官网下载地址  http://www.wampserver.com 2.根据自己实际的安装路径,D:\pc\wampserver\wamp ...

  9. 面向对象编程之Java多态

    我相信从学习计算机面向对象编程起就很多人背下了继承.封装.多态三个特性,可是多态并不是那么好理解的.通常做几道题,背下几次多态的动态绑定规律,可是依旧在一段时间后忘记了多态的存在,为什么要多态,这个程 ...

  10. 前端自动化构建工具webpack (一)之webpack安装 和 设置webpack.confi.js

    目的:  模块化开发,组件化开发,让代码符合开发规范,更高效 webpack作用:从pack,就知道这是包的意思,比较专业点叫做前端自动化打包构建工具,代码错误检查,预处理,文件合并(打包),代码压缩 ...