JavaScript Map 函数详解——深入解析

我们将逐步讲解 JavaScript 的 map 函数，并简单解释它的工作原理。本文稍后将深入探讨 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]

映射函数还有一个可选的第二个参数，我们稍后会介绍，这是一种覆盖“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参数，如果这是我们唯一关心的事情，那么这是可以的。

我们也可以使用匿名函数，这意味着在 map 的输入中定义函数，而不是给它命名。这可以保持代码的简洁性和可读性（假设我们不需要在其他地方复用回调函数）。

const oldArray = [1, 4, 9, 16];

const newArray = oldArray.map(arr => arr * 2);

// newArray = [2, 8, 18, 32]

索引参数

如果您还记得之前的内容，回调函数定义有第二个参数，即索引：

function callback(currentValue, index, array)

通过使用索引参数，我们可以根据数组中的位置进行一些更有趣的计算：

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]

覆盖“This”

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”来更改其参数。

感谢阅读

Lane 的 Twitter 账号：@wagslane

Lane在Dev.to：wagslane

下载 Qvault：https://qvault.io

为我们的 Github 加星标：https://github.com/q-vault/qvault

JavaScript Map 函数详解 – 深入探究一文最先出现在Qvault上。

鏂囩珷鏉ユ簮锛�https://dev.to/wagslane/javascript-map-function-explained-a-deep-dive-4a6b