javascript - React/Javascript 乱序代码执行

Question

关于我之前的问题(代码仍然给我带来麻烦):React: Javascript assignment not updating object

代码在这里 https://codesandbox.io/s/github/nieroda/js_err

您可以在第 2 行看到我拥有的对象。虽然打印输出不同(如下所示)，但在 2 和 5 之间没有发生任何突变，这让我相信代码是乱序执行的。

codeBreaker.js:108

    1. console.log("BEFORE")
    2. console.log(gameBoardCopy[currentRow])
    3. console.log("END")

    let copy = this.state.gameBoard[currentRow].slice()

    4. console.log("Copy Start")
    5. console.log(copy)

    6. console.log("Before Assignment")
    copy[4] = { numColorMatch: 2, numExactMatch: 2 }
    7. console.log("After Assignment")

    8. console.log(copy)
    9. console.log("copy end")

查看输出

1. 之前

2.

0: "BlueViolet"
1: "BlueViolet"
2: "BlueViolet"
3: "BlueViolet"
4: {numColorMatch: 0, numExactMatch: 0}

1. 结束
2. 复制开始

5.

    0: "BlueViolet"
    1: "BlueViolet"
    2: "BlueViolet"
    3: "BlueViolet"
    4: {numColorMatch: 2, numExactMatch: 2}

1. 作业前
2. 作业后

3.  0: "BlueViolet"
    1: "BlueViolet"
    2: "BlueViolet"
    3: "BlueViolet"
    4: {numColorMatch: 2, numExactMatch: 2} 
   

4. 复制结束

我无法弄清楚是什么原因造成的，感谢提示。谢谢

Answer 1

console.log 实际上是一种异步方法，这很可能是您看到执行“出现”无序的原因。每当您 console.log 对象时，请确保 console.log(JSON.stringify(JSON.parse(value)));。

查看执行顺序及其值的更好方法是添加 debugger 语句。尝试在第 5 步的正上方添加 debugger; 并遍历代码以查看实际值是什么。我想这些值会像您期望的那样。如果没有，使用调试器逐步完成整个过程会告诉您原因。