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 相关文章推荐
List Information About the Binary Files Used by an Application
Jun 18 Javascript
借用Google的Javascript API Loader来加速你的网站
Jan 28 Javascript
js cookies 常见网页木马挂马代码 24小时只加载一次
Apr 13 Javascript
jQuery中andSelf()方法用法实例
Jan 08 Javascript
利用Chrome DevTools直接调试Node.js和JavaScript的方法详解(并行)
Feb 16 Javascript
JS实现汉字与Unicode码相互转换的方法详解
Apr 28 Javascript
浅谈webpack编译vue项目生成的代码探索
Dec 11 Javascript
详解React+Koa实现服务端渲染(SSR)
May 23 Javascript
详解Vue demo实现商品列表的展示
May 07 Javascript
layui表单提交到后台自动封装到实体类的方法
Sep 12 Javascript
原生JS实现天气预报
Jun 16 Javascript
vue 把二维或多维数组转一维数组
Apr 24 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
建站常用13种PHP开源CMS比较
2009/08/23 PHP
PHP基于curl模拟post提交json数据示例
2018/06/22 PHP
js中几种去掉字串左右空格的方法
2006/12/25 Javascript
JavaScript中的Screen屏幕对象
2008/01/16 Javascript
学习ExtJS(二) Button常用方法
2009/10/07 Javascript
两种WEB下的模态对话框 (asp.net或js的分别实现)
2009/12/02 Javascript
浅析js中2个等号与3个等号的区别
2013/08/06 Javascript
JQuery的$命名冲突详细解析
2013/12/28 Javascript
jQuery中children()方法用法实例
2015/01/07 Javascript
js实现动画特效的文字链接鼠标悬停提示的方法
2015/03/02 Javascript
关于Javascript中defer和async的区别总结
2016/09/20 Javascript
webpack 2.x配置reactjs基本开发环境详解
2017/08/08 Javascript
vue环境搭建简单教程
2017/11/07 Javascript
vue计算属性时v-for处理数组时遇到的一个bug问题
2018/01/21 Javascript
手写简单的jQuery雪花飘落效果实例
2018/04/22 jQuery
node上的redis调用优化示例详解
2018/10/30 Javascript
js cavans实现静态滚动弹幕
2020/05/21 Javascript
Vue单页面应用中实现Markdown渲染
2021/02/14 Vue.js
python 实现归并排序算法
2012/06/05 Python
Python判断两个文件是否相同与两个文本进行相同项筛选的方法
2019/03/01 Python
使用Python和Prometheus跟踪天气的使用方法
2019/05/06 Python
Python初学者常见错误详解
2019/07/02 Python
python执行scp命令拷贝文件及文件夹到远程主机的目录方法
2019/07/08 Python
基于Python实现船舶的MMSI的获取(推荐)
2019/10/21 Python
如何利用pygame实现简单的五子棋游戏
2019/12/29 Python
使用python无账号无限制获取企查查信息的实例代码
2020/04/17 Python
完美解决ARIMA模型中plot_acf画不出图的问题
2020/06/04 Python
css3实现小箭头各种图形效果
2020/07/08 HTML / CSS
HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等
2014/05/08 HTML / CSS
家乐福台湾线上购物网:Carrefour台湾
2020/09/15 全球购物
医学生自荐信
2013/12/03 职场文书
集团公司人力资源部岗位职责
2014/01/03 职场文书
《都江堰》教学反思
2014/02/07 职场文书
学党史心得体会
2014/09/05 职场文书
教师党员个人总结
2015/02/10 职场文书
2015年中学体育教师工作总结
2015/10/23 职场文书