直接在控制台写代码与console.log输出的差异及Promise.all结果不同原因

一、控制台直接编写代码 vs console.log输出的区别 #

• 状态追踪差异：控制台直接执行代码时，会自动追踪表达式的最终状态（比如异步对象的完成态）；console.log则是在调用瞬间记录值的快照，后续状态变化不会主动更新（部分浏览器会有延迟更新，但核心是调用时机的问题）。
• 展示形式不同：直接执行代码的结果会以控制台专属的交互格式展示（比如Promise可展开查看详情）；console.log按标准输出规则打印，更偏向于记录调用时刻的原始值。
• 返回值处理：直接执行代码会返回表达式的结果，而console.log本身返回undefined，仅作为输出工具使用。

二、两种Promise.all写法结果不同的原因 #

先看两段代码：

Promise.all([1,2]) // 输出 Promise {<fulfilled>: Array(2)}

let p1 = Promise.all([1,2]);
console.log(p1) // 输出 Promise {<pending>}

核心原因在于控制台的异步追踪机制和JavaScript的执行顺序：

1. 直接在控制台执行Promise.all([1,2])时，控制台会识别到返回的是Promise对象，不会立刻打印它的初始状态，而是等待这个Promise完成状态变更（因为Promise.all接收非Promise值时会立即resolve），最终展示它的fulfilled状态。
2. 而用变量赋值后立刻console.log时，console.log是在当前同步代码执行阶段调用的。虽然Promise.all([1,2])会很快进入resolved状态，但JavaScript的微任务（Promise的resolve回调属于微任务）要等当前同步代码块执行完毕才会触发。所以console.log执行时，Promise还处于初始的pending状态，控制台此时记录的就是这个快照。

如果想要在第二种写法中看到fulfilled状态，只需要等微任务执行完毕后再打印：

let p1 = Promise.all([1,2]);
setTimeout(() => console.log(p1), 0);

此时会输出Promise {<fulfilled>: Array(2)}，因为setTimeout的回调会在微任务之后执行，Promise状态已经完成变更。

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