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让setInteval里的函数参数中的this指向特定的对象
Jan 31 Javascript
JS字符串截取函数实例
Dec 27 Javascript
JavaScript实现为input与textarea自定义hover,focus效果的方法
Aug 21 Javascript
jQuery Ajax页面局部加载方法汇总
Jun 02 Javascript
详解javascript获取url信息的常见方法
Dec 19 Javascript
将angular-ui的分页组件封装成指令的方法详解
May 10 Javascript
angularJS模态框$modal实例代码
May 27 Javascript
实例详解ztree在vue项目中使用并且带有搜索功能
Aug 24 Javascript
Node.js开发之套接字(socket)编程入门示例
Nov 05 Javascript
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
Apr 21 Javascript
基于Vue中的父子传值问题解决
Jul 27 Javascript
JavaScript代码实现微博批量取消关注功能
Feb 05 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
怎么样可以把 phpinfo()屏蔽掉?
2006/11/24 PHP
如何使用PHP Embed SAPI实现Opcodes查看器
2015/11/10 PHP
微信公众号支付之坑:调用支付jsapi缺少参数 timeStamp等错误解决方法
2016/01/12 PHP
javascript 按键事件(兼容各浏览器)
2013/12/20 Javascript
实例讲解jQuery中对事件的命名空间的运用
2016/05/24 Javascript
微信小程序 input输入框详解及简单实例
2017/01/10 Javascript
Bootstrap的popover(弹出框)在append后弹不出(失效)
2017/02/27 Javascript
AngularJS  ng-repeat遍历输出的用法
2017/06/19 Javascript
vue axios请求拦截实例代码
2018/03/29 Javascript
layui结合form,table的全选、反选v1.0示例讲解
2018/08/15 Javascript
vue slots 组件的组合/分发实例
2018/09/06 Javascript
微信小程序实现列表页的点赞和取消点赞功能
2018/11/02 Javascript
微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)
2020/03/10 Javascript
JS原型prototype和__proto__用法实例分析
2020/03/14 Javascript
js实现小时钟效果
2020/03/25 Javascript
详解vue3.0 diff算法的使用(超详细)
2020/07/01 Javascript
python中常用的各种数据库操作模块和连接实例
2014/05/29 Python
python使用turtle库绘制树
2018/06/25 Python
对pycharm 修改程序运行所需内存详解
2018/12/03 Python
Python time库基本使用方法分析
2019/12/13 Python
python数据预处理 :数据抽样解析
2020/02/24 Python
Django User 模块之 AbstractUser 扩展详解
2020/03/11 Python
关于Python不换行输出和不换行输出end=““不显示的问题(亲测已解决)
2020/10/27 Python
ProBikeKit新西兰:自行车套件,跑步和铁人三项装备
2017/04/05 全球购物
Giglio英国站:意大利奢侈品购物网
2018/03/06 全球购物
Linux不知道文件后缀名怎么判断文件类型
2012/04/26 面试题
日期和时间问题
2015/01/04 面试题
社区十八大感言
2014/01/19 职场文书
小学生检讨书大全
2014/02/06 职场文书
小学班级口号
2014/06/09 职场文书
婚庆答谢词
2015/01/04 职场文书
团委工作总结2015
2015/04/02 职场文书
国庆节主题班会
2015/08/15 职场文书
2016消防宣传标语口号
2015/12/26 职场文书
pandas中DataFrame检测重复值的实现
2021/05/26 Python
GPU服务器的多用户配置方法
2022/07/07 Servers