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分配一个新值不会更改控制台中看到的值，因为该值仍指向原始对象。

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

1 个答案: