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 判断计算字符串长度/判断空的简单方法
Aug 05 Javascript
jquery 实现密码框的显示与隐藏示例代码
Sep 18 Javascript
以JSON形式将JS中Array对象数组传至后台的方法
Jan 06 Javascript
JavaScript截取、切割字符串的技巧
Jan 07 Javascript
JavaScript中实现键值对应的字典与哈希表结构的示例
Jun 12 Javascript
利用Vue.js指令实现全选功能
Sep 08 Javascript
jQuery validata插件实现方法
Jun 25 jQuery
Express本地测试HTTPS的示例代码
Jun 06 Javascript
vue两个组件间值的传递或修改方式
Jul 04 Javascript
ng-events类似ionic中Events的angular全局事件
Sep 05 Javascript
解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题
Jul 27 Javascript
vue 动态添加的路由页面刷新时失效的原因及解决方案
Feb 26 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
杏林同学录(八)
2006/10/09 PHP
php下把数组保存为文件格式的实例应用
2010/02/08 PHP
通用PHP动态生成静态HTML网页的代码
2010/03/04 PHP
关于PHP的相似度计算函数:levenshtein的使用介绍
2013/04/15 PHP
利用ASP发送和接收XML数据的处理方法与代码
2007/11/13 Javascript
地震发生中逃生十大法则
2008/05/12 Javascript
将jQuery应用于login页面的问题及解决
2009/10/17 Javascript
纯js写的分页表格数据为json串
2014/02/18 Javascript
百度UEditor编辑器如何关闭抓取远程图片功能
2015/03/03 Javascript
js动态生成Html元素实现Post操作(createElement)
2015/09/14 Javascript
用瀑布流的方式在网页上插入图片的简单实现方法
2016/09/23 Javascript
Bootstrap树形菜单插件TreeView.js使用方法详解
2016/11/01 Javascript
JS实现DIV高度自适应窗口示例
2017/02/16 Javascript
JavaScript事件处理程序详解
2017/09/19 Javascript
vue-cli项目无法用本机IP访问的解决方法
2018/09/20 Javascript
vue2 v-model/v-text 中使用过滤器的方法示例
2019/05/09 Javascript
详解mpvue开发微信小程序基础知识
2019/09/23 Javascript
js HTML DOM EventListener功能与用法实例分析
2020/04/27 Javascript
js实现翻牌小游戏
2020/07/31 Javascript
[01:13]DOTA2群星解读国服召集令 一起说出回归的理由
2013/07/17 DOTA
Python使用xlrd模块操作Excel数据导入的方法
2015/05/26 Python
使用rst2pdf实现将sphinx生成PDF
2016/06/07 Python
Django之PopUp的具体实现方法
2019/08/31 Python
Python enumerate() 函数如何实现索引功能
2020/06/29 Python
python实现xlwt xlrd 指定条件给excel行添加颜色
2020/07/14 Python
CSS3中动画属性transform、transition和animation属性的区别
2016/09/25 HTML / CSS
Hanky Panky官方网站:内衣和睡衣
2019/07/25 全球购物
婚前协议书范本
2014/04/15 职场文书
俞敏洪励志演讲稿
2014/04/29 职场文书
信电学院毕业生自荐书
2014/05/24 职场文书
代收款委托书范本
2014/10/01 职场文书
护理见习报告范文
2014/11/03 职场文书
明确岗位职责
2015/02/14 职场文书
2015大学生党员自我评价范文
2015/03/03 职场文书
2019暑假学生安全口号
2019/06/27 职场文书
SQL之各种join小结详细讲解
2021/08/04 MySQL