一、前言

forEach和map是數(shù)組的兩個方法，作用都是遍歷數(shù)組。在vue項目的處理數(shù)據(jù)中經(jīng)常會用到，這里介紹一下兩者的區(qū)別和具體用法示例。

二、代碼

1. 相同點

2. forEach

(1) 沒有返回值。

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

(2) 可改變原數(shù)組的情況

下面來看幾個例子：

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

這里原數(shù)組并沒有發(fā)生改變。

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

這里修改item的值，依然沒有修改原數(shù)組。

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]

當修改數(shù)組中對象的某個屬性時，發(fā)現(xiàn)屬性改變了。

為什么會這樣呢？

這里就要引入棧(stack)內(nèi)存和堆(heap)內(nèi)存的概念了，對于JS中的基本數(shù)據(jù)類型，如String,Number,Boolean,Undefined,Null是存在于棧內(nèi)存中的，在棧內(nèi)存中儲存變量名及相應的值。而Object,Array,Function存在于堆內(nèi)存中，在堆內(nèi)存中儲存變量名及引用位置。

在第一個例子中，為什么直接修改item無法修改原數(shù)組呢，因為item的值并不是相應的原數(shù)組中的值，而是重新建立的一個新變量，值和原數(shù)組相同。

在第二個例子中，數(shù)組中的對象的值也沒有改變，是因為新創(chuàng)建的變量和原數(shù)組中的對象雖然指向同一個地址，但改變的是新變量的值，即新對象的值為2，原數(shù)組中的對象還是{num:1}。

在第三個例子中，由于對象是引用類型，新對象和舊對象指向的都是同一個地址，所以新對象把num變成了2，原數(shù)組中的對象也改變了。

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

在回調(diào)函數(shù)里改變arr的值，原數(shù)組改變了。

這個例子和例三其實同理，參數(shù)中的arr也只是原數(shù)組的一個拷貝，如果修改數(shù)組中的某一項則原數(shù)組也改變因為指向同一引用地址，而如果給參數(shù)arr賦其他值，則原數(shù)組不變。

其實想要知道參數(shù)中的item和arr是不是重新創(chuàng)建的變量，在回調(diào)函數(shù)中打印就知道了。