數組map方法與如何使用ES5實現

數組map方法與如何使用ES5實現

JavaScript Array map() 方法

定義

map() 方法返回一個新數組，數組中的元素爲原始數組元素調用函數處理後的值。

map() 方法按照原始數組元素順序依次處理元素。

注意：

• map() 不會檢測數組是否爲空。
• map() 不會改變原始數組，而是返回一個新數組。

語法

arr.map(function(curVal,idx,arr), thisVal)

參數	描述
curVal	必須，當前元素的值。
Idx	可選，當前元素的索引值。
arr	可選，當前元素屬於的數組對象。
thisVal	可選，傳遞給函數，用做this的值。

例子

let arr = [1,2,3,4,5];
arr.map(val => val+1); // [2,3,4,5,6]

使用ES5實現map()函數

Array.prototype.myMap = function(fn, ctx) {
    let oriArr = Array.prototype.slice.call(this);
    let mappedArr = [];
    for (let i = 0; i < oriArr.length; i++) {
        if (!oriArr.hasOwnProperty(i)) {
            // 若原數組爲稀疏數組，不含索引爲i的元素時，mappedArr直接增長length，來達到一樣的稀疏效果
            mappedArr.length++;
        } else {
            mappedArr.push(fn.call(ctx, oriArr[i], i, this));
        }
    }
    return mappedArr;
};

檢測：

let a = [1,2,3,,,,4,];
a.map(val => val+1); // (8) [2, 3, 4, empty × 3, 5, empty]
a.myMap(val => val+1); // (8) [2, 3, 4, empty × 3, 5, empty]