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祖孙组件之间的数据传递案例
Dec 07 Vue.js
vue使用exif获取图片旋转,压缩的示例代码
Dec 11 Vue.js
详解vue中使用transition和animation的实例代码
Dec 12 Vue.js
vue中实现点击空白区域关闭弹窗的两种方法
Dec 30 Vue.js
vue实现简易计算器功能
Jan 20 Vue.js
vue常用高阶函数及综合实例
Feb 25 Vue.js
vue脚手架项目创建步骤详解
Mar 02 Vue.js
vue+django实现下载文件的示例
Mar 24 Vue.js
Vue.Draggable实现交换位置
Apr 07 Vue.js
vue如何实现关闭对话框后刷新列表
Apr 08 Vue.js
vue组件vue-esign实现电子签名
Apr 21 Vue.js
vue生命周期钩子函数以及触发时机
Apr 26 Vue.js
vue响应式原理与双向数据的深入解析
vue实现水波涟漪效果的点击反馈指令
vue 实现上传组件
May 31 #Vue.js
vue基于Teleport实现Modal组件
Vue+Element UI实现概要小弹窗的全过程
vue-cli4.5.x快速搭建项目
Vue CLI中模式与环境变量的深入详解
You might like
WML,Apache,和 PHP 的介绍
2006/10/09 PHP
MySQL时间字段究竟使用INT还是DateTime的说明
2012/02/27 PHP
WordPress开发中用于标题显示的相关函数使用解析
2016/01/07 PHP
php基于openssl的rsa加密解密示例
2016/07/11 PHP
php中get_magic_quotes_gpc()函数说明
2017/02/06 PHP
Laravel 微信小程序后端搭建步骤详解
2019/11/26 PHP
javascript 强制刷新页面的实现代码
2009/12/13 Javascript
Google排名中的10个最著名的 JavaScript库
2010/04/27 Javascript
JQuery的ajax获取数据后的处理总结(html,xml,json)
2010/07/14 Javascript
把input初始值不写value的具体实现方法
2013/07/04 Javascript
js实现iframe自动自适应高度的方法
2015/02/17 Javascript
jQuery采用连缀写法实现的折叠菜单效果
2015/09/18 Javascript
JS仿百度自动下拉框模糊匹配提示
2016/07/25 Javascript
简单的渐变轮播插件
2017/01/12 Javascript
vue webuploader 文件上传组件开发
2017/09/23 Javascript
bootstrap中日历范围选择插件daterangepicker的使用详解
2018/04/17 Javascript
Layui 解决表格异步调用后台分页的问题
2019/10/26 Javascript
微信小程序swiper使用网络图片不显示问题解决
2019/12/13 Javascript
Python3基础之函数用法
2014/08/13 Python
Python获取暗黑破坏神3战网前1000命位玩家的英雄技能统计
2016/07/04 Python
python利用Guetzli批量压缩图片
2017/03/23 Python
关于python2 csv写入空白行的问题
2018/06/22 Python
Python Pandas分组聚合的实现方法
2019/07/02 Python
Python爬虫抓取技术的一些经验
2019/07/12 Python
Django中自定义admin Xadmin的实现代码
2019/08/09 Python
在Python中使用MySQL--PyMySQL的基本使用方法
2019/11/19 Python
python实现可下载音乐的音乐播放器
2020/02/25 Python
python如何查看安装了的模块
2020/06/23 Python
澳大利亚百货公司:David Jones
2018/02/08 全球购物
Wiggle澳大利亚:自行车、跑步、游泳商店
2020/11/07 全球购物
团组织关系介绍信
2014/01/12 职场文书
2014大学校园光棍节活动策划书
2014/09/29 职场文书
交通事故赔偿协议书怎么写
2014/10/04 职场文书
卫生保健工作总结2015
2015/05/18 职场文书
怎样写工作总结啊!
2019/06/18 职场文书
探究Mysql模糊查询是否区分大小写
2021/06/11 MySQL