1.问题描述
代码调试,在ajax一返回立马打印,发现结果竟然是后续处理过后的

2.伪代码复现

  1. var array = [1,2];
  2. var obj = {
  3. a: 1,
  4. b: [1,2]
  5. }
  6. console.log(array); //[1, 2] 误,外部显示的[1, 2],点开箭头显示的[1,2,3]
  7. console.log(obj); //{a:1,b:[1,2,3]}
  8. array.push(3);
  9. obj.b.push(3);
  10. console.log(array); //[1,2,3]
  11. console.log(obj); //{a:1,b:[1,2,3]}

更正:打印结果中带三角箭头的地方需要展开查看最终结果,外部显示可能并不一致

3.产生原因
对象保存的是地址,引用同一片内存空间,后面发生改变,也会影响打印出来的值。
但凡是有个箭头出来的,可以认为是一个对象了,所以数值是实时的。三角形点开的时候才会拿着内存地址去取对象的值。
而你查看的时候,对象里的内容已经被改过了。所以这个直接log 对象或者数组的方式,并不能很好的体现内部值的一个实时性。

4.猜想
把push放入setTimeout延时5秒会怎样?

  1. var array = [1,2];
  2. var obj = {
  3. a: 1,
  4. b: [1,2]
  5. }
  6. console.log(array);
  7. console.log(obj);
  8. setTimeout(function(){
  9. array.push(3);
  10. obj.b.push(3);
  11. },5000);
  12. console.log(array);
  13. console.log(obj);

观察结果,小箭头一旦被点开,里面直接对应的子数据就会定格,5秒后点开这部分数据并不会更新,但是未层被点开的三角下的数据和上面一样会更新

5.解决方案
对引用类型转化为字符串后打印

  1. console.log(JSON.stringify(b));
作者 铁血 汉子 2019年9月25日
2025/06/10/06:54:44pm 2019/9/25/8:35:50
0 1442