Angular控制台打印数组含对象但索引元素返回undefined问题排查

这是我在本站提出的第一个问题，表述尽量保证清晰准确。
我在对exhibitors数组执行排序操作的排障过程中，发现控制台输出了极易误导判断的日志：直接调用console.log打印整个数组时，控制台显示该数组是填充了对象的完整数组，但打印同一数组任意索引位置的元素时，返回值均为undefined。
我清楚当前代码存在嵌套订阅的问题，对应的API设计缺陷后续会修复。目前已经定位到部分问题原因：该现象由异步执行时序导致——我在订阅流程未完成时就提前对数组执行了排序操作，只要将排序逻辑移动到参展商列表构建完成后的订阅回调内部，问题即可解决。
但我仍存在一个疑问：为什么控制台会出现这种误导性日志？如果订阅尚未执行完成，数组相关的打印结果难道不应该全部为undefined吗？该现象大幅提升了调试难度。

问题复现代码（Angular组件对应方法） #

listExhibitors() {
    this.listEx$ = this.exhibitorService.list().subscribe((res) => {
        this.allExhibitors = res;
        this.exhibitors = [];
        this.exhibitorsFiltered = []
        this.userId = this.auth.getUserId();
        for (let exhib of this.allExhibitors) {
            this.exhibitorService.get(exhib.idx).subscribe((res2: any) => {
                let members = res2.members
                members.forEach(member => {
                    if (member.userIdx === this.userId) {
                        console.log('Pushin user..')
                        this.exhibitors.push(exhib)
                    }
                })
            });
        }
        console.log(this.exhibitors) // 控制台打印显示为对象数组
        console.log(typeof (this.exhibitors)) // 输出Object
        console.log(this.exhibitors[0]) // 输出undefined

        this.exhibitorsFiltered = this.exhibitors.sort(function (a, b) {
            return ((a.name < b.name) ? -1 : ((a.name > b.name) ? 1 : 0));
        })

        console.log(this.exhibitorsFiltered) // 控制台打印显示为相同的对象数组
        console.log(this.exhibitorsFiltered[0]) // 输出undefined
    })
}

控制台日志参考 #

• 前五条日志按上述代码片段的执行顺序输出，最后一条为console.log(typeof (this.exhibitorService.list()))的打印结果
  
• 更详细的日志截图参考
  

修正后可正常运行的代码 #

listExhibitors() {
    this.listEx$ = this.exhibitorService.list().subscribe((res) => {
        this.allExhibitors = res;
        console.log(res)
        this.exhibitors = [];
        this.exhibitorsFiltered = []
        this.userId = this.auth.getUserId();
        for (let exhib of this.allExhibitors) {
            this.exhibitorService.get(exhib.idx).subscribe((res2: any) => {
                let members = res2.members
                members.forEach(member => {
                    if (member.userIdx === this.userId) {
                        this.exhibitors.push(exhib)
                    }
                })
                this.exhibitorsFiltered = this.exhibitors.sort((a, b) => {
                    // 处理空值场景
                    if (!a && !b) { return 0; }
                    if (!a) { return 1; }
                    if (!b) { return -1; }
                    // 非空值执行实际比较逻辑
                    return a.name.localeCompare(b.name, navigator.languages[0]
                        || navigator.language, { numeric: true, ignorePunctuation: true });
                });
            });
        }
    });
}

问题根因说明 #

出现该误导性日志的核心原因是浏览器控制台对引用类型值的懒求值机制：

当调用console.log打印数组、对象这类引用类型值时，控制台不会在执行log语句的瞬间序列化保存值的当前状态，只会存储一个指向该值的内存引用。只有当用户在控制台手动展开这个打印条目查看详情时，控制台才会去读取该引用指向的内存地址里的最新内容，渲染成用户看到的结构。

对应到本次问题的代码执行时序：

1. 外层exhibitorService.list()的订阅回调触发，初始化this.exhibitors为空数组
2. 循环中发起的所有exhibitorService.get(exhib.idx)请求都是异步操作，对应的订阅回调会被放入任务队列排队，不会在当前同步流程中执行
3. 同步代码继续向下执行，此时执行console.log(this.exhibitors)，数组实际为空，但控制台仅保存数组引用，没有记录当下的空状态；紧接着执行console.log(this.exhibitors[0])，这是直接读取索引对应的原始值，会立刻返回执行当下的结果undefined
4. 当前所有同步代码执行完毕后，事件循环开始处理任务队列中的异步请求回调，陆续向this.exhibitors中push匹配到的参展商对象，数组最终被填充为有内容的状态
5. 当用户事后在控制台点开之前打印的数组条目时，控制台读取到的是已经完成异步填充的数组内容，因此显示为装满对象的数组，和之前同步打印索引得到的undefined结果形成矛盾。

如果需要在打印时保留值在执行log瞬间的快照，可以在打印时对值做一次深拷贝，切断和原引用的关联，例如：

// 现代浏览器支持的深拷贝API
console.log(structuredClone(this.exhibitors))
// 兼容场景的简单深拷贝（注意不能处理循环引用、函数等特殊值）
console.log(JSON.parse(JSON.stringify(this.exhibitors)))

这种方式打印出来的内容就是执行log语句那一刻的真实状态，不会被后续的异步修改干扰。

内容的提问来源于stack exchange，提问作者Morrison7252