vue使用map代替Aarry数组循环遍历的方法


Posted in Javascript onApril 30, 2020

需求:根据主键id来找到对应的数组下标

原本的方法是使用for循环遍历该数组,变量 i 就是下标,问题在于,如果有多重for循环,就会导致性能大大下降,数据也容易出错

因此使用map,让数组(原本是list)变成一个map集合(key-value形式),把主键id当做key,下标当做value,一一对应,需要的时候直接使用map.get(key)就可以获取到对应的value

1.在data{}中先定义一个map全局变量

vue使用map代替Aarry数组循环遍历的方法

2.在数据回显或有全部数据的地方把数组list变成map

vue使用map代替Aarry数组循环遍历的方法

该例子数据结构是[{}],所以有2个for循环 item也是[{}]结构

这里的item[j].componentId就是一个数组,类似[1,2,3],下标分别为0,1,2
i 是外部循环的变量,在这里相当于该数组的下标

3.在需要获取下标地方直接使用map.get(key)

vue使用map代替Aarry数组循环遍历的方法

所以key就是item[j].componentId,就可以获取到该id所对应的数组下标了

到此这篇关于vue使用map代替Aarry数组循环遍历的方法的文章就介绍到这了,更多相关vue map代替Aarry数组循环遍历内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript截取字符串(通过substring实现并支持中英文混合)
Jun 24 Javascript
jQuery获得页面元素的绝对/相对位置即绝对X,Y坐标
Mar 06 Javascript
JS+CSS实现TreeMenu二级树形菜单完整实例
Sep 18 Javascript
深入理解jQuery3.0的domManip函数
Sep 01 Javascript
JavaScript 函数节流详解及方法总结
Feb 09 Javascript
JavaScript原生数组Array常用方法
Apr 06 Javascript
JS解析url查询参数的简单代码
Aug 06 Javascript
layui中table表头样式修改方法
Aug 15 Javascript
Vue2.0生命周期的理解
Aug 20 Javascript
对Vue.js之事件的绑定(v-on: 或者 @ )详解
Sep 15 Javascript
angularjs手动识别字符串中的换行符方法
Oct 02 Javascript
vue element-ul实现展开和收起功能的实例代码
Nov 25 Vue.js
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
Apr 30 #jQuery
JS XMLHttpRequest原理与使用方法深入详解
Apr 30 #Javascript
Vue中通过属性绑定为元素绑定style行内样式的实例代码
Apr 30 #Javascript
详解Vue串联过滤器的使用场景
Apr 30 #Javascript
JS使用正则表达式实现常用的表单验证功能分析
Apr 30 #Javascript
jQuery实现高度灵活的表单验证功能示例【无UI】
Apr 30 #jQuery
Vue发布订阅模式实现过程图解
Apr 30 #Javascript
You might like
PHP用反撇号执行外部命令
2015/04/14 PHP
php图像处理函数imagecopyresampled用法详解
2016/12/02 PHP
jquery 简短右键菜单 多浏览器兼容
2010/01/01 Javascript
jQuery $.get 的妙用 访问本地文本文件
2012/07/12 Javascript
jquery的ajax请求全面了解
2013/03/20 Javascript
jquery+html5时钟特效代码分享(可设置闹钟并且语音提醒)
2020/03/30 Javascript
JS控制按钮10秒钟后可用的方法
2015/12/22 Javascript
JS代码实现table数据分页效果
2016/05/26 Javascript
jQuery ajax中使用confirm,确认是否删除的简单实例
2016/06/17 Javascript
jQuery包裹节点用法完整示例
2016/09/13 Javascript
AngularJS中一般函数参数传递用法分析
2016/11/22 Javascript
JQuery.validationEngine表单验证插件(推荐)
2016/12/10 Javascript
node使用Mongoose类库实现简单的增删改查
2018/11/08 Javascript
JS遍历JSON数组及获取JSON数组长度操作示例【测试可用】
2018/12/12 Javascript
详解Vue2.5+迁移至Typescript指南
2019/08/01 Javascript
webgl实现物体描边效果的方法介绍
2019/11/27 Javascript
JS数组及对象遍历方法代码汇总
2020/06/16 Javascript
全面解析JavaScript Module模式
2020/07/24 Javascript
[32:30]夜魇凡尔赛茶话会 第一期01:谁是卧底
2021/03/11 DOTA
使用Python脚本实现批量网站存活检测遇到问题及解决方法
2016/10/11 Python
Django时区详解
2019/07/24 Python
基于python3监控服务器状态进行邮件报警
2019/10/19 Python
Python with语句用法原理详解
2020/07/03 Python
python基于opencv实现人脸识别
2021/01/04 Python
详解html5 canvas常用api总结(二)--绘图API
2016/12/14 HTML / CSS
Crabtree & Evelyn英国官网:瑰珀翠护手霜、香水、沐浴和身体护理
2018/04/26 全球购物
nohup的用法
2014/08/10 面试题
给民警的表扬信
2014/01/08 职场文书
七一表彰活动方案
2014/01/18 职场文书
秋季运动会稿件
2014/01/30 职场文书
酒店营销策划方案
2014/02/07 职场文书
2014班子“三严三实”对照检查材料思想汇报
2014/09/18 职场文书
大学生万能检讨书范例
2014/10/04 职场文书
优秀校长事迹材料
2014/12/24 职场文书
MySQL 条件查询的常用操作
2022/04/28 MySQL
python神经网络Xception模型
2022/05/06 Python