JavaScript数组循环异常行为求助——Eloquent JS数组反转练习问题

嘿，这个问题我之前也踩过坑！咱们先拆解下为什么会出现最后一个元素留着的情况，再给你几个可行的解决办法。

问题根源：循环依赖动态变化的数组长度 #

不管你用for-of还是常规的顺序for循环，核心问题都是你在循环过程中修改了原数组的长度：每次pop()都会让原数组的长度减1，而循环的终止条件却依赖这个不断变小的长度，导致循环提前结束，最后一个元素没被处理。

举个具体例子，假设原数组是[a, b, c]：

• 用for (let i = 0; i < arr.length; i++)循环：

  1. 第一次循环（i=0）：arr.length是3，满足条件，pop()出c，数组变成[a, b]，长度变为2。
  2. 第二次循环（i=1）：arr.length是2，满足条件，pop()出b，数组变成[a]，长度变为1。
  3. 第三次循环（i=2）：arr.length是1，2 < 1不成立，循环直接终止，a就留在原数组里了。

• 用for-of循环的情况类似：for-of是基于数组初始的迭代器来遍历的，但当你pop()元素时，原数组的元素被移除，迭代器的遍历节奏会和数组变化不同步，最终也会导致部分元素没被处理。

解决方案 #

方案1：用while循环（最贴合你的思路） #

直接循环到原数组为空，不管它的长度怎么变：

function reverseArray(arr) {
  const temp = [];
  while (arr.length > 0) {
    temp.push(arr.pop());
  }
  return temp;
}

// 测试
const original = [1, 2, 3, 4];
console.log(reverseArray(original)); // [4, 3, 2, 1]
console.log(original); // []（原数组会被清空，如果你不想修改原数组，先复制一份）

如果不想修改原数组，可以先复制一个副本：

function reverseArray(arr) {
  const copy = [...arr];
  const temp = [];
  while (copy.length > 0) {
    temp.push(copy.pop());
  }
  return temp;
}

方案2：基于初始长度的for循环 #

先把原数组的初始长度存下来，循环次数固定为初始长度，就不会被动态变化的长度影响：

function reverseArray(arr) {
  const temp = [];
  const initialLength = arr.length;
  for (let i = 0; i < initialLength; i++) {
    temp.push(arr.pop());
  }
  return temp;
}

方案3：不修改原数组的反转（额外思路） #

如果你不想用pop()，也可以直接通过索引从后往前遍历原数组，把元素push到临时数组：

function reverseArray(arr) {
  const temp = [];
  for (let i = arr.length - 1; i >= 0; i--) {
    temp.push(arr[i]);
  }
  return temp;
}

这样就能完美实现数组反转，不会漏掉任何元素啦！

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