map()方法正在更改调用Array

Question

map()不能改变调用数组，而是返回一个具有修改值的新数组。但是，下面的代码改变了原来的数组，我的理解有错吗？

const arr = [1, 2, 3, 4, 5];
arr.map((num, index, arr1) => {
return arr1[index] = num * 2;
});
console.log(arr); // [2, 4, 6, 8, 10]

Answer 1

通过将原始数组的引用传递到map()(arr1)内部的回调函数，然后手动访问索引，可以对其进行更改。如果您只返回该函数的值，它将创建一个新数组。

const arr = [1, 2, 3, 4, 5];
const arr1 = arr.map((num) => {
return num * 2;
});
console.log(arr); // [1, 2, 3, 4, 5]
console.log(arr1); // [2, 4, 6, 8, 10]

Answer 2

map回调函数的第三个参数是调用地图的原始/源阵列

arr和arr1都是相同的，即都引用在同一个数组上，您可以使用console.log(arr === arr1)来查看它。所以无论你在arr1上执行什么操作，它都会影响arr。

const arr = [1, 2, 3, 4, 5];
arr.map((num, index, arr1) => {
console.log(arr1 === arr);
return num * 2;
});

您可以从回调函数返回num * 2。map在内部创建一个新数组并返回。因此，您不必将其分配为

arr1[index] = num * 2

您也可以将其设为one-liner：

arr.map((num, index, arr1) => num * 2)

const arr = [1, 2, 3, 4, 5];
const result = arr.map((num, index, arr1) => {
return num * 2;
});
console.log(arr); // [2, 4, 6, 8, 10]
console.log(result); // [2, 4, 6, 8, 10]

Answer 3

Array.map创建一个新数组，其中填充了对调用数组中的每个元素调用所提供函数的结果。

这里指定您必须对调用数组的每个元素调用或执行一个函数。

您的代码有什么问题

您实际上并不是在调用函数，而是在更新原始数组。如果您希望通过将元素的每个节点乘以2来创建一个新数组，则应该执行以下操作。

工作示例

const arr = [1, 2, 3, 4, 5];
const newArray = arr.map((nodeFromOriginalArray, indexOfCurrentElement, arrayFromMapCalled) => {
return nodeFromOriginalArray * 2;
});
console.log(arr);
console.log(newArray);

允许调试映射函数中的参数

在这里，我们提供了三个论点。

第一个参数nodeFromOriginalArray：数组中正在处理的当前元素。这将是调用数组中的每个节点。

第二个参数indexOfCurrentElement：数组中正在处理的当前元素的索引。也就是说，调用数组中当前元素的索引。

第三个参数arrayFromMapCalled:调用了数组map。这是正在执行map函数的数组。请注意，这是原始数组。更新此数组内的属性会导致更新调用数组。你的案子就是这样。

您不应该修改原始数组，这是第三个参数。相反，您应该返回map中被2复用的节点，并将其分配给一个新数组。更新map函数中的第三个参数会使调用数组发生变化。

Answer 4

在数组上调用map时，您将提供一个mapper，其中包含三个参数、数组中的一个项、它的索引和数组本身(正如您在代码片段中所表示的)。

CCD_ 21将函数CCD_ 22返回的值作为操作返回的新数组中索引处的元素。

const arr = [1,2,3,4,5]
const doubled = arr.map(x => x * 2) // [2,4,6,8, 10]

map的过度简化的实现(没有index和originalArray参数)可能是这样的。让我们假设它不是数组实例上的一个方法，而是一个接受数组和映射器函数的函数。

我不建议在生产代码中重新实现，有本机实现以及几个库，如lodash和underliner来实现它。

function map(arr, mapper) {
const result = [];
for (const item of arr) {
const resultItem = mapper(item);
result.push(resultItem);
}
return result;
}
function double(x) {
return x * 2;
}

const doubled = map([1,2,3,4,5,6], double); // [2, 4, 6, 8 ,10, 12]