JavaScript 实现Array.prototype.map（）方法的polyfill

在本文中，我们将学习如何实现JavaScript中Array.prototype.map（）方法的polyfill。

什么是polyfill？

polyfill是一段计算机代码，用于在尚未支持该功能的浏览器中实现该功能。这可能是由于您正在使用的浏览器版本较旧，或者是因为新版本的浏览器没有该功能。

什么是Array.map（）方法？

我们将讨论JavaScript中由数组支持的map（）方法，并实现我们自己的版本。map（）方法为数组的每个元素调用回调函数，并通过回调函数返回的新值返回一个新数组。

语法：

// Arrow function
map((element, index, array) => { /* … */ })

// Callback function
map(callbackFn, thisArg)

// Inline callback function
map(function (element, index, array) { /* … */ }, thisArg)

参数: 此方法接受五个参数，如上所述并在下面描述：

callbackFn： 此参数保存要调用的每个元素的函数。
element： 该参数保存当前正在处理的元素的值。
index： 此参数是可选的，它保存从0开始的当前值元素在数组中的索引。
arr： 此参数是可选的，它保存调用Array.every的完整数组。
thisArg： 此参数是可选的，它保存执行回调函数时要传递的上下文。如果传递了上下文，它将像这样用于每次调用回调函数，否则将使用undefined作为默认值。

返回值: 此方法返回通过使用arg_function修改的值和来自原始数组的值创建的新数组。此函数不会修改实现此函数的原始数组。

示例:

Javascript

const arr = [1, 2, 3, 4]; 
  
// Multiply each element with 2 
// and return a new array 
const result = arr.map((item) => item * 2) 
  
console.log(result); 
  
// Add 2 to each element of the array 
// and return new array 
const newArr = arr.map(function (item) { return item + 2 }) 
  
console.log(newArr);

输出:

[2, 4, 6, 8]
[3, 4, 5, 6 ]

现在让我们创建我们自己的实现 **** Array.prototype.map 方法：

步骤：

我们将创建一个映射原型函数，该函数将接受一个回调函数作为输入。
我们将声明一个名为 resultArray 的常量变量，并将其初始化为空数组。
我们将遍历我们想要调用map方法的数组的所有元素，对于每个元素，我们将执行回调函数，并将回调函数返回的值存储在 resultArray 中。
最后，我们将返回 resultArray 。

Javascript

const arr = [1, 2, 3, 4]; 
  
Array.prototype.map = function (callBack) { 
    const resultArray = []; 
  
    if (typeof callBack !== "function") { 
        throw Error(`${callBack} is not a function`) 
    } 
    for (let i = 0; i < this.length; i++) { 
        resultArray.push(callBack(this[i], i, this)); 
    } 
    return resultArray; 
} 
  
// Multiply each element with its index 
// and return a new array 
const result = arr.map((item, index) => item * index) 
console.log(result); 
  
// Add 2 to each element of the array 
// and return new array 
const newArr =  
    arr.map(function (item) { return item + 2 }) 
  
console.log(newArr);

输出：