开发遇到，写个随笔，以防我的金鱼记忆

场景：一个页面从后台拿到20条数据，把他们展现在页面上，当点击某一个item时，需要展示这个item的详情，通常不会去把页面调走，就在本页面通过 display: none; 来展示。问题是，点击某一条item时，不去请求后台接口，就展示当前item的详情（详情数据在首次后台拿取数据list的时候一并返回）

上图：

 

之请求一次后台接口，就实现掉上述功能。那么把后台传来的数据保存在自己的定义数组中即可，点击item时就可以直接拿出开使用

，以减少请求次数（前提是后台返回给你的足够的信息）

1.定义一个对象 detailOne{}；把后台拿到的数据存储到自己的这个对象中保存

2、插入数据的时候，直接拿我们自定义的对象中的拷贝内容即可

原理如此，不同情况分别对待

以上方法是原生方法，JS还给我们提供了一个更加方便的办法，map()方法来进行映射，如图例子：

经过map()方法后，原始数据已经变成了我们期望的数据类型。更加方便！且该方法不会修改原始数据，会返回一个新的数组。它通过对

数组的每一项进行遍历映射，返回一个新的映射后的数组！

转载注明出处，如果有更好的办法可以实现，欢迎小伙伴指教，共同进步（这只是一种实现方法）

JS数组映射保存数据-场景的更多相关文章

  1. JS数组映射详解

    现在这里占个坑位,免的忘了,需要整理一下最近的内容: 1.数组映射的使用 2.微信分享功能详解 3.jq自己封装 4.HTML的富文本应用

  2. js数组去除重复数据

    一个有重复数据的数组,准备一个空数组,遍历有重复数据的数组同时用indexOf对比那个空数组判断是否有一样的,不一样的push进去空数组 let arr = dataInfo.map(item =&g ...

  3. js 给json添加新的字段，或者添加一组数据，在JS数组指定位置删除、插入、替换元素

    JS定义了一个json数据var test={name:"name",age:"12"};需要给test再添加一个字段,需要什么办法,可以让test的值为{na ...

  4. js数组和对象的区别,ajax传入多个参数值,ajax传多个数组数据

    数组分为索引数组和关联数组 js中先声明一个空数组 arr = [] 索引数组 索引是整数,如arr[0] = 'a' 关联数组 索引是自定义的字符串,如arr['a'] = 'a' js中的对象 你 ...

  5. JS数组2（冒泡排列、数组里面查找数据）

    数组 一.冒泡排列 对数组attr = [1,8,6,4,5,3,7,2,9]进行由大到小排列,用冒泡排列的方法排列时,会对数组进行比较互换.如果前一个数字较大,这2个元素排列方式不变,如果后一个元素 ...

  6. Entity Framework入门教程（6)--- 在线场景中保存数据

    在线场景中保存数据 在线场景中保存实体数据是一项相当容易的任务,因为使用的是同一个context,这个context会自动跟踪所有实体发生的更改. 下图说明了在线场景中的CUD(创建,更新,删除)操作 ...

  7. js map()处理数组和对象数据

    之前的文章梳理了JS数组与对象属性的遍历方法,本文介绍专门用以遍历并处理数据的map()方法. 一.原生map() map()是数组的一个方法,它创建一个新数组,其结果是该数组中的每个元素都调用一个提 ...

  8. js怎样得出数组中某个数据最大连续出现的次数

     1:js怎样得出数组中某个数据最大连续出现的次数 var test=[1,2,3,3,2,2,2,3,3,3,3,5,3,3,3,3,3] ;    var j  = 0 ;    var max  ...

  9. js限制输入数字能输入小数点，js定义数组，js往数组中添加数据，js将字符型转为数字型，除法结果保留两位小数——js小测：计算比赛得分

    一个朋友跟我说要去给某个比赛算分: 规则:去掉最低分最高分求平均分: 最近在学习大数据可视化——图谱,用到js一些东西,所以今天就用js练练 用到知识点: js限制输入数字能输入小数点,js定义数组, ...

随机推荐

  1. ROS机器人编程实践----琐碎知识点

    amcl原理: amcl将激光传感器数据与从地图预估的传感器数据相比较,给出可能的位姿.如果传感器数据和某个候选位姿处的预测数据相同,amcl就会给这个位姿一个较高的概率,反之,就会降低这个概率.概率 ...

  2. Docker初始

    如今Docker的使用已经非常普遍,特别在一线互联网公司.使用Docker技术可以帮助企业快速水平扩展服务,从而到达弹性部署业务的能力.在云服务概念兴起之后,Docker的使用场景和范围进一步发展,如 ...

  3. MySQL文档翻译（八）附英文原文---性能优化概览

    优化概述 数据库性能表现依赖于数据库级别的几个因素,比如表,查询和配置设置.这些软件在硬件级别通过CPU和IO操作构筑结果,你需要尽可能的使用最少的资源达到最大的效果.当你专注于数据库的性能表现时,你 ...

  4. PHP遍历二叉树

    遍历二叉树,这个相对比较复杂. 二叉树的便利,主要有两种,一种是广度优先遍历,一种是深度优先遍历. 什么是广度优先遍历?就是根节点进入,水平一行一行的便利. 什么是深度优先遍历呢?就是根节点进入,然后 ...

  5. 字符和字符串在Java中的旅程

    以下是个人对java中字符和字符串的见解,如有疏漏之处,还请不吝赐教. 下面通过一个简单的程序来说明字符和字符串在Java中的旅程. 以字符 ' 中 '为例, 它的GBK编码是2个字节:0xd6d0, ...

  6. centos卸载mysql

    1.查看系统安装mysql rpm -qa|grep -i mysql 2.卸载 rpm -ev --nodeps mysql-community-release-el7-5.noarch 3.查询剩 ...

  7. 【BUAA-OO】第二单元作业总结

    第二单元作业总结 ——电梯恐惧症患者的极限自救 一.   第一次作业程序分析 1.     设计策略简略分析 线程:主线程.输入线程和电梯线程,另有一个持有请求队列的调度器,一个对输入进行处理的Req ...

  8. python程序—封装案例

    需求: 1.房子有户型.总面积.家具名称列表 房子没有任何家具 2.家具有名字和占地面积,其中 席梦思(bed):4平米 衣柜(chest): 2平米 餐桌(table): 1.5平米 3.将以上3个 ...

  9. box-sizing的用法（笔记）

    关于盒子布局的box-sizing的使用 border-box width 和 height 属性包括内容,内边距和边框,但不包括外边距.这是当文档处于 Quirks模式 时Internet Expl ...

  10. asp.net 虹软 人脸识别 实现刷脸住宿、刷脸签到、刷脸进入等

    先看看效果图,我把demo改成自动运行了,暂时借用别人的图片: 最左侧的大图为选择上传的, 中间的小图是大图的脸, 右侧的大图是人脸文件夹中已经存在的,并且相似度较高的一张脸,也就是比对的结果. 先记 ...