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里模拟sleep(两种实现方式)
Jan 25 Javascript
100个不能错过的实用JS自定义函数
Mar 05 Javascript
基于jQuery和CSS3制作响应式水平时间轴附源码下载
Dec 20 Javascript
jquery弹出框插件jquery.ui.dialog用法分析
Aug 20 Javascript
bootstrap modal弹出框的垂直居中
Dec 14 Javascript
纯js模仿windows系统日历
Feb 04 Javascript
bootstrap3使用bootstrap datetimepicker日期插件
May 24 Javascript
javascript 日期相减-在线教程(附代码)
Aug 17 Javascript
详解创建自定义的Angular Schematics
Jun 06 Javascript
JavaScript如何获取一个元素的样式信息
Jul 29 Javascript
解决vue+ element ui 表单验证有值但验证失败问题
Jan 16 Javascript
js实现从右往左匀速显示图片(无缝轮播)
Jun 29 Javascript
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变量范围介绍
2012/10/15 PHP
PHP获取数组的键与值方法小结
2015/06/13 PHP
php 获取文件行数的方法总结
2016/10/11 PHP
jQuery EasyUI API 中文文档 - TimeSpinner时间微调器
2011/10/23 Javascript
Javascript 垃圾收集机制介绍理解
2013/05/14 Javascript
JS实现侧悬浮浮动实例代码
2013/11/29 Javascript
js实现表单Radio切换效果的方法
2015/08/17 Javascript
纯js实现手风琴效果
2020/04/17 Javascript
jQuery Ajax和getJSON获取后台普通json数据和层级json数据用法分析
2016/06/08 Javascript
jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单
2016/08/17 Javascript
深入理解Vue.js源码之事件机制
2017/09/27 Javascript
Vue子组件向父组件通信与父组件调用子组件中的方法
2018/06/22 Javascript
vue权限路由实现的方法示例总结
2018/07/29 Javascript
layer iframe 设置关闭按钮的方法
2019/09/12 Javascript
[01:56]无止竞 再出发——中国军团出征2017年DOTA2国际邀请赛
2017/07/05 DOTA
Python中字典的基本知识初步介绍
2015/05/21 Python
python中执行shell的两种方法总结
2017/01/10 Python
Python+matplotlib实现华丽的文本框演示代码
2018/01/22 Python
Python中sort和sorted函数代码解析
2018/01/25 Python
Python实现的线性回归算法示例【附csv文件下载】
2018/12/29 Python
OpenCV图像颜色反转算法详解
2019/05/13 Python
python 使用opencv 把视频分割成图片示例
2019/12/12 Python
浅谈keras通过model.fit_generator训练模型(节省内存)
2020/06/17 Python
英国比较机场停车场网站:Airport Parking Essentials
2019/12/01 全球购物
Bitiba意大利:在线宠物商店
2020/10/31 全球购物
体育学院毕业生自荐信
2013/11/03 职场文书
超市营业员岗位职责
2013/12/20 职场文书
自我鉴定怎么写
2014/01/12 职场文书
2014基层党员干部学习全国两会心得体会
2014/03/17 职场文书
企业元宵节主持词
2014/03/25 职场文书
2014世界杯球队球队口号
2014/06/05 职场文书
王兆力在市委党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
2014年图书室工作总结
2014/12/09 职场文书
2015年电厂工作总结范文
2015/05/13 职场文书
2015年绩效考核工作总结
2015/05/23 职场文书
飞屋环游记观后感
2015/06/08 职场文书