如何用ES5的forEach循环将数组反转到新数组？代码问题排查

你遇到的问题核心在于**forEach循环的工作机制**，以及你在循环中修改了原数组的长度导致迭代提前终止。

为什么当前代码不符合预期？ #

forEach在执行前会先确定数组的初始长度，然后按照索引从0到length-1依次调用回调函数。但你在回调里使用了oldArray.pop()，这会直接缩短原数组的长度——当循环到后面的索引时，这些索引已经超出了当前数组的实际长度，回调函数就不会再执行了。

举个具体的过程拆解（你的原数组初始是["h","e","l","l","o"]，长度为5）：

1. 第一次循环（索引0）：pop()取出"o"，原数组变为["h","e","l","l"]（长度4），新数组["o"]
2. 第二次循环（索引1）：pop()取出"l"，原数组变为["h","e","l"]（长度3），新数组["o","l"]
3. 第三次循环（索引2）：pop()取出"l"，原数组变为["h","e"]（长度2），新数组["o","l","l"]
4. 第四次循环（索引3）：此时原数组长度只有2，索引3不存在，回调跳过
5. 第五次循环（索引4）：同样索引不存在，回调跳过

这就导致原数组还剩["h","e"]没被处理，新数组也只拿到了前三个反转元素。

符合ES5要求的修复方案 #

既然要清空原数组并把元素反转到新数组，我们可以用**for循环**来替代forEach——先保存原数组的初始长度，然后循环对应次数，确保所有元素都被处理：

var arrayA = ["h","e","l","l","o"];
var arrayB = [];
function copyArray(oldArray, newArray) {
  // 先保存原数组的初始长度，避免循环中长度变化影响次数
  var initialLength = oldArray.length;
  for (var i = 0; i < initialLength; i++) {
    var storeElement = oldArray.pop();
    newArray.push(storeElement);
  }
  console.log(oldArray + " FINAL old array");
  console.log(newArray.join(', ') + " FINAL new array");
}
copyArray(arrayA, arrayB);

执行这段代码后，你会得到预期的结果：

"" FINAL old array
"o, l, l, e, h" FINAL new array

额外说明 #

如果你不想修改原数组（只是复制反转后的内容），ES5也可以这样实现：

function copyReversedArray(oldArray, newArray) {
  // 从后往前遍历原数组，不修改原数组
  for (var i = oldArray.length - 1; i >= 0; i--) {
    newArray.push(oldArray[i]);
  }
  console.log(oldArray + " original array");
  console.log(newArray.join(', ') + " reversed new array");
}

这样原数组会保持不变，新数组得到反转后的内容。

内容的提问来源于stack exchange，提问作者Burg