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

场景：一个页面从后台拿到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. c# 设计模式(一) 工厂模式

    源代码在github上面,需要的自己进行下载:https://github.com/yuzhoukamen/UnikmDesignPattern.git 工厂模式(Factory Pattern)是最 ...

  2. 【Alpha】Scrum Meeting 11

    目录 前言 任务分配 燃尽图 会议照片 签入记录 前言 第11次会议于4月16日18:15在一公寓三楼召开. 交流确认了任务进度,讨论项目发布事宜,分配下一阶段任务.时长45min. 任务分配 姓名 ...

  3. numpy, matplotlib库学习笔记

    Numpy库学习笔记: 1.array()   创建数组或者转化数组 例如,把列表转化为数组 >>>Np.array([1,2,3,4,5]) Array([1,2,3,4,5]) ...

  4. Java基础学习-三元运算符和键盘录入的基本步骤和使用

    1.三元运算符的执行流程   package com.denniscui_05; /*  * 三元运算符:  *         关系表达式?表达式1:表达式2  *  * 执行流程:  *      ...

  5. Manjaro 安装svn客户端，以及checkout使用命令

    安装svn sudo pacman -S svn checkout操作指令 svn co http://xxxxxxx /home/xx update 更新版本 svn up [文件/目录] 直接使用 ...

  6. 【HNOI 2018】毒瘤

    Problem Description 从前有一名毒瘤. 毒瘤最近发现了量产毒瘤题的奥秘.考虑如下类型的数据结构题:给出一个数组,要求支持若干种奇奇怪怪的修改操作(例如给一个区间内的数同时加上 \(c ...

  7. TYVJ P1039 【忠诚2】

    题目描述 老管家是一个聪明能干的人.他为财主工作了整整10年,财主为了让自已账目更加清楚.要求管家每天记k次账,由于管家聪明能干,因而管家总是让财主十分满意.但是由于一些人的挑拨,财主还是对管家产生了 ...

  8. python小游戏

    import time,random # 需要的数据和变量放在开头player_list = ['[狂血战士]','[森林箭手]','[光明骑士]','[独行剑客]','[格斗大师]','[枪弹专家] ...

  9. Linux 之CentOS7-VSFTP搭建

    环境 1.俩台Linux 虚拟机 Ser 和 Cli 安装 [root@jm ~]# rpm -ivh /mnt/Packages/vsftpd-3.0.2-10.el7.x86_64.rpm   / ...

  10. 【Redis】windows下redis服务的安装

    下载地址: https://github.com/MicrosoftArchive/redis/releases Redis 支持 32 位和 64 位.这个需要根据你系统平台的实际情况选择,这里我们 ...