Vue中構造數組數據之map和forEach方法實現

Posted on by

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

想要深入理解這兩個方法，一定要手寫幾次簡易的實現，理解其中的要義。這裡隻考慮核心部分，一些邊界問題就忽略瞭。

一、手寫實現

簡易map方法：

Array.prototype.myMap = function(callback) {
    const res = [];
    for (let i = 0; i < this.length; i++) {
        // 這裡將回調函數的執行結果push進瞭新數組，
        // 因此map方法在回調函數中一定要有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++;
  }
};

二、二者區別

相同點：

1，都對數組的循環語句做瞭封裝（while循環）。

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

3，兩者都可以修改原數組，通過回調函數實現。當然兩者的回調函數都可以不對原數組做修改。

4，在兩個方法中使用return，隻能結束當前這一次循環，不能結束整個循環，因為return是寫在回調函數中的。

不同點：

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

2，map可鏈式調用，forEach不可以。因為forEach總是返回undefined。

3，除瞭拋出異常，沒有辦法終止或跳出forEach循環。

三、使用場景

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

1，不打算使用返回的新數組。

2，沒有在回調函數中返回值。

舉個Vue中的例子：

比如後臺接口返回一個對象數據，我們需要將此對象數據構造成為一個新數組，展示到elementUi中的select下拉框中。那麼我們應該用map方法呢，還是forEach呢？

let data = {
    product: '產品',
    service: '服務',
    micServide: '微服務',
}

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 換成給當前組件data中的數據賦值即可。
由以上例子可見，當我們需要構造一個新的數組時，兩種方法都能用，但是map方法要更簡潔。因此，能用map方法的地方，首先要用map方法。

到此這篇關於Vue中構造數組數據-map和forEach方法梳理的文章就介紹到這瞭,更多相關Vue構造數組數據內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：