数组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]