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 相关文章推荐
Domino中运用jQuery读取视图内容的方法
Oct 21 Javascript
Jquery CheckBox全选方法代码附js checkbox全选反选代码
Jun 09 Javascript
javascript 常用功能总结
Mar 18 Javascript
jQuery学习笔记(1)--用jQuery实现异步通信(用json传值)具体思路
Apr 08 Javascript
jquery easyui滚动条部分设置介绍
Sep 12 Javascript
使用JavaScript实现网页版Pongo设计思路及源代码分享
Jun 16 Javascript
jquery实现弹出层登录和全屏层注册特效
Aug 28 Javascript
解决jquery插件:TypeError:$.browser is undefined报错的方法
Nov 21 Javascript
用js实现博客打赏功能
Oct 24 Javascript
使用ECharts实现状态区间图
Oct 25 Javascript
如何优雅地在vue中添加权限控制示例详解
Mar 07 Javascript
基于Vue的商品主图放大镜方案详解
Sep 19 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
用文本文件实现的动态实时发布新闻的程序
2006/10/09 PHP
php cache类代码(php数据缓存类)
2010/04/15 PHP
PHP实现数字补零功能的2个函数介绍
2014/05/12 PHP
php函数传值的引用传递注意事项分析
2016/06/25 PHP
Thinkphp事务操作实例(推荐)
2017/04/01 PHP
php使用lua+redis实现限流,计数器模式,令牌桶模式
2019/04/04 PHP
Javascript实例教程(19) 使用HoTMetal(4)
2006/12/23 Javascript
Javascript技术技巧大全(五)
2007/01/22 Javascript
JavaScript 原型与继承说明
2010/06/09 Javascript
javascript验证上传文件的类型限制必须为某些格式
2013/11/14 Javascript
javascript上下方向键控制表格行选中并高亮显示的方法
2015/02/13 Javascript
js生成随机数的过程解析
2015/11/24 Javascript
JavaScript中将数组进行合并的基本方法讲解
2016/03/07 Javascript
Bootstrap每天必学之级联下拉菜单
2016/03/27 Javascript
JS实现图片高斯模糊切换效果的焦点图实例
2017/01/21 Javascript
创建echart多个联动的示例代码
2018/11/23 Javascript
layui自定义工具栏的方法
2019/09/19 Javascript
JS防抖和节流实例解析
2019/09/24 Javascript
详细分析Node.js 模块系统
2020/06/28 Javascript
跟老齐学Python之深入变量和引用对象
2014/09/24 Python
Python中逗号的三种作用实例分析
2015/06/08 Python
python中logging库的使用总结
2017/10/18 Python
5款非常棒的Python工具
2018/01/05 Python
python实现随机梯度下降法
2020/03/24 Python
查看jupyter notebook每个单元格运行时间实例
2020/04/22 Python
通过实例解析python and和or使用方法
2020/11/14 Python
python实现定时发送邮件到指定邮箱
2020/12/23 Python
2021年值得向Python开发者推荐的VS Code扩展插件
2021/01/25 Python
美国眼镜网站:EyeBuyDirect
2017/04/13 全球购物
俄罗斯最大的在线手表商店:Bestwatch.ru
2020/01/11 全球购物
mysql_pconnect()和mysql_connect()有什么区别
2012/05/25 面试题
会计学财务管理专业个人的自我评价
2013/10/19 职场文书
物业品质提升方案
2014/06/08 职场文书
中职生求职信
2014/07/01 职场文书
义卖募捐活动总结
2015/05/09 职场文书
换届选举主持词
2015/07/03 职场文书