console.log的那件事

时间:2022-07-24
本文章向大家介绍console.log的那件事，主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

起因

  • 很多朋友在群里问过,为什么打印的对象/数组里面明明有值，但是我后面打印它某个值跟预期不一样？

看代码

<!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 = '前端巅峰';
  • 这样就不会再出现打印歧义的问题

结语

随机文章
本站知识点必读
最近更新