起因
很多朋友在群里问过,为什么打印的对象/数组里面明明有值，但是我后面打印它某个值跟预期不一样？
看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
<script>
const obj = {
}
console.log(obj, 'obj');
console.log(obj.a, 'a')
obj.a = '前端巅峰';
</script>
</html>
这段代码会输出什么？
很奇怪，对吧？
讲解
当你打印时是空数组/空对象，但是点开后，里面却有属性，这属于
console执行的那一刻，数组/对象里面是没有元素的，但是后面却被添加了。（不管后面是同步还是异步添加）如果一开始就在对象/数组中有的元素，那么就会像下面一样
const obj = {
b:2
}
console.log(obj, 'obj');
console.log(obj.a, 'a')
obj.a = '前端巅峰';
输出结果，一开始打印就会在对象中对象对应的数据：
什么时候会出现这种情况
像使用
redux或者使用接口请求回来的数据，异步更新时候，就有可能出现上面这种打印存在不确定的情况
如何避免？
使用
JSON.stringify()打印
const obj = {
}
console.log(JSON.stringify(obj), 'obj')
obj.a = '前端巅峰';
这样就不会再出现打印歧义的问题
最后
这里是
前端巅峰，不定期更新实用小知识。感觉有帮助的话，点个在看/赞支持下，转发更好。想加入前端交流群的，可以关注公众号后，后台回复：
加群
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
