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 相关文章推荐
JS BASE64编码 window.atob(), window.btoa()
Mar 09 Javascript
键盘 keycode的值 javascript时触发事件时很有用的要素
Nov 02 Javascript
强大的jquery插件jqeuryUI做网页对话框效果!简单
Apr 14 Javascript
JQuery的Ajax跨域请求原理概述及实例
Apr 26 Javascript
js控制页面的全屏展示和退出全屏显示的方法
Mar 10 Javascript
Javascript中的Callback方法浅析
Mar 15 Javascript
jQuery实现Meizu魅族官方网站的导航菜单效果
Sep 14 Javascript
JavaScript实现的简单烟花特效代码
Oct 20 Javascript
jQuery hover事件简单实现同时绑定2个方法
Jun 07 Javascript
老生常谈javascript中逻辑运算符&&和||的返回值问题
Apr 13 Javascript
微信小程序实现预览图片功能
Oct 22 Javascript
js比较两个单独的数组或对象是否相等的实例代码
Apr 28 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作的文本留言本的例子(一)
2006/10/09 PHP
php获得当前的脚本网址
2007/12/10 PHP
PHP针对JSON操作实例分析
2015/01/12 PHP
php截取字符串函数分享
2015/02/02 PHP
PHP的JSON封装、转变及输出操作示例
2019/09/27 PHP
Jquery 获取表单text,areatext,radio,checkbox,select值的代码
2009/11/12 Javascript
浅析jQuery对select操作小结(遍历option,操作option)
2013/07/04 Javascript
js中parseInt函数浅谈
2013/07/31 Javascript
jQuery实现360°全景拖动展示
2015/03/18 Javascript
JavaScript返回0-1之间随机数的方法
2015/04/06 Javascript
帝国cms首页列表页实现点赞功能
2017/10/30 Javascript
利用Console来Debug的10个高级技巧汇总
2018/03/26 Javascript
js技巧之十几行的代码实现vue.watch代码
2018/06/09 Javascript
React 源码中的依赖注入方法
2018/11/07 Javascript
解决layui table表单提示数据接口请求异常的问题
2019/09/24 Javascript
vue+echarts+datav大屏数据展示及实现中国地图省市县下钻功能
2020/11/16 Javascript
[02:08]DOTA2英雄基础教程 马格纳斯
2014/01/17 DOTA
Flask SQLAlchemy一对一,一对多的使用方法实践
2013/02/10 Python
Python单元测试实例详解
2018/05/25 Python
pytorch中的embedding词向量的使用方法
2019/08/18 Python
在Python中画图(基于Jupyter notebook的魔法函数)
2019/10/28 Python
python虚拟环境模块venv使用及示例
2020/03/04 Python
解决Opencv+Python cv2.imshow闪退问题
2020/04/24 Python
520使用Python实现“我爱你”表白
2020/05/20 Python
Python类的继承super相关原理解析
2020/10/22 Python
Python基于Faker假数据构造库
2020/11/30 Python
详解Python中的GIL(全局解释器锁)详解及解决GIL的几种方案
2021/01/29 Python
Aurora London官网:奢华、负担得起的皮革手袋
2020/08/01 全球购物
毕业生个人求职信范例分享
2013/12/17 职场文书
优秀团支部事迹材料
2014/02/08 职场文书
工程安全员岗位职责
2014/03/09 职场文书
班长演讲稿范文
2014/04/24 职场文书
2014中考励志标语
2014/06/05 职场文书
2014年创卫工作总结
2014/11/24 职场文书
2015年七夕爱情寄语
2015/03/24 职场文书
2015年乡镇组织委员工作总结
2015/10/23 职场文书