为何for循环内的console.log会多次输出数组？求技术解释

这本质是代码执行顺序的问题，咱们拆解下两种情况的执行流程：

情况1：console.log在循环外部 #

const items = ["Books", "Pens", "Inks", "Ram of Sheet"];
let copyItem = [];
for(const item of items){
    copyItem.push(item)
}
console.log(copyItem);

这段代码的执行步骤是：

• 初始化空数组copyItem
• 进入for...of循环，逐个把items里的元素push到copyItem里（一共执行4次push）
• 等整个循环完全结束后，才执行一次console.log，所以输出的是所有元素都添加完成后的最终数组。

情况2：console.log在循环内部 #

const items = ["Books", "Pens", "Inks", "Ram of Sheet"];
let copyItem = [];
for(const item of items){
    copyItem.push(item)
    console.log(copyItem);
}

这段代码的执行步骤是：

• 初始化空数组copyItem
• 第一次循环：push"Books"到数组，立刻执行console.log，输出当前数组['Books']
• 第二次循环：push"Pens"到数组，立刻执行console.log，输出当前数组['Books', 'Pens']
• 第三次循环：push"Inks"到数组，立刻执行console.log，输出当前数组['Books', 'Pens', 'Inks']
• 第四次循环：push"Ram of Sheet"到数组，立刻执行console.log，输出当前数组['Books', 'Pens', 'Inks', 'Ram of Sheet']

简单说就是：循环内部的console.log会跟着循环的每一次迭代执行，每次打印的都是数组当前时刻的状态；而外部的只会在循环全部跑完后执行一次，打印的是最终状态。

如果你用forEach做同样的事，把console.log写在forEach的回调函数里，结果和循环内部的情况完全一样——因为forEach本身就是逐个遍历元素，每次遍历都会执行回调里的代码：

const items = ["Books", "Pens", "Inks", "Ram of Sheet"];
let copyItem = [];
items.forEach(item => {
    copyItem.push(item);
    console.log(copyItem); // 同样会输出四次逐步增长的数组
});

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