在业务中,列表页跳转详情页时,经常会将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. 学习笔记:The Log(我所读过的最好的一篇分布式技术文章)

    前言 这是一篇学习笔记. 学习的材料来自Jay Kreps的一篇讲Log的博文. 原文非常长.可是我坚持看完了,收获颇多,也深深为Jay哥的技术能力.架构能力和对于分布式系统的理解之深刻所折服.同一时 ...

  2. application.properties详解 --springBoot配置文件【转载】

    # spring boot application.properties配置的各个属性详解 # 该示例文件作为标准提供.(官方文档 翻译过来的) # 还是花了些功夫翻译,各位如果转发,请留下本文地址, ...

  3. webstrom IDE 激活

    2017.2.27更新 选择“license server” 输入:http://idea.imsxm.com/ 2016.2.2 版本的破解方式: 安装以后,打开软件会弹出一个对话框:选择“lice ...

  4. Ubuntu下安装antlr-4.7.1

    简介:antlr工具将语法文件转换成可以识别该语法文件所描述的语言的程序. 例如:给定一个识别json的语法,antlr工具将会根据该语法生成一个程序,该程序可以通过antlr运行库来识别输入的jso ...

  5. spring JdbcTemplate数据库

    DAO package DAO; import org.springframework.jdbc.core.JdbcTemplate; public class OrderDao { private ...

  6. 关于pythoh面向过程开发人员三步转面向对象的补充,再加一步,四步走战略。转面向对象也可以有固定公式。

    前言: oop非常非常非常重要.搞不懂oop,就玩不了python,就算能写也一定是写代码时候喜欢靠猜瞎猫碰死老鼠写得心很虚.为什么这么说呢,我也是从面向过程编程到死走过来的,一路def到死,一看到有 ...

  7. Python学习之解决python下载第三方依赖速度慢的问题

    原因:通过pip命令直接下载,一般下载的资源存放在国外的服务器上,导致下载速度慢.下载过程中报错: 解决方法:通过pip的命令参数,从国内的下载源,国外的替换为国内的镜像,进行目标包的下载: 具体参数 ...

  8. JPA唯一索引更新删除的问题

    本来的功能是更新,我的做法是先删除再新增.表设置了字段A和字段B的唯一主键,先删除这个字段再新增一一模一样的值(包含字段A和字段B)时会报唯一主键的值重复了,百度了下,没找到原因,于是就不删除记录了, ...

  9. ubuntu中python3安装package

    1.实验环境 Ubuntu16.04x86 + python3.5 ubuntu中同时存在python2.7 和 python3.5 2.pip使用说明 sudo pip install packag ...

  10. sql脚本练习

    多写sql语句,才能对数据库操作更加熟练. create database springbootdemo; use springbootdemo; create table user; // 这个脚本 ...