为何addEventListener内可获取array内容，外部console.log却不行？

核心原因是**fetch是异步操作**，JavaScript的单线程特性决定了代码的执行顺序，导致两个console.log的执行时机完全不同：

代码执行的完整流程 #

1. 初始化阶段：先获取input元素，声明array并赋值为空数组。
2. 发起异步请求：调用fetch向目标地址发起网络请求，这个操作不会阻塞后续代码执行，而是被放到异步任务队列中等待处理。
3. 执行同步代码：直接运行外部的console.log(array)，此时fetch的请求还没完成，array还是初始的空数组，所以打印出来是空的。
4. 绑定事件监听：完成input的input事件监听绑定，这一步是同步完成的，但回调函数不会立即执行。
5. 处理异步任务：等所有同步代码执行完毕后，JavaScript才会处理异步任务队列中的fetch响应。当请求成功返回后，依次执行两个then回调，把array重新赋值为处理后的用户数据数组。

为什么事件监听内的console.log能拿到内容 #

当用户在输入框触发input事件时，此时fetch的异步请求已经完成，array已经被更新为包含用户数据的数组，所以此时执行回调里的console.log(array)，就能拿到最新的数组内容。

补充：这里不存在作用域问题，array是当前作用域下的let变量，两个console.log都能访问到它，只是执行时机不同——外部的打印在异步赋值前，事件回调的打印在异步赋值后。

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