iT邦幫忙

0

[JS]請問這兩種物件的不同之處在哪裡?

如上圖,我兩種都使用typeof查詢,兩個都是物件。
但是我第二個陣列我無法取得length,也無法使用比方說像array[0]這樣的方式console出來,請問問題出在哪?

附上程式碼

    var report_log = []

    fetch(link)
    .then(function(response) {
        return response.json();
    })
    .then(function(myJson) {
        // console.log(myJson);
        for(k=0; k<myJson.length; k++){

            if(myJson[k].project_name == projectname){
                report_log.push(myJson[k])
            }
        }
    });

    console.log(report_log)
Leo iT邦新手 4 級 ‧ 2021-02-21 06:44:14 檢舉
這是因為非同步的關係。

這段程式碼你以為它是由上至下,但其實在執行到 `fetch(link)` 時,就會接著執行 `console.log(report_log)` ,等到 `fetch(link)` 取得結果後,才會再執行 `then` 裡面的程式碼,而印出來的結果看似好像一樣,但其實那是 console.log 小雷的地方,實際在執行時,你在 `console.log(report_log)` 的地方如果要取值一定會報錯,因為那時候它還是 `[]` 。
amisser iT邦新手 5 級 ‧ 2021-02-24 10:34:23 檢舉
原來,感謝幫忙

1 個回答

0
Peter學程式
iT邦新手 1 級 ‧ 2021-02-21 13:04:20
最佳解答

就像 Leo 大說的那樣,因為 fetch 是非同步操作,所以需要稍微修改你的程式碼,確保邏輯正確:

    var report_log = []

    fetch(link)
    .then(function(response) {
        return response.json();
    })
    .then(function(myJson) {
        // console.log(myJson);
        for(k=0; k<myJson.length; k++){

            if(myJson[k].project_name == projectname){
                report_log.push(myJson[k])
            }
        }
    });
    .finally(()=>{
        console.log(report_log)
    })

至於根本原因,是因為 fetch() 在 JS 的 Event loop 中從 Stack 被 Pop 出去以後會交由 WebAPI (瀏覽器)處理,等到處理完畢再將它放到 Queue 中。此時, console.log(report_log) 早就已經被處理完成了,因此,看不到任何東西是很正常的。

延伸閱讀

我要發表回答

立即登入回答