掌握JavaScript中的map与call方法

资源摘要信息: "['1','2','3'].map(parseInt) 一道题的扩展, 实现 map, call" 在JavaScript中，`['1','2','3'].map(parseInt)` 是一个常见的面试题目，用来考察对JavaScript内置函数`map`和`parseInt`的理解，以及对JavaScript中函数的`call`方法的掌握。这个表达式的效果是对数组`['1','2','3']`中的每个元素执行`parseInt`函数，其中`parseInt`会在每次迭代时被`map`函数以当前元素和索引作为参数调用。由于`parseInt`接受两个参数，第一个是需要转换的字符串，第二个是转换时使用的基数，所以这里的索引值会被`parseInt`误用作基数，从而产生非预期的结果。 让我们先了解一下这些函数： 1. `map`函数：它是一个高阶函数，用于创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。`map`函数会给原数组中的每个元素依次执行回调函数，并将回调函数的返回值组成一个新数组返回。 2. `parseInt`函数：这是一个全局函数，用于将字符串解析为指定基数的十进制整数。通常情况下，`parseInt`的第二个参数用来指定字符串的基数（进制数），如果未提供或者提供的基数不在2到36之间，`parseInt`会根据字符串的首字符来猜测基数。 3. `call`方法：是所有函数对象都有的方法。`call`方法可以用来调用某个函数，其第一个参数会被指定为该函数体内`this`的值，后续参数则为调用函数时传递的参数。 现在我们来扩展这个题目，实现一个自己的`map`函数，并使用`call`方法来确保在每个元素执行的回调函数中正确设置`this`的值。 ```javascript // 自定义map函数 function myMap(array, callback) { let result = []; for (let i = 0; i < array.length; i++) { // 使用call方法调用callback，并将当前元素和索引作为参数传递，同时将array作为this传递给callback函数 result.push(callback.call(array, array[i], i)); } return result; } // 使用自定义的myMap函数，模拟JavaScript原生map的行为 let result = myMap(['1', '2', '3'], function(value, index) { // 这里模拟parseInt的行为，同时正确处理基数 let base = index === 0 ? 10 : 2; return parseInt(value, base); }); console.log(result); // 输出应该是 [1, 2, 3] // 上述代码中，我们首先定义了一个myMap函数，它接受一个数组和一个回调函数作为参数。 // 在myMap函数内部，我们创建了一个空数组result来存储回调函数的返回值。 // 接着，我们遍历数组，使用call方法调用回调函数，并传入当前元素和索引作为参数，同时将数组本身作为this传递给回调函数。 // 这样做保证了回调函数中可以访问到数组的元素，并且可以使用数组本身的方法（如果回调函数中需要的话）。 // 最后，我们返回了result数组，它包含了回调函数针对每个数组元素返回的结果。 // 在上述代码的回调函数中，我们假设第一个元素（即索引为0的元素）按照10进制进行解析，其余元素按照2进制进行解析。 // 这样就可以模拟`['1', '2', '3'].map(parseInt)`中的行为，但是使用了自定义的myMap函数，并且在回调函数中明确了基数，避免了原生map函数中索引被误用作基数的问题。 ``` 在这个例子中，我们不仅实现了自己的`map`函数，而且还演示了如何在回调函数中正确使用`call`方法，以确保`this`的正确绑定以及向回调函数正确传递参数。这对于理解JavaScript中函数作为一等公民的概念以及上下文绑定是非常重要的。