一、前言
forEach和map是數組的兩個方法，作用都是遍歷數組。在vue項目的處理數據中經常會用到，這里介紹一下兩者的區別和具體用法示例。
二、代碼
1. 相同點
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.jsconst 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.vueimport 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的對比與實際應用，代碼只是演示使用方法并非完全真實。希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
