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 相关文章推荐
Z-Blog中用到的js代码
Mar 15 Javascript
不错的JS中变量相关的细节分析
Aug 13 Javascript
关于javascript document.createDocumentFragment()
Apr 04 Javascript
javascript css styleFloat和cssFloat
Mar 15 Javascript
JavaScript 函数模式详解及示例
Sep 07 Javascript
JS日期对象简单操作(获取当前年份、星期、时间)
Oct 26 Javascript
bootstrap table配置参数例子
Jan 05 Javascript
jQuery实现简单的手风琴效果
Apr 17 jQuery
vue实现拖拽的简单案例 不超出可视区域
Jul 25 Javascript
QML实现圆环颜色选择器
Sep 25 Javascript
JS 设计模式之:单例模式定义与实现方法浅析
May 06 Javascript
解决vue项目,npm run build后,报路径错的问题
Aug 13 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
为php4加入动态flash文件的生成的支持
2006/10/09 PHP
ThinkPHP3.2.2的插件控制器功能简述
2014/07/09 PHP
PHP模拟post提交数据方法汇总
2016/02/16 PHP
PHP基于curl后台远程登录正方教务系统的方法
2016/10/14 PHP
谈谈php对接芝麻信用踩的坑
2016/12/01 PHP
PHP完全二叉树定义与实现方法示例
2017/10/09 PHP
Laravel如何使用Redis共享Session
2018/02/23 PHP
漂亮的jquery提示效果(仿腾讯弹出层)
2013/02/05 Javascript
js和css写一个可以自动隐藏的悬浮框
2014/03/05 Javascript
JavaScript中的getMilliseconds()方法使用详解
2015/06/10 Javascript
js两种拼接字符串的简单方法(必看)
2016/09/02 Javascript
从零开始学习Node.js系列教程五:服务器监听方法示例
2017/04/13 Javascript
xmlplus组件设计系列之分隔框(DividedBox)(8)
2017/05/02 Javascript
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
2018/03/28 jQuery
使用Node搭建reactSSR服务端渲染架构
2018/08/30 Javascript
详解Angular5/Angular6项目如何添加热更新(HMR)功能
2018/10/10 Javascript
js使用文件流下载csv文件的实现方法
2019/07/15 Javascript
javascript将16进制的字符串转换为10进制整数hex
2020/03/05 Javascript
vue+ESLint 配置保存 自动格式化代码
2020/03/17 Javascript
详谈vue中router-link和传统a链接的区别
2020/07/22 Javascript
three.js 利用uv和ThreeBSP制作一个快递柜功能
2020/08/18 Javascript
vue打开子组件弹窗都刷新功能的实现
2020/09/21 Javascript
解决vue初始化项目一直停在downloading template的问题
2020/11/09 Javascript
[02:37]TI8勇士令状不朽珍藏II视频展示
2018/06/23 DOTA
python 装饰器功能以及函数参数使用介绍
2012/01/27 Python
使用Python实现将list中的每一项的首字母大写
2019/06/11 Python
Django处理Ajax发送的Get请求代码详解
2019/07/29 Python
详解matplotlib中pyplot和面向对象两种绘图模式之间的关系
2021/01/22 Python
css3实现元素环绕中心点布局的方法示例
2019/01/15 HTML / CSS
有关HTML5 Video对象的ontimeupdate事件(Chrome上无效)的问题
2013/07/19 HTML / CSS
英国家喻户晓的折扣商场:TK Maxx
2017/05/26 全球购物
库存图片、照片、矢量图、视频和音乐:Shutterstock
2021/02/12 全球购物
2014年共青团工作总结
2014/12/10 职场文书
成绩单评语
2015/01/04 职场文书
创业计划书之养殖业
2019/10/11 职场文书
解决Mysql中的innoDB幻读问题
2022/04/29 MySQL