数组元素重复打印异常：for循环致‘4’重复三次及arr.pop()无效排查

嘿，这个问题我之前也踩过坑！你遇到的核心问题是在遍历数组的时候动态修改了它的长度/内容，导致循环的迭代次数超出预期，所以数字4才会被多打印一次。

先说说为什么arr.pop()没用：pop()只是删掉数组最后一个元素，如果你的操作是先插入元素再pop，等于白忙活，根本没实现“翻倍”的效果；就算位置不对，也解决不了循环次数异常的本质问题。

给你几个针对性的解决方案，按需选就行：

1. 最简单的：直接打印两次（不用改数组） #

如果你的需求只是把每个元素打印两次，完全不需要修改数组，直接在循环里打印两次就好：

function printDouble(arr) {
  for (const num of arr) {
    console.log(num);
    console.log(num);
  }
}

printDouble([1, 2, 3, 4]);
// 输出顺序：1、1、2、2、3、3、4、4

2. 先生成翻倍数组再打印（需要保留翻倍后的数组） #

如果你需要先把数组改成每个元素重复两次的形式再打印，别在遍历原数组的时候修改它，换个思路：

function getDoubledArray(arr) {
  const doubled = [];
  for (const num of arr) {
    doubled.push(num, num); // 直接往新数组里塞两次
  }
  return doubled;
}

const myArr = [1,2,3,4];
const doubledArr = getDoubledArray(myArr);
console.log(doubledArr); // 输出 [1,1,2,2,3,3,4,4]
doubledArr.forEach(num => console.log(num));

要是你非要在原数组上修改，记得先拿原数组的固定长度，而且从后往前遍历（避免插入元素打乱前面的索引）：

function doubleInPlace(arr) {
  const originalLen = arr.length;
  // 从最后一个元素往前插，不会影响未处理的元素索引
  for (let i = originalLen - 1; i >= 0; i--) {
    arr.splice(i, 0, arr[i]);
  }
}

const myArr = [1,2,3,4];
doubleInPlace(myArr);
console.log(myArr); // [1,1,2,2,3,3,4,4]
myArr.forEach(num => console.log(num));

3. ES6简洁写法：用flatMap一步到位 #

喜欢简洁代码的话，用数组的flatMap方法可以一行搞定：

const myArr = [1,2,3,4];
const doubledArr = myArr.flatMap(num => [num, num]);
console.log(doubledArr); // [1,1,2,2,3,3,4,4]
doubledArr.forEach(num => console.log(num));

flatMap会把每个元素映射成包含两个相同元素的数组，然后自动扁平化，完美符合需求。

总的来说，你之前的问题根源是遍历过程中修改数组导致循环逻辑混乱，pop()解决不了这个本质问题，换上面的方法就能搞定啦！

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