我们将遍历JavaScript map函数,并且我将以一种简单的方式来解释它的工作方式。 在本文的后面,我们将深入探讨一些有关map函数及其用法的更高级的概念。
地图功能语法
let newArray = oldArray.map( function callback ( currentValue, index, array ) {
// return element for new_array
}, thisArg)
Array对象的map方法将函数定义作为其第一个参数(必需)。 我们传入其定义的函数将具有3个可用参数,并且将为原始数组中的每个元素调用该函数。 函数创建的每个返回值将是新数组的元素。
一个简单的示例如下所示:
const oldArray = [ 1 , 4 , 9 , 16 ];
function ourFunc ( val, index, arr ) {
return val * 2
}
const newArray = oldArray.map(ourFunc);
// newArray = [2, 8, 18, 32]
map函数还有一个可选的第二个参数,稍后我们将进行介绍,这是一种覆盖“ this ”的方法。
句法糖
![](https://i-blog.csdnimg.cn/blog_migrate/2f371f2ed1cda70fdb9d7cf6420176c4.png)
在上面的示例中,为了将原始数组中的每个值加倍,我们仅使用val参数。 在map函数中仅使用val参数是非常普遍的。 在这种情况下,我们可以简化语法,甚至可以添加一些es6箭头函数:
const oldArray = [ 1 , 4 , 9 , 16 ];
const ourFunc = arr => arr * 2
const newArray = oldArray.map(ourFunc);
// newArray = [2, 8, 18, 32]
通过仅在函数定义中仅指定一个参数,解释器将仅为函数提供val参数,如果它是我们唯一关心的问题,则可以。
我们还可以使用匿名函数,这意味着在地图输入中定义函数而不是给它命名。 这样可以使我们的代码保持干净和可读性(假设我们不需要在其他地方重用回调函数)
const oldArray = [ 1 , 4 , 9 , 16 ];
const newArray = oldArray.map( arr => arr * 2 );
// newArray = [2, 8, 18, 32]
索引参数
如果您记得较早,则回调函数定义还有第二个参数,即索引:
function callback ( currentValue, index, array )
通过使用index参数,我们可以基于数组中的位置进行一些更有趣的计算:
const oldArray = [ 1 , 4 , 9 , 16 ];
const newArray = oldArray.map( ( val, index ) => {
return val * index
});
// newArray = [0, 4, 18, 48]
数组参数
可用于我们的回调的第三个也是最后一个参数是原始数组的副本。 如果我们不仅关心当前正在操作的值或索引,这可能会很有用。 我们可以在数组中向前或向后看,并使用其他元素作为映射的一部分:
const oldArray = [ 16 , 9 , 4 , 1 ];
const newArray = oldArray.map( ( val, index, arr ) => {
let nextItem = index + 1 < arr.length ? arr[index + 1 ] : 0
return val - nextItem;
});
// newArray = [7, 5, 3, 1]
覆盖“此”
map函数具有一个经常被忽略的可选第二参数。 我们可以提供一个在回调范围内将变为“ this”的对象。
let newArray = oldArray.map(callbackFunction, thisArg)
例如,也许我们在代码的其他地方使用了一个回调,并且我们想重用它,但是我们只需要更改它在其中运行的环境即可:
const oldArray = [ 1 , 4 , 9 , 16 ];
function ourFunc ( val, index, arr ) {
return val * this .windowSize
}
const newArray = oldArray.map(ourFunc, { windowSize : 10 });
// newArray = [10, 40, 90, 169]
现在,我们可以重用该回调,但是可以通过修改“ this”来更改其参数。
谢谢阅读
- Twitter上的车道: @wagslane
- Dev.to上的车道: wagslane
- 下载Qvault: https ://qvault.io
- 为我们的Github加上星号: https : //github.com/q-vault/qvault
From: https://hackernoon.com/javascript-map-function-explained-a-deep-dive-bkr3tfr