JS中引用的小问题

发表于   |   分类于   |  

今天做简单的冒泡排序时，由于需要用图示法来展示冒泡排序的过程。于是便对每一次数组位置调换记录了快照，然后在渲染。开始的代码是这样的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script>
    var arr = [5,4,3,2,1];
    var i = 0,
        j = 0,
        temp = 0;
        len = arr.length;
        snapshoot = [],
    for (i=0; i < len; i++) {
    for (j = len-1; j > i; j--) {
      if (arr[j-1] > arr[j]) {
        temp = arr[j-1];
        arr[j-1] = arr[j];
        arr[j] = temp;
        // 记录快照
        snapshoot.push(arr);
      }
    }
}
</script>

这里最后snapshoot最后的元素都是一个相同的数组：[1,2,3,4,5]，即排序完成后的arr，是什么原因导致了这样的结果呢？因为snapshoot中的arr都指向同一个数组。

这里的解决方法多种多样，只要解除push后snapshoot中元素的指向即可。
如： 

1
snapshoot.push(JSON.parse(JSON.stringify(arr)));

抑或：

1
snapshoot.push(arr.concat());