這篇文章給大家分享的是有關vue中數組遍歷方法forEach和map怎么用的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

成都創新互聯公司是一家專注于成都網站制作、做網站與策劃設計,祁連網站建設哪家好?成都創新互聯公司做網站,專注于網站建設十多年,網設計領域的專業建站公司;建站業務涵蓋:祁連等地區。祁連做網站價格咨詢:13518219792

一、前言

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;
      })
    }
  }
}

實際渲染處理過的數組就可以了~

感謝各位的閱讀！關于“vue中數組遍歷方法forEach和map怎么用”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

文章標題：vue中數組遍歷方法forEach和map怎么用
網頁鏈接：http://m.newbst.com/article24/gdodce.html

成都網站建設公司_創新互聯，為您提供營銷型網站建設、用戶體驗、標簽優化、網站收錄、響應式網站、網站內鏈

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯