為什麼列印物件,點開檢視某屬性有值,但是直接列印無值

story.Write(z)發表於2024-04-28
物件

1.現象

某些剛學習一段時間前端,或者學習一段時間後的一些人不知道為什麼列印物件,點開檢視某屬性有值,但是直接列印無值.
比較常見的一個開發現象就是發現自己直接列印物件有值,但是進行頁面跳轉或者其他業務請求之類的時候發現引數拿不到

2.原因

直接開啟控制檯的時候裡面沒有值,是正常的因為確實列印的那一刻是沒有b的,瀏覽器的列印不是響應式的列印的哪一刻就是確認了的
image

展開後有是因為列印本質列印的是一個地址,在你沒點開之前是不會獲取物件的最終值的,如果把延時值改為5s先點開物件檢視,此時是無值的
image

3.示例程式碼

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>物件屬性列印</title>
</head>

<body>
  <script>
    const obj = { a: 'a' }

    console.log(obj) // zdz-log
    // 這個和網路請求之後賦值本質是等價的
    setTimeout(() => {
      obj.b = 'b'
    }, 100)
    console.log(obj.b) // zdz-log

  </script>
</body>

</html>

相關文章