一、概述
很多前端开发喜欢用console.log来调试代码，经验丰富的前端开发应该碰到过这个问题，console.log打印出来的值并不是实际代码中运行的值，今天我们来详细看看是什么问题。
二、“BUG”重现
首先我们准备这样的一个测试代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<script>
let tempArr = [{ n: 1 }, { n: 1 }]
console.log(tempArr)
tempArr[0].n++
console.log(tempArr)
</script>
<body>
</body>
</html>
运行代码后，浏览器调试界面应该输出的是[{ n: 1 }, { n: 1 }] 和 [{ n: 2 }, { n: 1 }]， 但是实际运行结果
三、原因
其实这个是浏览器的一个特性，针对复杂的对象，浏览器会将打印输出的结果进行折叠，像这样子
在我们第一次查看详情时(点击左侧小黑三角形)，浏览器会去获取对象当前实时的一个值，所以会显示的是代码 tempArr[0].n++运行之后的对象了, 不单单是这个小三角形，就连对象内部的小三角形也是一样的原理，第一次查询详情时，会实时获取当前的值，可以看看下方的例子。
四、结尾
大家知道原理以后就可以知道为什么会出现这个问题，当然最后还是推荐断点调试来的更方便、稳妥。
每天学习一个小知识，敬请关注公众号：小明科技说
