详解vue数组遍历方法forEach和map的原理解析和实际应用


Posted in Javascript onNovember 15, 2018

一、前言

forEach和map是数组的两个方法,作用都是遍历数组。在vue项目的处理数据中经常会用到,这里介绍一下两者的区别和具体用法示例。

二、代码

1. 相同点

  • 都是数组的方法
  • 都用来遍历数组
  • 两个函数都有4个参数:匿名函数中可传3个参数item(当前项), index(当前项的索引), arr(原数组),还有一个可选参数this
  • 匿名函数中的this默认是指向window的
  • 对空数组不会调用回调函数
  • 不会改变原数组(某些情况下可改变)

2. forEach

(1) 没有返回值。

var a = [1,2,3,4,5]
var b = a.forEach((item) => {
  item = item * 2
})
console.log(b)
// undefiined

(2) 可改变原数组的情况

下面来看几个例子:

var a = [1,2,3,4,5]
a.forEach((item) => {
  item = item * 2
})
console.log(a)
// [1,2,3,4,5]

这里原数组并没有发生改变。

var a = [1,'1',{num:1},true]
a.forEach((item, index, arr) => {
  item = 2
})
console.log(a)
// [1,'1',{num:1},true]

这里修改item的值,依然没有修改原数组。

var a = [1,'1',{num:1},true]
a.forEach((item, index, arr) => {
  item.num = 2
  item = 2
})
console.log(a)
// [1,'1',{num:2},true]

当修改数组中对象的某个属性时,发现属性改变了。

为什么会这样呢?

这里就要引入栈(stack)内存和堆(heap)内存的概念了,对于JS中的基本数据类型,如String,Number,Boolean,Undefined,Null是存在于栈内存中的,在栈内存中储存变量名及相应的值。而Object,Array,Function存在于堆内存中,在堆内存中储存变量名及引用位置。

在第一个例子中,为什么直接修改item无法修改原数组呢,因为item的值并不是相应的原数组中的值,而是重新建立的一个新变量,值和原数组相同。

在第二个例子中,数组中的对象的值也没有改变,是因为新创建的变量和原数组中的对象虽然指向同一个地址,但改变的是新变量的值,即新对象的值为2,原数组中的对象还是{num:1}。

在第三个例子中,由于对象是引用类型,新对象和旧对象指向的都是同一个地址,所以新对象把num变成了2,原数组中的对象也改变了。

var a = [1,2,3,4,5]
a.forEach((item, index, arr) => {
  arr[index] = item * 2
})
console.log(a)
// [2,4,6,8,10]

在回调函数里改变arr的值,原数组改变了。

这个例子和例三其实同理,参数中的arr也只是原数组的一个拷贝,如果修改数组中的某一项则原数组也改变因为指向同一引用地址,而如果给参数arr赋其他值,则原数组不变。

其实想要知道参数中的item和arr是不是重新创建的变量,在回调函数中打印就知道了。

(3) vue中的应用

在处理数据时我经常用到这个方法,因为数据的传递以json格式,经常会收到数组中包含许多对象的数据。而后端传给我的数据有时候需要处理,例如把时间戳格式化为正常时间,代码如下:

// utils.js
const formatTime = date => {
  var newDate = new Date();
  newDate.setTime(date * 1000);
  const year = newDate.getFullYear()
  const month = newDate.getMonth() + 1
  const day = newDate.getDate()
  const hour = newDate.getHours()
  const minute = newDate.getMinutes()
  const second = newDate.getSeconds()
 
  return [year, month, day].map(formatNumber).join('-') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}

const formatNumber = n => {
  n = n.toString()
  return n[1] ? n : '0' + n
}

export {
  formatTime
}
// 得到的数据格式
[
  {add_time: 1541495677, balance: 14, bn: "300708", cprice: "12.39"}
]
// index.vue
import axios from 'axios'
import { formatTime } from '@/lib/utils'
export default {
  data() {
    dataList: []
  },
  methods: {
    getData() {
     axios.get('/user?ID=12345')
     .then(function (res) {
       if(res.code == 200) {
        res.data.forEach((item) => {
          item.add_time = formatTime(item.add_time)
        }
        this.dataList = res.data
       }
     })
     .catch(function (err) {
      console.log(err);
     });
    }
  }
}

这时候原始数据的值也改变了,变成了格式化后的时间。

3. map

(1) 返回一个经过处理后的新数组,但不改变原数组的值。

var a = [1,2,3,4,5]
var b = a.map((item) => {
  return item = item * 2
})
console.log(a) // [1,2,3,4,5]
console.log(b) // [2,4,6,8,10]

(2) map中可改变原数组的情况和原理与forEach相同

(3) vue中的应用

有这样一个需求,充值金额需要在整数的基础上随机减去100或加上100,这时我在原始的数据基础上需要一个经过处理的新数组。

export default {
  data() {
    moneyList: [1000,2000,5000,10000,20000,50000]
  },
  computed: {
    moneyList_new() {
      return this.moneyList.map((item) => {
        const random = Math.random() > 0.5 ? 1 : -1;
        return Math.floor(Math.random()*100) * random + item;
      })
    }
  }
}

实际渲染处理过的数组就可以了~

三、结语

以上就是forEach和map的对比与实际应用,代码只是演示使用方法并非完全真实。希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript中的对象创建 实例附注释
Feb 08 Javascript
js控制浏览器全屏示例代码
Feb 20 Javascript
JavaScript 作用域链解析
Nov 13 Javascript
JavaScript获取IP获取的是IPV6 如何校验
Jun 12 Javascript
值得分享的bootstrap table实例
Sep 22 Javascript
vue父组件通过props如何向子组件传递方法详解
Aug 16 Javascript
bootstrap fileinput实现文件上传功能
Aug 23 Javascript
Vue.js实现表格渲染的方法
Sep 07 Javascript
微信小程序分享功能onShareAppMessage(options)用法分析
Apr 24 Javascript
JS学习笔记之数组去重实现方法小结
May 29 Javascript
详解Nuxt.js 实战集锦
Nov 19 Javascript
vue+openlayers绘制省市边界线
Dec 24 Vue.js
微信小程序用户位置权限的获取方法(拒绝后提醒)
Nov 15 #Javascript
判断iOS、Android以及PC端的示例代码
Nov 15 #Javascript
IE8中jQuery.load()加载页面不显示的原因
Nov 15 #jQuery
详解ES6 Fetch API HTTP请求实用指南
Nov 14 #Javascript
微信小程序购物车、父子组件传值及calc的注意事项总结
Nov 14 #Javascript
微信小程序中遇到的iOS兼容性问题小结
Nov 14 #Javascript
javascript中一些奇葩的日期换算方法总结
Nov 14 #Javascript
You might like
php 无法加载mcrypt.dll的解决办法
2013/04/03 PHP
PHP 常用数组内部函数(Array Functions)介绍
2013/06/05 PHP
destoon各类调用汇总
2014/06/20 PHP
PHP实现的通过参数生成MYSQL语句类完整实例
2016/04/11 PHP
php实现socket推送技术的示例
2017/12/20 PHP
php实现 master-worker 守护多进程模式的实例代码
2019/07/20 PHP
一个js的tab切换效果代码[代码分离]
2010/04/11 Javascript
基于jQuery试卷自动排版系统
2010/07/18 Javascript
jquery 选项卡效果 新手代码
2011/07/08 Javascript
详解JS 比较两个Json对象的值是否相等的实例
2013/11/20 Javascript
JavaScript DOM节点添加示例
2014/07/16 Javascript
jQuery中has()方法用法实例
2015/01/06 Javascript
JS+CSS实现可以凹陷显示选中单元格的方法
2015/03/02 Javascript
基于Bootstrap实现图片轮播效果
2016/05/22 Javascript
JS定时器用法分析【时钟与菜单中的应用】
2016/12/21 Javascript
JS实现css hover操作的方法示例
2017/04/07 Javascript
微信小程序教程系列之新建页面(4)
2017/04/17 Javascript
ES6新特性七:数组的扩充详解
2017/04/21 Javascript
详解利用 Vue.js 实现前后端分离的RBAC角色权限管理
2017/09/15 Javascript
详解ionic本地相册、拍照、裁剪、上传(单图完全版)
2017/10/10 Javascript
JS的函数调用栈stack size的计算方法
2018/06/24 Javascript
Vue 实现从小到大的横向滑动效果详解
2019/10/16 Javascript
js实现查询商品案例
2020/07/22 Javascript
Django中的“惰性翻译”方法的相关使用
2015/07/27 Python
python画蝴蝶曲线图的实例
2019/11/21 Python
详解使用python3.7配置开发钉钉群自定义机器人(2020年新版攻略)
2020/04/01 Python
Python unittest生成测试报告过程解析
2020/09/08 Python
css3弹性盒模型实例介绍
2013/05/27 HTML / CSS
ProBikeKit美国官网:自行车套件,跑步和铁人三项套件
2016/10/13 全球购物
迪梵英国官方网站:Darphin英国
2017/12/06 全球购物
促销活动总结怎么写
2014/06/25 职场文书
公务员培的训心得体会
2014/09/01 职场文书
普通党员个人对照检查材料
2014/09/18 职场文书
如何签定毕业生就业协议书
2014/09/28 职场文书
爱国主题班会教案
2015/08/14 职场文书
如何vue使用el-table遍历循环表头和表体数据
2022/04/26 Vue.js