如何解释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就不会更改控制台中看到的值，因为该值仍指向原始对象。