为什么这个 JavaScript 映射不是无限循环？

Question

我正在学习 JavaScript。我写了这段代码来学习地图功能。但是后来我很困惑为什么这不是连续映射它，因为每个映射序列都有一个新元素被推送到数组中。它不应该在映射时继续推动新元素吗？ 为什么map函数只对原来的三个元素运行，对新推送的元素不运行？

我尝试在节点环境中调试它，arr 变量进入了一个闭包。我知道什么是闭包，但我无法理解这里发生了什么。

let array = [1, 2, 3];

array.map((element) => {
  array.push(10);
  console.log(element);
});

我希望输出应该是1,2,3,10,10,10,10,10,10,10,10......10

但实际输出只有1,2,3。

Answer 1

引用 MDN：

map处理的元素范围是在第一次调用callback之前设置的。在调用 map 开始后附加到数组的元素将不会被回调访问。如果数组的现有元素发生更改，它们传递给回调的值将是地图访问它们时的值。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map#Description

所以，它的行为是这样的，因为它就是这样设计的。除了其他原因外，它的设计方式也是为了防止无限循环！

map 是函数式编程世界中的一个函数，其中不变性是一个重要原则。根据这一原则，如果您在输入上调用map（其他变量不变），您将始终得到完全相同相同的结果。允许修改输入会破坏不变性。

Answer 2

因为它不会改变数组 ^{（请参阅Array​.prototype​.map()）}。

相反，它返回一个新数组，其中包含在调用数组中的每个元素上调用提供的函数的结果。

在下面的 sn-p 中，改变 array 的是对 array.push(10); 的三次调用（原始数组中的每个元素一次），而不是 map 函数本身。

let newArray = array.map((element) => {
    array.push(10); // <-- here you mutate the array
    console.log(element);
});

来自上述文档的重要引述（这里的关键点是）：

map处理的元素的范围设置在第一个之前 调用回调。附加到数组的元素 在地图调用开始后，回调将不会访问。

---

在下面的sn-p中你可以看到一个如何正确使用map函数的例子：

let array = [1,2,3];
let newArray = array.map(element => element + 10);  // sum 10 to every element

console.log('original: ', array); // original:  [1,2,3]
console.log('new one: ', newArray) // new one:  [11,12,13]

---

最后一个想法（也来自文档），将您发布的代码作为参考：

由于map 构建了一个新数组，因此在不使用返回的数组时使用它是一种反模式；请改用forEach 或for-of。

你不应该使用地图的标志：

• A) 您没有使用它返回的数组，和/或

• B) 您没有从回调中返回值。

Answer 3

为什么和 MDN 上的完全一样：

var new_array = arr.map(function callback(currentValue[, index[, array]]){}

map处理的元素范围是在第一次调用callback之前设置的。在调用 map 开始后附加到数组的元素将不会被回调访问。

（感谢来自 MDN 的 Joe 在上面的帖子中引用了这段话。）

一旦 map 被调用，它就会将此时的数组作为它的参数；一旦它被传递，那么任何更改都与前一个变量本身无关。

见下文：

let array = [1, 2, 3];

array.map((element) => {
  array.push(10);
  console.log(element);
});

console.log(array)