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

场景：一个页面从后台拿到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. JS中if判断 非空即为真 非0即为真

    1.字符串参与判断时:非空即为真判断字符串为空的方法if(str!=null && str!=undefined && str !='')可简写为if(!str){   ...

  2. Java8比较器(Lamdba)

    1.首先构造一个实体以便示例使用 public class Developer { private String name; private BigDecimal salary; private in ...

  3. （转）在Eclipse中进行C/C++开发的配置方法（20140721最新版）

    因准备考试原因需要在windows下配置C++标准运行环境,找到此文,Mark之. 先列举下自己遇到的情况: 1 JRE安装不上,点了exe文件后没有反应:   安装JDK!!! 2 Eclipse找 ...

  4. UIPresentationController - iOS自定义模态弹出框

    参考: https://developer.apple.com/library/archive/featuredarticles/ViewControllerPGforiPhoneOS/Definin ...

  5. Android系统应用Mms之短信会话列表加载流程一

    1. ConversationList短息会话列表界面 1. 开始进行加载 ConversationList: protected void onStart(){ ... // 进行异步查询 star ...

  6. MemoryStream请求与接收

    //流请求 static void Main(string[] args) { Console.WriteLine("Hello World!"); //Console.ReadL ...

  7. 什么是MTBF测试【转】

    本文转载自:https://blog.csdn.net/liuhaoemail/article/details/50531489 MTBF测试 目前,终端侧的可靠性测试基本上是采用称为”MTBF测试” ...

  8. SQLAlchemy 增删改查 一对多 多对多

    1.创建数据表 # ORM中的数据表是什么呢? # Object Relation Mapping # Object - Table 通过 Object 去操纵数据表 # 从而引出了我们的第一步创建数 ...

  9. 数据类型 varchar 和 uniqueidentifier 在 add 运算符中不兼容

    select '<a href="/'+a.id +'" title="'+ a.title +'">'+a.Title+'</a>' ...

  10. webpack dllPlugin使用（基于vue-cli webpack模板）

    由于本例单入口时打包的文件体积过大,将其分成多入口. 主要涉及到的几个文件为: /index.html, /webpack.dll.config.js, /build/webpack.base.con ...