console.log(text)打印不出来的值，用console.log(text.length)却打印出来长度为1？

最新推荐文章于 2024-11-06 10:51:31 发布
原创 最新推荐文章于 2024-11-06 10:51:31 发布 · 4.6k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#jquery #console.log

本文深入探讨了一个常见的JavaScript编程陷阱，即使用console.log显示的字符串长度与实际length属性值不符的问题。通过逐步排查，揭示了innerText属性在处理空内容时自动添加制表符的特性，并提供了相应的解决方案。

一、背景

      好久没写博客了，最近时间实在是紧的不行，忙中偷闲记录一个小问题先。大概描述就是像题目中说的那样，用console.log打印结果和实际的length不同，以为是遇到鬼了，实际呢，我还是太年轻。
如图：
在这里插入图片描述

二、找问题过程

1、 使用typeof看看 发现类型都是string的

2、 用console.log(JSON.stringify(text)); 发现加了个\t制表符，我们知道，console.log(JSON.stringify(text))有个参数space ，指定缩进用的空白字符串，用于美化输出（pretty-print）；如果参数是个数字，它代表有多少的空格；上限为10。该值若小于1，则意味着没有空格；如果该参数为字符串(字符串的前十个字母)，该字符串将被作为空格；如果该参数没有提供（或者为null）将没有空格。 （https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify）
在这里插入图片描述

3、 打印 console.log(text === "" ); 发现都是false，也就是说并不是空字符串

4、 打印 console.log(text === "\t" ); 发现打印的结果是true，也就是说此时的text是一个空格

5、 发现空格之后，打印console.log(trim(sourceText).length); 去掉空格，打印出的结果正常了，长度为0的空字符串

问题所在：
代码中有一句， var text = b.innerText; (b是td元素节点，这部分是获取td里面的内容)

      由于其中一个td里面是一个img标签，所以用innertext()获取到的是不含html的内容。用<span></span>测试一下，
发现获取到的还是一个空格，那么可以大致总结下，用innertext()获取td标签的值的话，无论是否获取到结果，后面
都会自动加个空格（\t），就是不清楚这个空格到底是innertext()获取不到值自己解析的，还是td自带的有一个空格？

6、 如果要对innertext()赋值之后的变量进行测试的话，那尽量去掉它的空格，或者把(\t)考虑进去。
JS去除空格参考： https://www.cnblogs.com/bafeiyu/archive/2012/12/13/2816546.html

总结：
      这次问题的出现，整体来说还是对于使用变量不够严谨引起的。在使用变量的时候，如果是int类型，建议类似于php的intval()一样，格式化一下。如果是string类型的话，最起码也要去除下空格。把这些当做习惯，那在开发中肯定会省下很多不必要的小bug。

end

前端埋坑之js console.log字符换行后 html没换行问题处理
代码青春
07-18 167
前端埋坑之js console.log字符换行后 html没换行问题处理
【高频考点精讲】前端日志收集方案：从console.log到专业的日志系统
全栈老李的博客
05-03 939
🧑‍🏫：全栈老李📅：2025 年 5 月🧑‍💻：前端初学者、进阶开发者🚀：本文由全栈老李原创，转载请注明出处。今天咱们聊聊前端日志收集这个事儿。作为前端工程师，你可能每天都在用console.log调试代码，但生产环境可不能这么玩。全栈老李带你从基础到进阶，看看前端日志收集的正确打开方式。
Javascript如何修改数组长度？
CZ-001的博客
07-21 5724
修改数组长度 使用“数组名.length”可以获取或修改数组的长度。数组长度的计算方式为数组中元素的最大索引值加1，示例代码如下。 var arr = ['a', 'b', 'c']; console.log(arr.length); //输出结果:3 在上述代码中，数组中最后一个元素是c，该元素的索引为2，因此数组长度为3。使用arr.length不仅可以获取数组长度，还可以修改数组长度，示例代码如下。 var arr1 = [1, 2]; arr1.length = 4; //大于原有长度
回顾JavaScript基础——数组
qq_43632167的博客
10-03 483
1：创建数组 var arr1 = [1,2,3]; console.log(arr1);//输出结果：[1,2,3] var arr2 = new Array(4,5,6); console.log(arr2);//输出结果：[4,5,6] var arr3 = Array(7,8,9); console.log(arr3);//输出结果：[7,8,9] var arr4 = Array.of(10,11,12); console.log(arr4);//输出结果：[10,11,12] //创建数
生产环境日志打印console.log内存溢出解决方法
qq_26069551的博客
11-16 2225
生产环境内存泄漏要注意的问题
打印字符串长度
qq_63273144的博客
12-03 579
代码： #include <stdio.h> #include<stdlib.h> #include<string.h> int main() { int x,i; char a[100]; gets(a); x=strlen(a); printf("%d",x); return 0; }
Console
Struggleing......
03-27 557
一、显示信息的命令 常用console命令 console.log('hello'); console.info('信息'); console.error('错误'); console.warn('警告'); 最常用的就是console.log了。 二：占位符 c
console.log打印数组在控制台中显示的长度正常，实际展开内容变化
jyl919221lc的博客
11-06 289
控制台的延迟渲染：浏览器控制台在显示数组时，可能会使用一种延迟渲染的机制。当你点击展开数组时，控制台会重新计算数组的内容，并显示最新的状态。console.log打印数组在控制台中显示的长度正常，实际展开内容变化。这里不要理解为console.log。
同步还是异步？console.log的怪异现象解析
小敏哥的专栏
01-18 909
在开始正式装逼之前，我们先来看几句简单的代码，并试图预测它的输出结果 var a=[{index:1},{index:1}]; console.log('==============修改前==========='); console.log(a); for(var i=0;i<a.length;i++){ a[i].index=2; ...
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返回正确格式的数据:
判断数组长度
weixin_58414196的博客
04-07 697
.length判断数组长度 var str = 'my name is cuncunzi' console.log(str.length);
Eclipse Console 的输出长度限制！
YtdxYHZ的专栏
02-08 1万+
今天写了一个程序为了验证是否成功运行将多有结果都打印出来。但是每次都少开始的部分，在我进行Debug单步执行的时候，发现能正常输出。 最后我发现原来eclipse对 console的输出是有设定的，超过多少会自动被删掉。 解决方法分：Preference－－》run／debug－－》console（uncheck limit output）
JS数组的一些方法
Mrdwc的博客
09-22 463
简单介绍JS数组的一些方法。
数组的基本方法及数组遍历
weixin_64067454的博客
12-26 520
数组的基本方法及数组遍历
JavaScript基本数据类型(笔记)
qq_41421033的博客
04-03 1070
检测数据类型 使用typeof 运算符可以检测数据类型, 可以直接写在浏览器控制台进行检测, 也可以通过console.log输出到浏览器控制台 1. Number数据类型 科学计数法: <script> console.log(3e8); // e表示有多少0(零); console.log(3e-5); console.log(0.3e5); </script> 控制台输出结果是 300000000 0.00003 300
Js中判断变量存不存在的问题
kang1011的博客
08-23 1448
Js中判断变量存不存在的问题 现象 项目中js报错substr方法不存在，str.substr(list.length-1,list.length); 原因 ajax请求成功后，返回的值没有给str复制成功，导致str为undefined，所以导致js报错 解决： 1：后台附默认值， 2：js增加判断。 参考： 1：判断变量abc是不是存在， 2：声明了变量没有赋值， if(typeof abc === 'undefined'){ console.log("不存abc 在")；//打印abc
Javascript学习笔记部分总结
richhappenman的博客
07-30 231
javascript学习笔记部分总结 1.js是一种脚本语言，有逐行解释执行的特点，js分为三个部分 ECMAScript（Javascript语法）、Dom（页面文档对象模型）、Bom（浏览器对象模型）。 2.js有三种写法 行内式的js，直接写到元素的内部，写入标签中以on 开头<input type="button" value="唐伯虎" onclick="alert('秋香姐！')" 内嵌式的js，直接写到<head>标签中的<script>标签中，和css类
项目常见错误及解决方法-console.log打印数组，数组有元素但长度为0
Alfred的博客
10-14 1万+
在项目中，使用restangular，在成功回调函数中，给数组复制，同时，返回给一个数组变量，在函数后面，打印出现： 数组为空，但是点开又有数据，最终找到原因： 因为开始空数组没赋值，赋值之后，因为是地址引用，那个数组已经被修改了。显示零是原来的长度。但包含修改后的结果。换句话说，就是由于restangular异步请求数据，在执行restangular时（由于异步，此时，开始回调函数还
console.log详解
热门推荐
qq_29007709的博客
01-10 3万+
console.log方法用于在控制台输出信息。它可以接受一个或多个参数，将它们连接起来输出。 console.log('Hello World') // Hello World console.log('a', 'b', 'c') // a b c console.log方法会自动在每次输出的结尾，添加换行符。 console.log(1); console.log(2); conso...
console.log(dictList.value)打印有值，console.log(dictList.value.aigc_file_type)打印为空数组
最新发布
11-30
你遇到的是一个 **典型的 Vue 响应式系统 + 异步加载 + 控制台延迟求值** 导致的“看似矛盾”的现象。 --- ## ✅ 问题描述 ```js console.log(dictList.value) // 打开后看到有数据，包含 aigc_file_type: Array(4) console.log(dictList.value.aigc_file_type) // 却打印出 [] （空数组） ``` 看起来矛盾：**同一个对象，展开看有数据，直接访问却没有？** 这其实是 JavaScript 控制台的“**惰性求值（lazy evaluation）”机制**在作祟。 --- ## 🔍 根本原因分析 ### 🕒 场景还原： 1. `useDict(&#39;aigc_file_type&#39;)` 是异步请求字典数据。 2. 你在 `setup` 或 `onMounted` 中写了两个 `console.log`： ```ts console.log(dictList.value) console.log(dictList.value.aigc_file_type) ``` 3. 这两行代码执行时，**字典数据尚未返回** → 此刻 `dictList.value.aigc_file_type` 确实是 `[]` 4. 但几毫秒后，API 返回了，Vue 更新了 `dictList` 5. 当你打开浏览器控制台查看第一个 `console.log(dictList.value)` 时，它显示的是 **当前最新值**（已更新），而不是打印那一刻的快照！ > 💥 关键点：`console.log(obj)` 输出的是一个 **实时引用（live reference）** > > 而 `console.log(obj.prop)` 打印的是那一刻的 **静态值快照** --- ## ✅ 示例说明 ```ts let obj = { list: [] } console.log(obj) // 🟡 显示 { list: [...] } console.log(obj.list) // 🔴 显示 [] // 模拟异步更新 setTimeout(() => { obj.list.push(1, 2, 3) }, 100) ``` - 你在 0ms 打印 `obj` 和 `obj.list` - 在 200ms 你打开控制台 - 结果： - `obj` 展开后看到 `list: [1,2,3]` → 因为它是 live object - `obj.list` 显示 `[]` → 因为它是那一刻的值（快照） 👉 它们不一致是正常的！ --- ## ✅ 验证方法：强制深拷贝输出真实快照 ### 方法 1：使用 `JSON.parse(JSON.stringify(...))` ```ts console.log(&#39;dictList.value 快照:&#39;, JSON.parse(JSON.stringify(dictList.value))) console.log(&#39;aigc_file_type 快照:&#39;, JSON.parse(JSON.stringify(dictList.value.aigc_file_type))) ``` 结果会一致：都显示 `[]`（如果调用时还未加载完成） --- ### 方法 2：加 `setTimeout` 等待加载完成 ```ts setTimeout(() => { console.log(&#39;延迟查看 dictList.value:&#39;, dictList.value) console.log(&#39;延迟查看 aigc_file_type:&#39;, dictList.value.aigc_file_type) }, 1000) ``` 你会发现两者都有数据了。 --- ## ✅ 如何正确监听数据是否加载完成？ ### 使用 `watch` 监听变化 ```ts import { watch } from &#39;vue&#39; const { dictList } = useDict(&#39;aigc_file_type&#39;) watch( () => dictList.value.aigc_file_type, (newVal, oldVal) => { console.log(&#39;aigc_file_type 已更新:&#39;, newVal) // 此处可以触发其他逻辑 }, { immediate: true } ) ``` 或者监听长度： ```ts watch( () => dictList.value.aigc_file_type?.length, (len) => { if (len > 0) { console.log(&#39;✅ 字典数据已加载完成，共&#39;, len, &#39;项&#39;) } } ) ``` --- ## ✅ 解决你的 `<el-option>` 不显示问题 你现在写的是： ```ts const aigcFilesType = dictList.value[&#39;aigc_file_type&#39;] ``` ⚠️ 错！这是在 setup 阶段执行的一次性赋值，当时还是空数组 → 后面不会更新！ ### ✅ 正确做法：用 `computed` ```ts import { computed } from &#39;vue&#39; const aigcFilesType = computed(() => { return dictList.value[&#39;aigc_file_type&#39;] || [] }) ``` 这样模板中使用 `v-for="dict in aigcFilesType"` 才能动态响应更新。 --- ## ✅ 最终推荐代码 ```vue <script setup lang="ts"> import { computed } from &#39;vue&#39; import { useDict } from &#39;@/utils/dictUtils&#39; // 加载字典（异步） const { dictList } = useDict(&#39;aigc_file_type&#39;) // ✅ 响应式计算属性 const aigcFilesType = computed(() => dictList.value[&#39;aigc_file_type&#39;] || []) // 调试：验证是否正确响应 watch( () => aigcFilesType.value, (val) => console.log(&#39;【实时】aigcFilesType:&#39;, val) ) </script> <template> <el-form-item label="文件类型"> <el-select v-model="query.params.fileType" placeholder="Select ..." clearable style="width: 200px" :disabled="!aigcFilesType.length" > <el-option v-for="dict in aigcFilesType" :key="dict.value" :label="dict.label" :value="dict.value" /> </el-select> </el-form-item> </template> ``` --- ## ✅ 总结对比 | 写法 | 是否响应式 | 是否推荐 | |------|------------|----------| | `const x = dictList.value.key` | ❌ 不响应 | ⛔ 不要这样做 | | `computed(() => dictList.value.key)` | ✅ 响应式 | ✅ 推荐 | | 模板中直接写 `dictList.value.key` | ✅ 自动追踪 | ✅ 可接受 | | `console.log(obj)` vs `console.log(obj.prop)` | 行为不同正常 | 注意调试方式 | --- ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

铁柱同学

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

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

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

打赏作者

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

抵扣说明：

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

余额充值