冒泡排序迭代存储异常求助：为何pool中全是排序后数组？

你遇到的这个问题其实是JavaScript里引用类型的典型“坑”！核心原因说穿了很简单：数组是引用类型，你存到pool里的不是当前数组的“快照”，而是指向同一个数组的内存地址。

具体原因拆解 #

当你执行pool.push(array)的时候，并没有复制一份当前状态的数组存进去，只是把这个数组的引用（可以理解为指向内存中数组对象的“指针”）添加到了pool里。排序过程中你一直在修改原数组的元素，而pool里的每一项都和原数组指向同一个内存对象——所以当排序完成后，所有pool里的项自然都显示为最终排好序的数组。

另外补充个小细节：你看到console.dir(array)输出全是最终状态，其实是浏览器控制台的“延迟求值”特性搞的鬼——控制台不会立刻把数组的当前状态渲染出来，当你展开它的时候才会去读取最新的数组状态，所以即使你在循环里打印，最后展开看到的也是修改后的结果。

解决办法：每次存入数组的副本 #

要保存每一轮的迭代快照，你需要在push的时候创建一个原数组的浅拷贝，生成一个新的数组对象，这样pool里的每一项都是独立的数组，不会跟着原数组变化。常用的几种方式：

• 使用扩展运算符[...array]
• 使用数组的slice()方法（无参数时返回完整副本）
• 使用Array.from(array)

修改后的完整代码 #

const pool = []; 
const bubbleSort = (array) => { 
  const len = array.length; 
  // 顺便优化下冒泡排序：每轮排序后末尾的i个元素已经有序，内层循环不用遍历到末尾
  for (let i = 0; i < len; i++) { 
    for (let j = 0; j < len - i - 1; j++) { 
      if (array[j] > array[j + 1]) { 
        const tmp = array[j]; 
        array[j] = array[j + 1]; 
        array[j + 1] = tmp; 
      } 
    }
    // 存入当前数组的副本，而不是原数组的引用
    pool.push([...array]); 
    // 打印副本，避免控制台延迟显示的问题
    console.dir([...array]); 
  } 
} 
bubbleSort([3, 2, 1]); 
console.log(pool);

现在运行代码，pool里就会按顺序保存每一轮排序后的状态，完全符合你做动画的需求啦。

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