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 定义function的三种方式小结
Oct 16 Javascript
jquery点击缩略图切换视频播放特效代码分享
Sep 15 Javascript
node.js抓取并分析网页内容有无特殊内容的js文件
Nov 17 Javascript
JS控件bootstrap datepicker使用方法详解
Mar 25 Javascript
JavaScript数组push方法使用注意事项
Oct 30 Javascript
vue2.0安装style/css loader的方法
Mar 14 Javascript
微信小程序之分享页面如何返回首页的示例
Mar 28 Javascript
JS实现字符串中去除指定子字符串方法分析
May 17 Javascript
微信小程序全局变量改变监听的实现方法
Jul 15 Javascript
JavaScript命令模式原理与用法实例详解
Mar 10 Javascript
Node.js API详解之 vm模块用法实例分析
May 27 Javascript
vue-quill-editor插入图片路径太长问题解决方法
Jan 08 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
用php和MySql来与ODBC数据连接
2006/10/09 PHP
利用PHP和AJAX创建RSS聚合器的代码
2007/03/13 PHP
PHP通用检测函数集合
2011/02/08 PHP
解析isset与is_null的区别
2013/08/09 PHP
PHP自定session保存路径及删除、注销与写入的方法
2014/11/18 PHP
PHP处理postfix邮件内容的方法
2015/06/16 PHP
PHP 常用时间函数资料整理
2016/10/22 PHP
Yii2中datetime类的使用
2016/12/17 PHP
php实现简单四则运算器
2020/11/29 PHP
js单例模式详解实例
2013/11/21 Javascript
javascript中的Base64、UTF8编码与解码详解
2015/03/18 Javascript
jQuery实现Email邮箱地址自动补全功能代码
2015/11/03 Javascript
JS实现的仿淘宝交易倒计时效果
2015/11/27 Javascript
快速掌握Node.js环境的安装与运行方法
2016/02/16 Javascript
jquery $.trim()去除字符串空格的实现方法【附图例】
2016/03/30 Javascript
AngularJs 60分钟入门基础教程
2016/04/03 Javascript
jQuery简单实现iframe的高度根据页面内容自适应的方法
2016/08/01 Javascript
基于jQuery实现表格的排序
2016/12/02 Javascript
微信小程序 textarea 详解及简单使用方法
2016/12/05 Javascript
Bootstrap学习笔记 轮播(Carousel)插件
2017/03/21 Javascript
解析Vue 2.5的Diff算法
2017/11/28 Javascript
详解Vue内部怎样处理props选项的多种写法
2018/11/06 Javascript
JQuery特殊效果和链式调用操作示例
2019/05/13 jQuery
Python实现App自动签到领取积分功能
2018/09/29 Python
利用python将图片版PDF转文字版PDF
2019/05/03 Python
Python爬虫解析网页的4种方式实例及原理解析
2019/12/30 Python
python爬虫学习笔记之Beautifulsoup模块用法详解
2020/04/09 Python
Python configparser模块常用方法解析
2020/05/22 Python
Python安装并操作redis实现流程详解
2020/10/13 Python
HTML5边玩边学(3)像素和颜色
2010/09/21 HTML / CSS
面向中国市场的在线海淘美妆零售网站:Beauty House美丽屋
2021/03/02 全球购物
土木工程师岗位职责
2013/11/24 职场文书
服务标语口号
2014/07/01 职场文书
争先创优活动总结
2014/08/27 职场文书
大学生党员学习焦裕禄精神思想汇报
2014/09/10 职场文书
合作意向书怎么写
2019/06/24 职场文书