Console.log方法常见问题

打印信息为[object,object]的问题

1. 使用了字符串拼接+

   • 错误信息：前端打印数据 console.log（this.res+“res”） 浏览器输出[object，object] 而非对象本身
   • 错误原因：console.log中加字符串拼接是将对象尝试转化成字符串类型显示，尝试调用对象的toString方法，普通的对象没有这种处理
   • 解决方式：可以使用console.log（“res”，this.res）而非字符串拼接的方式。将输出两个值。

2. 使用了sessionStorage等进行存储。如果将对象不经处理的存入此类只能存储字符串的结构，则打印时就会出现[object，object]。

   • 错误信息：打印存取在sessionStorage中的状态信息时，输出[object，object]

   • 错误原因：sessionStorage中只能存取字符串，在存储时不能直接存储，应先转化再存/取。

     window.sessionStorage.setItem('store',this.$store.state)
     let store = window.sessionStorage.getItem('store')
     console.log(store)//[object，object]
     

   • 解决方式：存时将其JSON.stringify序列化转化成字符串，读时JSON.parse转化成对象形式。

     window.sessionStorage.setItem('store',JSON.stringify(this.$store.state))
      let store = JSON.parse(window.sessionStorage.getItem('store')）
     

打印在数据变化前的信息显示为变化后的值问题

• 错误信息：Console.log（）输出数组或对象时，数据变化前后写的Console.log打印出的都是数据变化后的数据。

• 错误原因：通俗来说就是对于对象有多层展开的，他只会默认显示第一层，当你去展开对象数据时，他会读取对象当前的属性，当前的属性此时早已经改变完了。：对于非基本类型数据，Console.log不再是直接输出，而是打印的引用地址的快照。

  示例：

  • 对于一层对象或者基本数据类型，打印无误。

    

  • 对于多层对象或数组，手动展开第二层时，其内部属性早已修改完毕，故只能看到新值。

• 解决方式：

  • 将对象序列化再解析JSON.parse(JSON.stringify(xxx))。其中JSON.stringify序列化的作用是将对象存储为字符串的形式保存在磁盘上，此时作为字符串类型，打印无误。
  • 也可以用定时setTimeout去改变数据，如设5s后再改变数据。就会看到console.log的值自然由旧->5s后->新。

---

2024.6.22