[javascript]深拷贝及console.log不能得到预期结果问题

前端在拿到的数据通常都是json对象，通常情况通过结构可以比较容易的达到深拷贝

var newobj = {...obj}

但是当获取的数据又嵌套对象的时候，这个方法就不行了，例:

var obj = {
      name: 'mingzi',
      age: 18,
      others: {
        score: 13,
        dogs: 'che'
      }
    }
var newobj = {...obj}
console.log('newobj',newobj)
newobj.others.score = 14
console.log('changeNewobj',newobj)
console.log('obj',obj)

这个时候obj最后打印出来的值score也变成了 14，在有嵌套的情况下，我通常使用的一种比较简便的方法是通过将json对象转为字符串再转回，这样也可以达到深拷贝的目的

var newobj = JSON.parse(JSON.stringify(obj))

不过需要注意的是对象中不能有函数，因为函数在转为字符串时不能被解析，若是有函数的情况下，建议还是采用递归的方式


在上述代码中有一段

图片：FG_`$XRQIDEHUBU7QH0S3AE.png

按照正常的逻辑，此处打印出来的score的值应当为 13，但是实际上此处打印出来的为 14
下面进行测试

var obj = {
  name: 'mingzi',
  age: 18,
  others: {
    score: 13,
    dogs: 'che',
  }
}
var newobj = {...obj}
console.log('newobj',newobj)
var a = newobj.others.score
console.log('a',a)
newobj.others.score = 14
console.log('changeNewobj',newobj)
console.log('obj',obj)

打印结果为

图片：0}BGH(~G`U1059FKN_R[3(D.png

通过查询得知console.log并不是JS正式的一部分，而是由宿主环境添加到JS中的。因此不同的浏览器和JS环境可以按照自己的意愿来实现.在某些条件下，某些浏览器的console.log(..) 并不会把传入的内容立即输出。出现这种情况的主要原因是，在许多程序（不只是JavaScript）中，I/O 是非常低速的阻塞部分。所以，（从页面/UI 的角度来说）浏览器在后台异步处理控制台I/O 能够提高性能，这时用户甚至可能根本意识不到其发生。
以上内容引自：《你不知道的javascript中卷》第二部分异步和性能 1.1 异步控制台部分


如果遇到这种少见的情况，最好的选择是在JavaScript 调试器中使用断点，而不要依赖控制台输出。次优的方案是把对象序列化到一个字符串中，以强制执行一次“快照”，比如通过JSON.stringify()。

666,超级好文