JavaScript Map功能介绍：深入研究

我们将遍历JavaScript map函数，并且我将以一种简单的方式来解释它的工作方式。 在本文的后面，我们将深入探讨一些有关map函数及其用法的更高级的概念。

地图功能语法

根据Mozilla的定义：

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 ”的方法。

句法糖

在上面的示例中，为了将原始数组中的每个值加倍，我们仅使用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