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

标签 javascript vue.js console.log google-developer-tools

<分区>

当我使用第一个代码示例时,出于某种原因 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() 函数中。

最佳答案

记录对象/数组的控制台是“实时的”。控制台仅存储对该对象的引用。直到您在控制台中展开对象时才会捕获属性值,届时您的对象将发生变化。

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

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

关于javascript - 如何解释 vue.js 中 console.log() 的这种奇怪行为?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56804533/

相关文章:

vue.js - 如何使用 vue-router 处理错误

javascript - 后端API应用程序未运行时如何处理Vue JS应用程序?

javascript - 无需 F12 工具即可在 Internet Explorer 上恢复 javascript 日志和错误

javascript - 在 checkout.js 上禁用 Paypal 机器人后消息传递 - 如何关闭 Debug模式

javascript - 当我们移动到 Angular 6 中的另一个组件时,如何销毁一个组件?

javascript - NaN 未知原因

javascript - vite-plugin-pages 中可以使用静态部分的动态路由吗?

angular - 如何阻止 Angular 路由器事件在控制台上打印

Javascript:显示大数时如何避免科学记数法

javascript - 如何从外部停止Web Worker中的JavaScript?