[FE] console.log陷阱

在前端开发中，我们经常使用console.log在浏览器控制台上打印日志，
可是当打印一个引用类型的对象时，可能会遇到奇怪的情况，
打印的结果不是该对象被打印时候的值，而是程序执行完以后该对象的结果值。

Chrome 版本 59.0.3071.86（正式版本） （64 位）

const x = [];
console.log(x);

x.push(1);
console.log(x);

这两条log在控制台上显示如下：

→ []
→ [1]

我们点击控制台上的>，是可以展开看结果内容的。

↓ []
    0: 1
    length: 1
  → __proto__: Array(0)

↓ [1]
    0: 1
    length: 1
  → __proto__: Array(

展开后看到的内容，是x的最终结果。

→ []和→ [1]在不被展开的时候是可以区分的，可是有一些情况是无法区分的。

const y = { a: { b: 0 } };
console.log(y);

y.a.b = 1;
console.log(y);

控制台上显示的结果是不可区分的，

→ Object {a: Object}
→ Object {a: Object}

在控制台中展开后的结果，也是不可区分的，

↓ Object {a: Object}
  ↓ a: Object
      b: 1
    → __proto__: Object
  → __proto__: Object

↓ Object {a: Object}
  ↓ a: Object
      b: 1
    → __proto__: Object
  → __proto__: Object

这时候就要注意console.log的陷阱了，
console.log是按引用方式打印对象的，一个对象的属性值并没有被拷贝出来，而是直接可以在控制台上查看它所对应的结果值。