js解构赋值后，打印异常

Question

由于整不出最小demo， 而且不是必现的，所以截图展示一下。
断点中显示 item = undefined,但是能够被console.log.
断点继续执行后，还是会按照打印的正确值的值来进行，但是在断点界面看到全程都是undefined。

function getItemAndPos() {
        const { currentTarget, clientX, clientY } = e;
        const { left, top } = currentTarget.getBoundingClientRect();
        const x = clientX - left;
        const y = clientY - top;
        console.log('xy', x, y);
        const item = drawItemsRef.current.find(
          ({ beginX, beginY, endX, endY }) => beginX <= x && endX >= x && beginY <= y && endY >= y 
        );
        return { x, y, item };
  }

有没有遇到类似问题，或者有什么其他思路？

Answer 1

遇到过这种情况，打印对象的时候建议使用JSON.stringify(obj)

有些情况下console.log(...)并不是即时的，这跟浏览器的I/O处理有关

具体的可以参考《你不知道的javascript中卷》第二部分异步和性能1.1节异步控制台部分：

并没有什么规范或一组需求指定console.* 方法族如何工作——它们并不是JavaScript 正式的一部分，而是由宿主环境（请参考本书的“类型和语法”部分）添加到JavaScript 中的。因此，不同的浏览器和JavaScript 环境可以按照自己的意愿来实现，有时候这会引起混淆。
尤其要提出的是，在某些条件下，某些浏览器的console.log(..) 并不会把传入的内容立即输出。出现这种情况的主要原因是，在许多程序（不只是JavaScript）中，I/O 是非常低速的阻塞部分。所以，（从页面/UI 的角度来说）浏览器在后台异步处理控制台I/O 能够提高性能，这时用户甚至可能根本意识不到其发生。

Answer 2

我之前遇到过类似的
我的问题原因定位是:引用类型的 xxx 对象 被意外改变了
但是找这个意外 找了很长的时间
最后发现是 自定义的 mouseleave 事件没有被正确清除,导致 回调函数里面存在闭包变量,
导致 一个事件 就触发了 多个变量的更新.
楼主的代码中 看到了 mousedown 可以从这个方向考虑下 是否是这个问题?仅供参考

Answer 3

这个应该时跟js的事件循环有关，console执行的比较晚