數(shù)組操作是前端最重要的數(shù)據(jù)操作，構(gòu)造數(shù)組數(shù)據(jù)，又是數(shù)組操作中很常見的。本文將梳理下map和forEach方法在Vue項目中的使用。

想要深入理解這兩個方法，一定要手寫幾次簡易的實現(xiàn)，理解其中的要義。這里只考慮核心部分，一些邊界問題就忽略了。

一、手寫實現(xiàn)

簡易map方法：

Array.prototype.myMap = function(callback) {
    const res = [];
    for (let i = 0; i < this.length; i++) {
        // 這里將回調(diào)函數(shù)的執(zhí)行結(jié)果push進(jìn)了新數(shù)組，
        // 因此map方法在回調(diào)函數(shù)中一定要有return。
        res.push(callback(this[i], i, this));
}
    return res;
}

簡易forEach方法：

Array.prototype.myForEach = function (fn, context) {
  context = context || arguments[1];
  let len = this.length;
  let k = 0;
  while (k < len) {
    if (k in this) {
      fn.call(context, this[k], k, this);
    };
    k++;
  }
};

二、二者區(qū)別

相同點：

1，都對數(shù)組的循環(huán)語句做了封裝（while循環(huán)）。

2，map能做的事，forEach也能做，反之亦然。

3，兩者都可以修改原數(shù)組，通過回調(diào)函數(shù)實現(xiàn)。當(dāng)然兩者的回調(diào)函數(shù)都可以不對原數(shù)組做修改。

4，在兩個方法中使用return，只能結(jié)束當(dāng)前這一次循環(huán)，不能結(jié)束整個循環(huán)，因為return是寫在回調(diào)函數(shù)中的。

不同點：

1，map方法返回一個新數(shù)組；forEach方法返回undefined。

2，map可鏈?zhǔn)秸{(diào)用，forEach不可以。因為forEach總是返回undefined。

3，除了拋出異常，沒有辦法終止或跳出forEach循環(huán)。

三、使用場景

以下兩種情況不要使用map方法。

1，不打算使用返回的新數(shù)組。

2，沒有在回調(diào)函數(shù)中返回值。

舉個Vue中的例子：

比如后臺接口返回一個對象數(shù)據(jù)，我們需要將此對象數(shù)據(jù)構(gòu)造成為一個新數(shù)組，展示到elementUi中的select下拉框中。那么我們應(yīng)該用map方法呢，還是forEach呢？

let data = {
    product: '產(chǎn)品',
    service: '服務(wù)',
    micServide: '微服務(wù)',
}

let keysArr = Object.keys(data)

// 用forEach方法

let res = []
keysArr .forEach(item => {
    res.push( { value: item, label: data[item] } )
})

// 用map方法

let res1 = data.map(item => {
    return { value: item, label:  }
})

// 在Vue項目中，直接將res 換成給當(dāng)前組件data中的數(shù)據(jù)賦值即可。
由以上例子可見，當(dāng)我們需要構(gòu)造一個新的數(shù)組時，兩種方法都能用，但是map方法要更簡潔。因此，能用map方法的地方，首先要用map方法。

到此這篇關(guān)于Vue中構(gòu)造數(shù)組數(shù)據(jù)-map和forEach方法梳理的文章就介紹到這了,更多相關(guān)Vue構(gòu)造數(shù)組數(shù)據(jù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論