如何解释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()（它做的事情与上面的代码完全相同）时，它会按照预期正确地返回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

控制台记录对象/数组是“活动的”。控制台只是存储对对象的引用。直到您在控制台中展开对象，才捕获属性的值，此时对象将发生更改。

json.stringify对于捕获对象的字符串版本非常有用。因为它是一个字符串，所以可以在没有任何更改风险的情况下记录它。要使其工作，需要将对象转换为JSON，但这并不总是可能的。

map示例有点不同。您不是在修改记录的同一个对象。仅仅为highdata指定一个新值不会改变控制台中看到的值，因为该值仍然指向原始对象。