有人可以解释一下下面 for 循环中 console.log() 的行为吗

Question

我在一项练习中遇到了 forEach() 方法，我决定阅读更多相关内容。在我的研究过程中，我遇到了一个将 for 循环转换为 forEach() 方法的示例。我发现它太神奇了，我决定尝试一下。 我编写了下面的代码，并在循环大括号内调用 console.log() ，而不是在大括号外。最令我惊讶的是，我在控制台中得到了更多我没有预料到的数组

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


//after
    items.forEach((elem)=>{
        copyItem.push(elem)
    })

这是我的惊喜。我试图假设该行为是由循环 items 数组引起的，但我也不确定。有人可以更好地解释这个循环以帮助我理解吗？

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

/* console output

[ 'Books' ]
[ 'Books', 'Pens' ]
[ 'Books', 'Pens', 'Inks' ]
[ 'Books', 'Pens', 'Inks', 'Ram of Sheet' ]

*/

Answer 1

您的代码迭代包含四个项目的数组，每次迭代都调用

console.log

。所以你会得到四次迭代，因此有四行输出。

每行输出包含变量

copyItem

的状态。由于您的代码在每次迭代时都会将一个新元素推入

copyItem

，因此每一行输出都会比之前的项目多显示一项。