JavaScript 实现 map() 方法函数

清疚 2022-05-26 13:37 298阅读 0赞

# 思路 #

map 迭代方法接收两个参数：

*  **对每一项执行的函数**
    
     *  该函数接收三个参数：
        
         *  数组项的值
         *  数组项的下标
         *  数组对象本身
 *  **指定 this 的作用域对象**

map 方法返回**每次函数调用结果组成的数组**。

代码表示：

arr.map(function(item, index, arr) {}, this);

# 实现 #

由此，实现 fakeMap 方法如下

代码：

Array.prototype.fakeMap = function fakeMap(fn, context) {
      if (typeof fn !== "function") {
        throw new TypeError(`${fn} is not a function`);
      }
      
      let arr = this;
      let temp = [];
      for (let i = 0; i < arr.length; i++) {
    	// 迭代执行
        let result = fn.call(context, arr[i], i, arr);
        temp.push(result);
      }
      return temp;
    };

检测：

let arr = ["x", "y", "z"];
    
    arr.fakeMap((item, index, arr) => console.log(item, index, arr));

输出：

> x 0 \[ ‘x’, ‘y’, ‘z’ \]  
> y 1 \[ ‘x’, ‘y’, ‘z’ \]  
> z 2 \[ ‘x’, ‘y’, ‘z’ \]

this 指向：

let arr = ["x", "y", "z"];
    let obj = { a: 1 };
    
    arr.fakeMap(function() {
      console.log(this.a);
    }, obj);

输出

> 1  
> 1  
> 1

# 更新 #

Array.prototype.myMap = function (fn, context) {
      const array = this
      context = Object(context) || global   // 严格模式下
      const resultArr = []
      
      for (let i = 0; i < array.length; i++) {
        let item = array[i]
        result = fn.call(context, item, i, array)
        resultArr.push(result)
      }
      return resultArr
    };

注： 严格模式下，context 为 null 或 undefined 时 Object(context) 返回空对象，不会被赋值为global

# 相关 #

迭代： [JavaScript 实现 filter() 方法函数][JavaScript _ filter_]

归并： [JavaScript 实现 reduce() 方法函数][JavaScript _ reduce_]

[JavaScript _ filter_]: https://blog.csdn.net/Beijiyang999/article/details/80179594
[JavaScript _ reduce_]: https://blog.csdn.net/beijiyang999/article/details/80186242