console.log的那件事
console.log的那件事
JowayYoung
发布于 2020-09-11 17:07:35
发布于 2020-09-11 17:07:35
起因
- 很多朋友在群里问过,为什么打印的对象/数组里面明明有值，但是我后面打印它某个值跟预期不一样？
看代码
<!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 = '前端巅峰';
- 这样就不会再出现打印歧义的问题
结语
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2020-09-10，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录