foreach和map的不同点:

(1)map()方法会得到一个新的数组并返回,forEach()会修改原来的数组。

map遍历的后的数组通常都是生成一个新的数组,新的数组的值发生变化,当前遍历的数组值不会变化。

(2)forEach()允许callback更改原始数组的元素。map()返回新的数组。

forEach遍历通常都是直接引入当前遍历数组的内存地址,生成的数组的值发生变化,当前遍历的数组对应的值也会发生变化。

foreach和map的共同点:

(1)都是循环遍历数组中的每一项。

(2)每次执行匿名函数都支持三个参数,参数分别为item(当前每一项),index(索引值),arr(原数组)。

(3)匿名函数中的this都是指向window。

(4)只能遍历数组。

vue使用场景

  • forEach() 适合你并不打算改变数据的时候,而只是想用数据做一些事情—比如存入数据库或者打印出来。
this.criticalData = [id,unid,...]
 			let arrReport= []
            this.criticalData.forEach((item) =>{ 
                let query = new Object()
                query["id"] = item.id
                query["unid"] = item.unid
                query["outSysNo"] = item.outSysNo
                query["lisAppUnid"] = item.lisAppUnid
                query["appUuid"] = item.appUnid
                query["areaValue"] = item.areaValue
                query["lisOrgUnid"] = item.lisOrgUnid
                query["alarmMsg"] = item.alarmMeg
                query["lisAppItemUnid"] = item.lisItemUnid
                query["lisItemUnid"] = item. lisOrgUnid
                arrReport.push(query) 
            })
  • map() 适合你要改变数据值的时候,不仅仅在于它更快,而是返回一个新的数组;这样的优点在于你可以使用复合(composition) (map() , filter() , reduce() 等组合使用)来玩出更多的花样。
this.criticalData = [id,unid,...]
			const arrReport = this.criticalData.map(item => {
                return {
                    id: item.id,
                    unid: item.unid,
                    outSysNo: item.outSysNo,
                    lisAppUnid: item.lisAppUnid,
                    appUuid: item.appUnid,
                    areaValue: item.areaValue,
                    lisOrgUnid: item.lisOrgUnid,
                    alarmMsg: item.alarmMeg,
                    lisAppItemUnid: item.lisItemUnid,
                    lisItemUnid: item. lisOrgUnid,
                }
            })
Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐