console.log能打印出对象，但是取不到对象属性

原创 已于 2023-05-19 16:44:15 修改 · 1w 阅读 · 24 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #开发语言 #ecmascript

于 2020-05-01 22:35:03 首次发布
本文总结了在JavaScript中遇到的两种常见情况导致无法正确获取值的问题。一是后台返回的json字符串需要使用JSON.parse()转换为对象才能取值；二是有时通过ajax或其他异步方式获取的数据在console.log中显示为空，此时可以通过Object.assign()方法复制对象来解决问题。

总结可能产生的原因有2个：

1.后台返回的是json字符串，需要用JSON.parse（）转换为对象才能取到值。

2.有时候ajax异步/其他异步取到的值能在console.log中打印出来，但在程序的console.log处并没有值，这时可以用Object.assign（）将对象进行一次拷贝，然后便可以取到了。

eg：dataList取不到值。let newList=Object.assign（{}，dataList）；newList便可以取到该值。

console.log打印结果是 [object Object] 的解决方案
汤圆的博客
01-07 1万+
学习笔记使用:自己看的 下图是前端打印data数据的 console.log(data,“6666666666666111”)打印的时候 不能用+号 要用, 使用+号的话 在控制台就会发现 输出的是 [object Object] console.log(data+"6666") console.log(data,"6666") console.log打印结果是 [object Object] 的解决方案 data返回[object Object]的格式: data返回正确格式的数据:
js console.log打印对象时属性缺失的解决方法
10-16
然而，在调试对象时，可能会遇到对象属性不完整的问题，这会对我们获取正确的信息造成困扰。在本文中，将介绍在使用console.log()打印对象时可能出现的属性缺失问题以及解决这些问题的方法。 首先，需要明确在...
work-notes（19）：JS 引用类型数据，明明输出可以看得到数据，为什么取值却为空，或者对值判断或操作时 undefined 找不到？
jinzai9976的博客
06-28 2603
就是明明数组、对象等可以输出看得到数据，但取不到值；取值都是 undefined ； 因为这些都是引用类型数据，代码写的是在操作之后输出，但是实际上在操作之前进行输出，所以为空； 为什么能输出： 因为只是简单的 = （赋值），指向地址，数据可以输出，但是实际上输出的变量是没有存值的；.........
vue在控制台展开有值代码却获取不到
hoopec的博客
05-07 4399
目录1.浏览器控制台获取到的是当前值2.vue this指向发生改变异步请求 我们在平时经常遇到在测试的过程中在浏览器控制台展开数据有值但是代码却无法获取到值，我总结了自己遇到的一些情况，后面再发现可能继续更新。 1.浏览器控制台获取到的是当前值 当我们在console.log输出测试点开查看是否有值时，发现明明有值，代码使用时却获取不到，这是因为浏览器获取的是该参数当前的值，而不是你console.log输出时的值。 可以发现当我们在对展开之前又给它push一个值后，展开的是最新的数据而不是调用它时的数
Vue能打印出对象,但是打印不出具体的属性值
weixin_63712639的博客
08-11 4806
在开发中我发现打印对象可以正常显示，但是获取具体属性的时候没有值，后面查阅相关知识才知道因为新增的不是响应式数据，所以新增的属性名，没有set和get方法，就没法获取该值了。，所以它会调用相关 getter 和 setter。所以我们可以通过Object.assign方法解决这个问题。方法会拷贝源对象自身的并且可枚举的属性到目标对象。...
vue或react项目生产环境去掉console.log的操作
10-14
在构建Vue或React项目时，开发过程中我们通常会在控制台使用console.log()、***()、console.debug()等方法来打印日志信息，帮助我们调试程序。然而，在将应用程序部署到生产环境时，这些日志信息就不再需要了。此时...
详解前端console.log自定义打印列表图片和调试
鹏多多的博客
06-27 1725
本文全面介绍了JavaScript中Console对象的多样化调试功能。基础部分涵盖debug/log/info等不同级别的信息打印；数据可视化展示了表格形式的数据呈现和分组日志管理；性能调试方面包括计时器、计数器和对象结构分析；错误处理环节讲解堆栈跟踪和断言机制；高级特性包含控制台样式自定义和图片打印技巧。这些方法为开发者提供了从基础调试到复杂性能优化的全套工具，显著提升开发效率。
js中console在一行内打印字符串和对象的方法
10-16
在使用console.log打印多个参数时，除了字符串和对象，我们还可以传递数字、布尔值等各种类型的数据。这是因为console.log方法本质上是将多个参数逐一处理后显示出来。在某些情况下，如果需要在参数之间添加空格或者...
window对象明明有值，为什么拿不到呢？原来如此！
EmotionComputer
03-11 4744
let obj = {}; console.log(obj); obj.a = 1;
html控制台 打印 consol,浏览器console.log()打印输出台不显示输出内容……
weixin_36192634的博客
06-25 5330
浏览器console.log()打印输出台不显示输出内容的原因应该很多，如网络上所说：console.log()被重新定义等等原因(需要验证真实性？)都可能导致console.log()打印不能显示打印信息。今天，在测试screen.availWidth的时候就出现了console.log()打印台始终无法打印出内容的局面。困惑了半天后，终于找到了具体的原因。并且看到这个原因的时候，真TM想给自己...
console.log()是打印对象时的问题
ROBIN12JBJ的博客
12-22 311
console.log()是异步还是同步
consle.log打印出来的都是object无法查看
weixin_51751186的博客
05-04 1033
a
js 控制台打印对象，对象点开后里面属性没值，展开后有值（object展开和收起值不一致）
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
10-08 6240
js 打印这个对象的语句执行的时候, 对象里面的确是有值的,但是当程序继续执行,下面的代码有对这个对象赋值的语句,所以chrome控制台显示,里面有值。 打印时内存里的值已经变了 ，导致 展开和收起不一致。 因为 js对象赋值 只是引用地址赋值过去了，还是指向同一个 地址。 所以 js想要拷贝一个 object需要 深拷贝 最简单的就是 json.stringfly方法 示例： let obj={ name:"555", age:"15" }; console.log(ob
js控制台打印对象，里面属性为空，对象点开后里面属性有值
csdnzhang365的博客
03-23 7898
打印这个对象的语句执行的时候, 对象里面的确是空的, 但是当程序继续执行,下面的代码是有对这个对象赋值的语句,所以chrome控制台显示,里面有值, 可以在打印这个对象语句上设置断点,然后执行一句,此时去看控制台,就是你想要的结果 ...
console.log打印对象时属性缺失的解决方法
码飞_CC的博客
05-22 6091
文章目录1. 序2. console.log()输出对象属性缺失3. 获取正确的结果3.1 方法1：对象展开3.2 方法2： JSON.stringfy()看字符串 1. 序 在编写代码时，我们常常用console.log()的方式将信息在控制台中打印出来以帮助我们进行前端调试。一般情况下，我们打印普通值都没有问题，但在打印对象类型时，我们就需要注意点了，要不然可能会出现不符合期望的结果。 2. ...
谷歌Chrome浏览器控制台无法输出console.log打印数据怎么办？
m0_67841039的博客
07-06 6996
谷歌Chrome浏览器控制台无法输出console.log打印数据怎么办？
console.log无法打印问题
热门推荐
weixin_45773788的博客
06-26 1万+
本人遇到情况：vue项目中watch监听器监听绑定事件，console.log在控制台无显示，尝试alert正常。可能原因一：浏览器过滤条件问题（网上最常见的原因但本人并不是） 解决方案：左侧top栏选择info，默认级别（Default levels）中信息选项（info选项）要勾选，筛选器中清空。可能原因二（本人遇到的原因查了很久）：浏览器扩展程序问题。解决方案：亲测删除多余扩展后（云文档等）功能恢复正常，在另一浏览器上也是如此，都是存在云文档这一扩展程序导致console.log打印失效。...
微信小程序 关于打印数组为空，数组长度为0的问题，微信小程序前端开发
2401_84094908的博客
04-06 1374
分享一套阿里大牛整理的前端资料给大家，点击前端校招面试题精编解析大全即可免费下载F.jpg" />分享一套阿里大牛整理的前端资料给大家，点击前端校招面试题精编解析大全即可免费下载。
javascript中如果console.log之后 打印会在哪里输出看到
最新发布
10-14
<think>我们正在讨论的是JavaScript中console.log的输出位置问题。根据引用[1]和引用[3]，console.log的输出位置通常是浏览器的控制台（Console）或Node.js的控制台（如果是Node环境）。下面我将详细解释。 ### 在浏览器环境中的输出位置 在浏览器中，console.log()函数会将内容输出到浏览器的开发者工具（DevTools）中的控制台（Console）选项卡。打开控制台的常用方式： - 按F12键（或Ctrl+Shift+I）打开开发者工具，然后切换到Console选项卡 - 右键点击页面，选择“检查”或“审查元素”，然后切换到Console选项卡 例如，执行以下代码： ```javascript console.log("Hello, World!"); ``` 在控制台将显示： ``` Hello, World! ``` ### 在Node.js环境中的输出位置 在Node.js环境中，console.log()会将内容输出到终端（命令行窗口）。例如： ```javascript console.log("Hello, Node.js!"); ``` 运行该脚本（如：node app.js）后，输出将显示在终端中。 ### 输出格式化和高级用法 引用[4]展示了如何使用格式化字符串和CSS样式（仅浏览器支持）来美化控制台输出。例如： ```javascript console.log("%cHello, World!", "color: blue; font-size: 20px;"); ``` 在浏览器控制台会以蓝色、20px字体显示"Hello, World!"。 ### 输出位置的行号显示 引用[1]提到，console.debug()可以输出一个超链接指向调用位置。同样，console.log()在浏览器控制台中也会显示调用该日志的代码行号和文件名（点击可跳转到源码）。但如果是直接在控制台输入console.log()，则不会显示超链接。 引用[2]提到，可以通过封装函数来输出函数名或自定义信息。例如： ```javascript function log(data, functionName) { console.log(functionName + ": ", data); } ``` ### 注意事项 1. **引用[3]指出**：当你打印DOM节点时，由于控制台输出的是动态引用，所以展开节点查看属性时，显示的是当前最新状态，而不是打印时的状态[^3]。 ```javascript const element = document.getElementById('myElement'); console.log(element); // 点击展开查看属性时，显示的是当前状态 ``` ### 总结 - **浏览器环境**：console.log输出到开发者工具的控制台。 - **Node.js环境**：console.log输出到终端（命令行窗口）。 - 输出内容可以格式化（如添加样式、变量替换）。 - 控制台输出通常包含代码位置信息（文件名和行号），方便调试。 ### 相关问题 1. 如何在JavaScript中改变console.log输出的颜色（Node.js和浏览器）？ 2. console.log、console.info、console.debug有什么区别？ 3. 如何将console.log输出重定向到文件（Node.js环境）？ 4. 如何避免在生产环境中显示console.log输出？ 5. 在浏览器控制台中，如何过滤不同类型的日志（如log、error、warn）？ 以上问题可以帮助用户深入理解console.log的使用和调试技巧。 </think>### JavaScript中console.log输出位置详解 在JavaScript中，`console.log()`函数的输出位置取决于代码执行环境： #### 1. **浏览器环境** - **输出位置**：浏览器开发者工具的控制台（Console） - **访问方式**： - Windows/Linux: `Ctrl+Shift+J` 或 `F12` → Console标签页 - Mac: `Cmd+Option+J` - 右键点击网页 → "检查" → Console标签页 - **特征**： - 显示文件名和行号（点击可跳转到源码位置）[^1][^2] - 支持彩色文本格式（如`%c`占位符）[^4] - 实时显示最新DOM状态（打印节点可能显示当前值而非初始值）[^3] - 示例： ```javascript console.log("%c重要提示", "color:red;font-size:20px;", "内容将在控制台显示"); ``` #### 2. **Node.js环境** - **输出位置**：命令行终端（Terminal） - **访问方式**： - 执行脚本时自动显示：`node your-script.js` - **特征**： - 纯文本输出（不支持CSS样式） - 无源码跳转功能 - 输出可重定向到文件：`node script.js > log.txt` #### 3. **特殊场景** - **直接控制台输入**： - 直接在浏览器控制台输入`console.log()`时，不会显示超链接[^1] - **框架环境**（React/Vue等）： - 输出仍显示在浏览器控制台，但文件名可能显示为编译后的bundle文件 - **移动端调试**： - 需通过USB调试或远程调试工具访问控制台 #### 示例代码演示： ```html <script> const obj = { name: "测试对象" }; console.log("常规输出:", obj); const node = document.createElement("div"); console.log("DOM节点输出:", node); // 可能显示最新状态[^3] console.log("%c格式化文本", "background:blue;color:white;padding:4px;", "支持CSS样式"); // [^4] </script> ``` #### 输出位置示意图： ``` [浏览器视图] ├── 网页内容 └── 开发者工具 (F12) └── Console标签页 ← console.log输出位置 ├── 文件名:行号 (可点击) ├── 彩色格式化文本 └── 实时DOM状态 ``` ### 相关问题 1. 如何在浏览器控制台显示源代码行号？ 2. Node.js中如何实现彩色控制台输出？ 3. 为什么打印DOM节点会显示最新状态而非初始值？ 4. 如何将console.log输出重定向到文件？ 5. React/Vue框架中如何定位console.log的实际调用位置？
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一路追求匠人精神

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值