`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 来更清晰地查看对象的内容。
相关推荐
摇滚侠3 分钟前
Spring Boot 3零基础教程,yml语法细节,笔记16
java·spring boot·笔记
fsnine8 分钟前
Python Web框架对比与模型部署
开发语言·前端·python
能不能别报错14 分钟前
K8s学习笔记(二十) 亲和性、污点、容忍、驱逐
笔记·学习·kubernetes
广州华水科技25 分钟前
单北斗GNSS形变监测系统在桥梁安全中的应用与技术解析
前端
海梨花26 分钟前
【八股笔记】SSM
java·开发语言·笔记·后端·面试·框架
打小就很皮...36 分钟前
ShowCountCard 功能迭代:新增周月对比属性,完善数据可视化场景
前端·react.js·信息可视化
钊气蓬勃.44 分钟前
深度学习笔记:入门
人工智能·笔记·深度学习
IT_陈寒1 小时前
Redis性能翻倍的7个冷门技巧:从P5到P8都在偷偷用的优化策略!
前端·人工智能·后端
Moonbit1 小时前
MoonBit Meetup 丨 手把手带你走进 AI 编程新世代
前端·后端·程序员
携欢1 小时前
PortSwigger靶场之 CSRF where token is not tied to user session通关秘籍
前端·csrf