Chorme浏览器中for循环里面console.log打印二维数组,展开后数据全部一样,出现value below was evaluated just now问题

本文主要是介绍Chorme浏览器中for循环里面console.log打印二维数组,展开后数据全部一样,出现value below was evaluated just now问题,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

前言

之前在做蚁群算法研究时,遇到数据爆炸,想打印查看js数据极限点,于是设置迭代次数为5,预期是每次迭代就打印一次信息数矩阵,5次迭代打印5组不同的二维数组,好来查看每次循环中信息素的变化情况。但是console.log出来的所有数据是一样的,点击右上角的感叹号,出现Value below was evaluated just now。与预期不符。

(说明:开始猜想for循环打印的东西都一样,是不是闭包问题,试着往闭包方向去解决,采用let定义,都无效。结果证明此问题不是闭包问题,是console.log取值问题)

 

然后我模拟该算法,采用一套简单逻辑分析其原因。代码如下,设置循环次数(蚂蚁迭代次数为5次),查看每次迭代信息数的变化情况。预期情况也是每次迭代就打印一次数组,5次迭代有5组不同结果:

出现的结果却是与预期相符的,每次循环迭代出现结果不同

但是,当我点开数组后发现:又出现了Value below was evaluated just now。没展开的值,如黄色框内是不同的,展开后,如红色框内的值全是一样的。究其原因,可以发现其实是在Chrome Console.log()点击展开数组时,会重新去读一遍内存真实的值然后显示,所以展开后都是最终值。

 

因此,在打印二维数组时,其实如若不展开,他显示的就是当前值,但是点击展开后,会重新去内存读值,所以展开的值,全是最终值,所以看到所有二维数组打印的都是一个值的情况。

但是如果不展开,又看不到值,所以本文介绍以下几种解决方案:

方案一:document.write()输出显示

可以得到想要的结果,篇幅问题就不截图了。

方案二:打印之前克隆对象

function deepClone(obj){var result,oClass=isClass(obj);//确定result的类型if(oClass==="Object"){result={};}else if(oClass==="Array"){result=[];}else{return obj;}for(key in obj){var copy=obj[key];if(isClass(copy)=="Object"){result[key]=arguments.callee(copy);//递归调用}else if(isClass(copy)=="Array"){result[key]=arguments.callee(copy);}else{result[key]=obj[key];}}return result;
}
//返回传递给他的任意对象的类
function isClass(o){if(o===null) return "Null";if(o===undefined) return "Undefined";return Object.prototype.toString.call(o).slice(8,-1);
}
function sleep(numberMillis) {var now = new Date();var exitTime = now.getTime() + numberMillis;while (true) {now = new Date();if (now.getTime() > exitTime)return;}
}

可以看到,这样打印出来的就是每次都不一样了。 

方案三:Json.Stringify转换成字符串

这篇关于Chorme浏览器中for循环里面console.log打印二维数组,展开后数据全部一样,出现value below was evaluated just now问题的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/827395

相关文章

SpringBoot中@Value注入静态变量方式

《SpringBoot中@Value注入静态变量方式》SpringBoot中静态变量无法直接用@Value注入,需通过setter方法,@Value(${})从属性文件获取值,@Value(#{})用... 目录项目场景解决方案注解说明1、@Value("${}")使用示例2、@Value("#{}"php

SpringBoot分段处理List集合多线程批量插入数据方式

《SpringBoot分段处理List集合多线程批量插入数据方式》文章介绍如何处理大数据量List批量插入数据库的优化方案:通过拆分List并分配独立线程处理,结合Spring线程池与异步方法提升效率... 目录项目场景解决方案1.实体类2.Mapper3.spring容器注入线程池bejsan对象4.创建

线上Java OOM问题定位与解决方案超详细解析

《线上JavaOOM问题定位与解决方案超详细解析》OOM是JVM抛出的错误,表示内存分配失败,:本文主要介绍线上JavaOOM问题定位与解决方案的相关资料,文中通过代码介绍的非常详细,需要的朋... 目录一、OOM问题核心认知1.1 OOM定义与技术定位1.2 OOM常见类型及技术特征二、OOM问题定位工具

PHP轻松处理千万行数据的方法详解

《PHP轻松处理千万行数据的方法详解》说到处理大数据集,PHP通常不是第一个想到的语言,但如果你曾经需要处理数百万行数据而不让服务器崩溃或内存耗尽,你就会知道PHP用对了工具有多强大,下面小编就... 目录问题的本质php 中的数据流处理:为什么必不可少生成器:内存高效的迭代方式流量控制:避免系统过载一次性

C#实现千万数据秒级导入的代码

《C#实现千万数据秒级导入的代码》在实际开发中excel导入很常见,现代社会中很容易遇到大数据处理业务,所以本文我就给大家分享一下千万数据秒级导入怎么实现,文中有详细的代码示例供大家参考,需要的朋友可... 目录前言一、数据存储二、处理逻辑优化前代码处理逻辑优化后的代码总结前言在实际开发中excel导入很

Vue3绑定props默认值问题

《Vue3绑定props默认值问题》使用Vue3的defineProps配合TypeScript的interface定义props类型,并通过withDefaults设置默认值,使组件能安全访问传入的... 目录前言步骤步骤1:使用 defineProps 定义 Props步骤2:设置默认值总结前言使用T

MyBatis-plus处理存储json数据过程

《MyBatis-plus处理存储json数据过程》文章介绍MyBatis-Plus3.4.21处理对象与集合的差异:对象可用内置Handler配合autoResultMap,集合需自定义处理器继承F... 目录1、如果是对象2、如果需要转换的是List集合总结对象和集合分两种情况处理,目前我用的MP的版本

JavaScript中比较两个数组是否有相同元素(交集)的三种常用方法

《JavaScript中比较两个数组是否有相同元素(交集)的三种常用方法》:本文主要介绍JavaScript中比较两个数组是否有相同元素(交集)的三种常用方法,每种方法结合实例代码给大家介绍的非常... 目录引言:为什么"相等"判断如此重要?方法1:使用some()+includes()(适合小数组)方法2

Spring 依赖注入与循环依赖总结

《Spring依赖注入与循环依赖总结》这篇文章给大家介绍Spring依赖注入与循环依赖总结篇,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录1. Spring 三级缓存解决循环依赖1. 创建UserService原始对象2. 将原始对象包装成工

GSON框架下将百度天气JSON数据转JavaBean

《GSON框架下将百度天气JSON数据转JavaBean》这篇文章主要为大家详细介绍了如何在GSON框架下实现将百度天气JSON数据转JavaBean,文中的示例代码讲解详细,感兴趣的小伙伴可以了解下... 目录前言一、百度天气jsON1、请求参数2、返回参数3、属性映射二、GSON属性映射实战1、类对象映