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 相关文章推荐
如何做到打开一个页面,过几分钟自动转到另一页面
Apr 20 Javascript
json 入门基础教程 推荐
Oct 31 Javascript
js中的getAttribute方法使用示例
Aug 01 Javascript
JavaScript判断变量是对象还是数组的方法
Aug 28 Javascript
JS获得图片alt信息的方法
Apr 01 Javascript
javascript实现俄罗斯方块游戏的思路和方法
Apr 27 Javascript
Javascript农历与公历相互转换的简单实例
Oct 09 Javascript
vuejs 单文件组件.vue 文件的使用
Jul 28 Javascript
详解vue mixins和extends的巧妙用法
Dec 20 Javascript
详解vue挂载到dom上会发生什么
Jan 20 Javascript
JavaScript中数组去重的5种方法
Jul 04 Javascript
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
Aug 04 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
php 数组的合并、拆分、区别取值函数集
2010/02/15 PHP
实用PHP会员权限控制实现原理分析
2011/05/29 PHP
PHP执行Curl时报错提示CURL ERROR: Recv failure: Connection reset by peer的解决方法
2014/06/26 PHP
php防止恶意刷新与刷票的方法
2014/11/21 PHP
PHP 获取指定地区的天气实例代码
2017/02/08 PHP
Laravel构建即时应用的一种实现方法详解
2017/08/31 PHP
javascript flash下fromCharCode和charCodeAt方法使用说明
2008/01/12 Javascript
jQuery中的pushStack实现原理和应用实例
2015/02/03 Javascript
实例解析jQuery工具函数
2016/12/01 Javascript
jQuery编写设置和获取颜色的插件
2017/01/09 Javascript
bootstrap datetimepicker日期插件超详细使用方法介绍
2017/02/23 Javascript
在bootstrap中实现轮播图实例代码
2017/06/11 Javascript
使用jQuery实现动态添加小广告
2017/07/11 jQuery
javascript 中事件冒泡和事件捕获机制的详解
2017/09/01 Javascript
JS/HTML5游戏常用算法之碰撞检测 地图格子算法实例详解
2018/12/12 Javascript
nodejs基础之常用工具模块util用法分析
2018/12/26 NodeJs
微信小程序常用的3种提示弹窗实现详解
2019/09/19 Javascript
《与孩子一起学编程》python自测题
2018/05/27 Python
Python 文本文件内容批量抽取实例
2018/12/10 Python
在Pycharm中执行scrapy命令的方法
2019/01/16 Python
详解Python list和numpy array的存储和读取方法
2019/11/06 Python
python实现读取类别频数数据画水平条形图案例
2020/04/24 Python
mac安装python3后使用pip和pip3的区别说明
2020/09/01 Python
css3进行截取替代js的substring
2013/09/02 HTML / CSS
梅西百货澳大利亚:Macy’s Australia
2017/07/26 全球购物
Zatchels官网:英国剑桥包品牌
2021/01/12 全球购物
维德科技C#面试题笔试题
2015/12/09 面试题
环境科学专业个人求职的自我评价
2013/11/28 职场文书
教师个人鉴定材料
2014/02/08 职场文书
三年级学生评语
2014/04/23 职场文书
期中考试反思800字
2014/05/01 职场文书
2014年员工工作总结范文
2014/11/18 职场文书
劳动者解除劳动合同通知书
2015/04/16 职场文书
仰望星空观后感
2015/06/10 职场文书
关于实现中国梦的心得体会
2016/01/05 职场文书
Python实战之大鱼吃小鱼游戏的实现
2022/04/01 Python