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代码
Nov 09 Javascript
jQuery入门知识简介
Mar 04 Javascript
THREE.JS入门教程(5)你应当知道的十件事
Jan 24 Javascript
使用jquery选择器如何获取父级元素、同级元素、子元素
May 14 Javascript
JavaScript生成SQL查询表单的方法
Aug 13 Javascript
微信小程序日期时间选择器使用方法
Feb 01 Javascript
解决vue-cli3 使用子目录部署问题
Jul 19 Javascript
微信小程序实现横向增长表格的方法
Jul 24 Javascript
JavaScript引用类型Array实例分析
Jul 24 Javascript
angular4自定义组件非input元素实现ngModel双向数据绑定的方法
Dec 28 Javascript
Vue.js构建你的第一个包并在NPM上发布的方法步骤
May 01 Javascript
vue和iview实现Scroll 数据无限滚动功能
Oct 31 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
中国的第一台收音机
2021/03/01 无线电
PHP网站提速三大“软”招
2006/10/09 PHP
smarty+adodb+部分自定义类的php开发模式
2006/12/31 PHP
使用bcompiler对PHP文件进行加密的代码
2010/08/29 PHP
php解析xml方法实例详解
2015/05/12 PHP
PHP实现的简单缓存类
2015/07/29 PHP
在WordPress中使用wp_count_posts函数来统计文章数量
2016/01/05 PHP
今天你说520了吗?不仅有php表白书还有java表白神器
2016/05/20 PHP
php实现微信支付之现金红包
2018/05/30 PHP
Javascript里使用Dom操作Xml
2006/09/20 Javascript
namespace.js Javascript的命名空间库
2011/10/11 Javascript
javascript克隆对象深度介绍
2012/11/20 Javascript
缓动函数requestAnimationFrame 更好的实现浏览器经动画
2012/12/07 Javascript
js触发asp.net的Button的Onclick事件应用
2013/02/02 Javascript
JS简单的图片放大缩小的两种方法
2013/11/11 Javascript
jquery实现的判断倒计时是否结束代码
2016/02/05 Javascript
快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突
2016/04/15 Javascript
js判断checkbox是否选中个数的方法(超简单)
2016/08/19 Javascript
Vue.js实现多条件筛选、搜索、排序及分页的表格功能
2020/11/24 Javascript
angularjs中使用ng-bind-html和ng-include的实例
2017/04/28 Javascript
vue.js template模板的使用(仿饿了么布局)
2018/08/13 Javascript
Vue.js图片预览插件使用详解
2018/08/27 Javascript
H5+C3+JS实现双人对战五子棋游戏(UI篇)
2020/05/28 Javascript
Koa 使用小技巧(小结)
2018/10/22 Javascript
详解如何在Angular优雅编写HTTP请求
2018/12/05 Javascript
一些手写JavaScript常用的函数汇总
2019/04/16 Javascript
vue3.0中的双向数据绑定方法及优缺点
2019/08/01 Javascript
JS操作JSON常用方法(10w阅读)
2020/12/06 Javascript
[02:06]DOTA2英雄基础教程 暗影萨满
2013/12/16 DOTA
[01:39:42]Fnatic vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python编程中的文件读写及相关的文件对象方法讲解
2016/01/19 Python
opencv导入头文件时报错#include的解决方法
2019/07/31 Python
python爬取网易云音乐热歌榜实例代码
2020/08/07 Python
英国排名第一的餐具品牌:Denby Pottery
2019/11/01 全球购物
文明城市创建标语
2014/06/16 职场文书
laravel添加角色和模糊搜索功能的实现代码
2021/06/22 PHP