如何解释 vue.js 中 console.log() 的这种奇怪行为？

Question

当我使用第一个代码示例时，出于某种原因 console.log() 为我提供了经过处理的 HighData 变量。就好像 console.log() 在脚本的末尾。

console.log( "data", this.data['diagram'] );
var HighData = this.data['diagram'];

minSerieHeight = getMin( HighData[3] );
HighData[0] = mkSerie( HighData[0] );
HighData[1] = mkSerie( HighData[1] );
HighData[2] = mkSerie( HighData[2] );
HighData[3] = mkSerie( HighData[3] );

更奇怪的是，当我使用 array.map()（与上面的代码完全相同）时，它 returns this.data['diagram'] 变量如预期的那样正确。

console.log( "data", this.data['diagram'] );
var HighData = this.data['diagram'];

minSerieHeight = getMin( HighData[ HighData.length - 1 ] );
HighData = HighData.map( e => {
    return mkSerie( e );
});

代码在 mounted() 函数的 Vue 组件中。 getMin() 和 mkSerie() 也在 mounted() 函数中。

Answer 1

控制台记录 object/array 是 'live'。控制台仅存储对该对象的引用。直到您在控制台中展开对象时才会捕获属性值，届时您的对象将发生变化。

JSON.stringify 可用于捕获对象的字符串版本。因为它是一个字符串，所以可以在没有任何更改风险的情况下进行记录。为此，它确实需要将对象转换为 JSON，这并不总是可能的。

map 示例有点不同。您没有改变记录的同一个对象。仅仅为 HighData 分配一个新值不会改变在控制台中看到的值，因为它仍然指向原始对象。

如何解释 vue.js 中 console.log() 的这种奇怪行为？

How can this strange behaviour of console.log() in vue.js be explained?

javascript

vue.js

console.log

google-developer-tools