在业务中,列表页跳转详情页时,经常会将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. Deepin 15.5上安装 Node.js

    Node.js 源码安装 以下部分我们将介绍在Ubuntu Linux下安装 Node.js . 其他的Linux系统,如Centos等类似如下安装步骤. 在 Github 上获取 Node.js 源 ...

  2. zookeeper入门及使用(一)- 安装及操作

    zookeeper是什么? highly reliable distributed coordination,用来做高可靠的分布式协调者,可用来: 业务发现(service discovery)找到分 ...

  3. 阿里java代码检测工具p3c

    阿里在杭州云栖大会上,正式发布众所期待的<阿里巴巴Java开发规约>扫描插件! 该插件由阿里巴巴P3C项目组研发.这个项目组是阿里巴巴开发爱好者自发组织形成的虚拟项目组,把<阿里巴巴 ...

  4. 判断当前viewcontroller是push还是present的方式显示的

    网上的姿势,反正我用着不管用 最正确的姿势 NSArray *viewcontrollers = self.navigationController.viewControllers; if (view ...

  5. Laravel-mix 中文文档

    镜像地址 : https://segmentfault.com/a/1190000015049847原文地址: Laravel Mix Docs   概览   基本示例 larave-mix 是位于w ...

  6. 接口和多态都为JAVA技术的核心。

    类必须实现接口中的方法,否则其为一抽象类. 实现中接口和类相同.   接口中可不写public,但在子类中实现接口的过程中public不可省. (如果剩去public则在编译的时候提示出错:对象无法从 ...

  7. 自己动手在win2003系统中添加虚拟网卡

    运用虚拟网卡我们可以更好地使用我们的网络,那么在win2003中该怎么操作呢?下面就为大家介绍下具体的步骤   虚拟网卡是用软件来实现虚拟的网卡,通过运用虚拟网卡我们可以更好地使用我们的网络.但是虚拟 ...

  8. 更改Nginx网站根目录以及导致的403 forbidden问题解决

    版权声明:本文为博主原创文章,未经博主允许不得转载. 一.更改根目录 Nginx默认网站根目录为/usr/local/nginx/html,要将它改成/home/fuxiao/www   更改方法: ...

  9. 【转】Servlet 生命周期、工作原理

    Servlet 生命周期:Servlet 加载--->实例化--->服务--->销毁. init():在Servlet的生命周期中,仅执行一次init()方法.它是在服务器装入Ser ...

  10. win10下VS2017配置GSL库

    GSL库:GNU Scientific Library 1.  下载:下载Complete package, except sources和Sources两个exe文件 2.  安装:将两个exe安装 ...