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

场景：一个页面从后台拿到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. Jenkins 配置git

    点击"新建任务"创建一个自用风格的项目 点击"源码管理",选择 git 系统管理 --> Global Tool Configuration<为访问 ...

  2. my work

    Dad, what's your first job? How did you achieved?

  3. 1.2：Properties

    文章著作权归作者所有.转载请联系作者,并在文中注明出处,给出原文链接. 本系列原更新于作者的github博客,这里给出链接. 上一节我们了解了一个Shader的基本结构,这一节,我们从 Propert ...

  4. Codeforces Gym 101623A - 动态规划

    题目传送门 传送门 题目大意 给定一个长度为$n$的序列,要求划分成最少的段数,然后将这些段排序使得新序列单调不减. 考虑将相邻的相等的数缩成一个数. 假设没有分成了$n$段,考虑最少能够减少多少划分 ...

  5. HTML DOM submit() 方法

    HTML DOM submit() 方法 HTML DOM Form 对象 定义和用法 submit() 方法把表单数据提交到 Web 服务器. 语法 formObject.submit() 说明 该 ...

  6. UVA12206 Stammering Aliens

    思路 可以二分答案+哈希 判断有没有那个长为L的串出现至少m次即可 代码 #include <cstdio> #include <cstring> #include <a ...

  7. webdriver API

    切换iframe 1.iframe有id和name driver.switch_to_frame(loc) 2.iframe无id和name 先用xpath定位找到iframe.再switch ifr ...

  8. webpack创建页面的过程

    1.项目文件夹中创建各类型文件放置的文件夹,如:iTestingWeb文件夹下创建src dist文件夹,用途:src为源码 dist为生成后的文件放置位置,然后在源码文件夹中进一步按文件类型增加文件 ...

  9. 补充资料——自己实现极大似然估计(最大似然估计)MLE

    这篇文章给了我一个启发,我们可以自己用已知分布的密度函数进行组合,然后构建一个新的密度函数啦,然后用极大似然估计MLE进行估计. 代码和结果演示 代码: #取出MASS包这中的数据 data(geys ...

  10. 超详细的java集合讲解

    1 集合 1.1 为什么会出现集合框架 [1] 之前的数组作为容器时,不能自动拓容 [2] 数值在进行添加和删除操作时,需要开发者自己实现添加和删除. 1.2 Collection接口 1.2.1 C ...