为什么 chrome 检查器在数组中显示一件事，而在展开时显示另一件事？香草JS

Question

我很难理解为什么在我展开数组或对象时检查器会更改其日志记录：

let newTeamArray = [...teams]; // teams = {randomTeamObject, "Fill"}
let teamList1 = [];
let teamList2 = [];

for(let x = 0; x < newTeamArray.length; x++) {
    if(x < (newTeamArray.length/2)) {
        console.log("Push to 1")

        console.log(newTeamArray[x])
        teamList1.push(newTeamArray[x]);
    } else {
        console.log("Push to 2")

        console.log(newTeamArray[x])
        teamList2.push(newTeamArray[x])
    }
}

console.log(teamList1)
console.log(teamList2)

这给了我：

谁能解释为什么最后两个 console.log() 命令的扩展版本在扩展时会有所不同。在此之后，如果我调用 teamList1[0]，则它未定义，如检查员所示。

编辑：名为“teams”的数组始终是偶数长度数组。如果它是奇数长度，则将“填充”添加到数组中。鉴于此数组只有一个对象，因此添加了填充。这发生在上面的代码之前。我的目标是将偶数数组拆分为两个大小相同的数组，称为 teamList1 和 teamList2

Answer 1

here 和 here 已有类似问题的答案。
本质上，当您扩展对象时，打印到控制台的对象是“惰性”评估的，因此如果在代码中的其他位置对同一对象的引用对对象进行了更改，那么您在扩展对象时在控制台中看到的值将反映这种变化。这是假设您使用的是屏幕截图所示的 Chrome 调试器。

Answer 2

正如 Kel 所回答的，chrome 检查员行动是异步或懒惰的庄园。下面的代码在两个数组之间进行推送/弹出操作。我正在将第二个数组的唯一对象删除为静态变量。然后当我旋转两个数组之间的元素时，teamList2 是空的，并且无法将其任何元素传输到第一个数组。以下是导致问题的代码：

function makeSeasonForComp(teams) {
    let season = [];
    let newTeamArray = [...teams];
    let teamList1 = [];
    let teamList2 = [];
    let statcTeam;

    console.log(teams)

    for(let x = 0; x < newTeamArray.length; x++) {
        if(x < (newTeamArray.length/2)) {
            console.log("Push to 1")

            console.log(newTeamArray[x])
            teamList1.push(newTeamArray[x]);
        } else {
            console.log("Push to 2")

            console.log(newTeamArray[x])
            teamList2.push(newTeamArray[x])
        }
    }

    statcTeam = teamList2.pop();

    for(let i = 0; i < SEASONLENGTH; i++) {
        let games = [];
        if(teamList1.length > 0) {
            for(let j = 0; j < teamList1.length; j++) {
                let game = [];
                if (j === 0) {
                    if(teamList1[0] === "fill") {
                        game.push(teamList1[0])
                    } else {
                        game.push(teamList1[0].uid)
                    }
                    game.push(statcTeam);
                    game.push(uuidv4())
                } else {
                    if(teamList1[j] === "fill") {
                        game.push(teamList1[j])
                    } else {
                        game.push(teamList1[j].uid)
                    }

                    if(teamList2[j - 1] === "fill") {
                        game.push(teamList2[j - 1])
                    } else {
                        game.push(teamList2[j - 1].uid)
                    }
                    game.push(uuidv4())
                }
                games.push(game);
            }
            if(teamList2.length > 0) { // This line fixed my issue
                let endList1 = teamList1.pop();
                let startList2 = teamList2.shift();

                teamList2.push(endList1);
                teamList1.unshift(startList2);
            }
        }

        season.push(games);
    }

我弹出了我在 teamList2 中唯一的元素，使得正在进行的弹出操作在该数组上返回未定义。

在旋转数组之前检查我的 teamList2 中是否有元素解决了我的问题。

谢谢！