Vue中foreach数组与js中遍历数组的写法说明


Posted in Vue.js onJune 05, 2021

Vue foreach数组与js中遍历数组的写法

场景

Vue中使用Axios发送get或者post请求,发送请求时需要在js中

对请求参数进行遍历并处理。

接收响应时需要对响应结果进行遍历和处理。

注意区分在vue和js中foreach数组的区别。

实现

在js中遍历数组

//定义班次详细数组
  var bcglxiangxiList = new Array();
  //定义班次详细对象
  var bcxiangxi  = {};
  //循环传递的参数
  bcglXiangXiListParam.forEach(element => {
    bcxiangxi.xh = element.xh;
    bcxiangxi.bcbh = data.bcbh;
    bcxiangxi.dkkssj = element.sjfw[0];
    bcxiangxi.dkjssj = element.sjfw[1];
    bcxiangxi.ts = element.ts;
    bcxiangxi.dkdd = element.dkdd;
    bcxiangxi.zxjxljsj = element.jxsjfw[0];
    bcxiangxi.zdjxljsj = element.jxsjfw[1];
    //将班次详细对象存进班次详细数组
    bcglxiangxiList.push(bcxiangxi);
  });

在vue中遍历数组

var bcglxiangxiList = new Array();
        var bcxiangxi = {};
        debugger;
        if (
          response.data.bcglXiangXiList != null &&
          response.data.bcglXiangXiList.length > 0
        ) {
          console.log(response.data.bcglXiangXiList);
          response.data.bcglXiangXiList.forEach((item, index) => {
            console.log(item);
            bcxiangxi.xh = item.xh;
            bcxiangxi.bcbh = item.bcbh;
            //debugger
            bcxiangxi.sjfw = new Array();
            bcxiangxi.sjfw[0] = item.dkkssj;
            bcxiangxi.sjfw[1] = item.dkjssj;
            bcxiangxi.ts = item.ts;
            bcxiangxi.dkdd = item.dkdd;
            bcxiangxi.jxsjfw = new Array();
            bcxiangxi.jxsjfw[0] = item.zxjxljsj;
            bcxiangxi.jxsjfw[1] = item.zdjxljsj;
            bcglxiangxiList.push(bcxiangxi);
          });
        }

可以看到遍历的方式是一样的,在js中一样可以用两个参数的遍历方式

//定义班次详细数组
  var bcglxiangxiList = new Array();
  //定义班次详细对象
  var bcxiangxi  = {};
  //循环传递的参数
  bcglXiangXiListParam.forEach((element,index) => {
    bcxiangxi.xh = element.xh;
    bcxiangxi.bcbh = data.bcbh;
    bcxiangxi.dkkssj = element.sjfw[0];
    bcxiangxi.dkjssj = element.sjfw[1];
    bcxiangxi.ts = element.ts;
    bcxiangxi.dkdd = element.dkdd;
    bcxiangxi.zxjxljsj = element.jxsjfw[0];
    bcxiangxi.zdjxljsj = element.jxsjfw[1];
    //将班次详细对象存进班次详细数组
    bcglxiangxiList.push(bcxiangxi);
  });

vue forEach循环使用

//data为集合 
data.forEach(function(item, index) {
            //item 就是当日按循环到的对象
            //index是循环的索引,从0开始
})

以上为个人经验,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Vue.js 相关文章推荐
VUE项目实现主题切换的多种方法
Nov 26 Vue.js
vue使用exif获取图片经纬度的示例代码
Dec 11 Vue.js
vue实现滚动鼠标滚轮切换页面
Dec 13 Vue.js
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
Dec 15 Vue.js
Vue——前端生成二维码的示例
Dec 19 Vue.js
Vue使用鼠标在Canvas上绘制矩形
Dec 24 Vue.js
Vue 实现可视化拖拽页面编辑器
Feb 01 Vue.js
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
Feb 26 Vue.js
vue前端和Django后端如何查询一定时间段内的数据
Feb 28 Vue.js
解决Vue+SpringBoot+Shiro跨域问题
Jun 09 Vue.js
vue使用Google Recaptcha验证的实现示例
Aug 23 Vue.js
Vue.js中v-for指令的用法介绍
Mar 13 Vue.js
vue响应式原理与双向数据的深入解析
vue实现水波涟漪效果的点击反馈指令
vue 实现上传组件
May 31 #Vue.js
vue基于Teleport实现Modal组件
Vue+Element UI实现概要小弹窗的全过程
vue-cli4.5.x快速搭建项目
Vue CLI中模式与环境变量的深入详解
You might like
简单的用PHP编写的导航条程序
2006/10/09 PHP
PHP原生模板引擎 最简单的模板引擎
2012/04/25 PHP
php递归删除目录下的文件但保留的实例分享
2014/05/10 PHP
Zend Framework框架Smarty扩展实现方法
2016/03/22 PHP
关于文本框的一些限制控制总结~~
2010/04/15 Javascript
javascript中"/"运算符常见错误
2010/10/13 Javascript
最新的10款jQuery内容滑块插件分享
2011/09/18 Javascript
Json2Template.js 基于jquery的插件 绑定JavaScript对象到Html模板中
2011/10/29 Javascript
iframe异步加载实现点击左边菜单加载右边内容实例讲解
2013/03/04 Javascript
利用jQuery的deferred对象实现异步按顺序加载JS文件
2013/03/17 Javascript
jquery禁止回车触发表单提交
2014/12/12 Javascript
js+HTML5基于过滤器从摄像头中捕获视频的方法
2015/06/16 Javascript
js数组常见操作及数组与字符串相互转化实例详解
2015/11/10 Javascript
7个去伪存真的JavaScript面试题
2016/01/07 Javascript
js判断某个字符出现的次数的简单实例
2016/06/03 Javascript
JS实现的手机端精简幻灯片效果
2016/09/05 Javascript
jQuery实现表格元素动态创建功能
2017/01/09 Javascript
BootStrap自定义popover,点击区域隐藏功能的实现
2018/01/23 Javascript
vue2单元测试环境搭建
2018/05/24 Javascript
[45:32]Liquid vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
python用户管理系统
2018/03/13 Python
python 定时器每天就执行一次的实现代码
2019/08/14 Python
Python读取图像并显示灰度图的实现
2020/12/01 Python
如何用Python编写一个电子考勤系统
2021/02/08 Python
CSS3实现超酷的黑猫警长首页
2016/04/26 HTML / CSS
HTML5实现经典坦克大战坦克乱走还能发出一个子弹
2013/09/02 HTML / CSS
html5表单及新增的改良元素详解
2016/06/07 HTML / CSS
澳大利亚小众服装品牌:Maurie & Eve
2018/03/27 全球购物
几个数据库方面的面试题
2016/07/01 面试题
医学专业五年以上个人求职信
2013/12/03 职场文书
大一学生的职业生涯规划书范文
2014/01/19 职场文书
年终晚会主持词
2014/03/25 职场文书
迎国庆演讲稿
2014/09/15 职场文书
幼儿园五一劳动节活动总结
2015/02/09 职场文书
魂断蓝桥观后感
2015/06/10 职场文书
什么是SOLID
2022/03/24 Javascript