`console.log` 打印一个对象并且得到 `“object Object“`

文章目录

  • 发现宝藏
  • [1. 使用 console.log 直接打印对象](#1. 使用 console.log 直接打印对象)
  • [2. 使用 JSON.stringify](#2. 使用 JSON.stringify)
  • [3. 检查对象的内容](#3. 检查对象的内容)
  • 示例代码
  • 总结

发现宝藏

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。【宝藏入口】。

当你在 JavaScript 或 TypeScript 中尝试通过 console.log 打印一个对象并且得到 "object Object",这是因为你将对象转换为字符串时,使用了连接运算符(+)。JavaScript 在这种情况下会调用对象的 toString 方法,这通常会返回 [object Object]。如果你想查看对象的详细内容,可以使用以下几种方法:

1. 使用 console.log 直接打印对象

console.log 能够正确显示对象的内容,因此可以直接将对象传递给 console.log 而不是将其转换为字符串:

javascript 复制代码
const handleSave = (e: any) => {
    console.log('item copy:', itemCopy);
    console.log('item:', item);
};

2. 使用 JSON.stringify

如果你想将对象转换为字符串并打印,可以使用 JSON.stringify。这将会把对象转换为 JSON 字符串,便于查看其内容:

javascript 复制代码
const handleSave = (e: any) => {
    console.log('item copy:', JSON.stringify(itemCopy, null, 2));
    console.log('item:', JSON.stringify(item, null, 2));
};
  • nullJSON.stringify 的 replacer 参数,通常可以保持为 null
  • 2 是用于缩进的空格数,使 JSON 字符串更具可读性。

3. 检查对象的内容

确保 itemCopyitem 是对象且定义了 toString 方法。如果你发现它们的内容在打印时没有按照预期显示,请确保它们是有效的对象而不是其他类型。

示例代码

假设 itemitemCopy 是以下结构的对象:

typescript 复制代码
interface QuestionConfiguration {
    id: number;
    name: string;
    defaultFlag?: boolean;
}

const item: QuestionConfiguration = {
    id: 1,
    name: 'Sample Question',
    defaultFlag: true
};

const [itemCopy, setItemCopy] = useState<QuestionConfiguration | undefined>(item);
const [isChecked, setIsChecked] = useState(getDefault);

const handleSave = (e: any) => {
    console.log('item copy:', JSON.stringify(itemCopy, null, 2));
    console.log('item:', JSON.stringify(item, null, 2));
};

handleSave 函数中,itemCopyitem 将会被清晰地打印到控制台中,便于你调试和检查对象的内容。

总结

  • 避免将对象直接与字符串连接 ,因为这会调用 toString 方法,返回 [object Object]
  • 使用 console.log 直接打印对象使用 JSON.stringify 来更清晰地查看对象的内容。
相关推荐
web1478621072314 分钟前
C# .Net Web 路由相关配置
前端·c#·.net
m0_7482478015 分钟前
Flutter Intl包使用指南:实现国际化和本地化
前端·javascript·flutter
飞的肖18 分钟前
前端使用 Element Plus架构vue3.0实现图片拖拉拽,后等比压缩,上传到Spring Boot后端
前端·spring boot·架构
青灯文案126 分钟前
前端 HTTP 请求由 Nginx 反向代理和 API 网关到后端服务的流程
前端·nginx·http
车轮滚滚__26 分钟前
uniapp对接unipush 1.0 ios/android
笔记
m0_7482548830 分钟前
DataX3.0+DataX-Web部署分布式可视化ETL系统
前端·分布式·etl
用户305875848912532 分钟前
Connected-react-router核心思路实现
react.js
ZJ_.42 分钟前
WPSJS:让 WPS 办公与 JavaScript 完美联动
开发语言·前端·javascript·vscode·ecmascript·wps
GIS开发特训营1 小时前
Vue零基础教程|从前端框架到GIS开发系列课程(七)响应式系统介绍
前端·vue.js·前端框架·gis开发·webgis·三维gis
Cachel wood1 小时前
python round四舍五入和decimal库精确四舍五入
java·linux·前端·数据库·vue.js·python·前端框架