為什么我的變量不起作用，但定義起作用了？

Question

我遇到了這個我無法理解的問題。 我正在做一個使用 DOM 操作的練習，以便在 javascript 中創建一個網格。 我定義了一個變量，然后將該變量包含在一個循環中。 它只創建了一個 div，但它像我問的那樣打印了我的 console.log 16 次。 所以我直接在循環內部定義了變量，並且所有 16 次都有效。 有人可以幫助我理解我似乎不理解的關於范圍的概念嗎？

這有效：

let gridHome = document.getElementById('grid');
let grid = function() {
    for (i = 0; i < 16; i++){
        console.log('added a div');
        let gridBlock = document.createElement('div');
        gridBlock.setAttribute('class', 'block');
        gridHome.appendChild(gridBlock);
        console.log('run it again');
    }
}
grid();

這僅創建一個 div，但運行所有 16 個 console.logs：

let gridHome = document.getElementById('grid');
let grid = function() {
    let gridBlock = document.createElement('div')
    for (i = 0; i < 16; i++){
        console.log('added a div');
        gridBlock;
        gridBlock.setAttribute('class', 'block');
        gridHome.appendChild(gridBlock);
        console.log('run it again');
    }
}
grid();

非常感謝任何幫助，謝謝！

Answer 1

@hashbrowns94 這不僅僅是范圍的事情，它是 Javascript。 我會繼續為你分解它。 第一個是這樣工作的； 您定義gridHome 。 它將保存在循環內創建的所有 div 片段。 因此，每次循環結束時，您都會將gridHome與在循環內部創建的新 div 堆疊起來，這樣它就會一直持續到循環結束。

在另一個解決方案中，您也定義了GridHome來保存片段。 但是請注意GridBlock是在循環外定義的，它也在循環內定義，但這次設置為未定義（NB 引用錯誤）。 循環內的那個優先......而且它只是未定義的（通常這應該給你一個參考錯誤）。 因此，在結束時，只有一個DIV附加到這是一個限定OUTSIDE循環中的GridHome。

只是提到使用const而不是let ，如下所示。

 const gridHome = document.getElementById('grid'); let grid = function() { for (i = 0; i < 16; i++){ console.log('added a div'); const gridBlock = document.createElement('div'); gridBlock.setAttribute('class', 'block'); gridHome.appendChild(gridBlock); console.log('run it again'); } } grid();

 .block { height: 10px; width: 100px; background: blue; margin: 5px; }

 <div id="grid"> </div>

第二部分嘗試玩這個以了解真正發生的事情..

 let gridHome = document.getElementById('grid'); let grid = function() { let gridBlock = document.createElement('div') for (i = 0; i < 16; i++){ console.log('added a div'); //gridBlock; gridBlock.setAttribute('class', 'block'); gridHome.appendChild(gridBlock); console.log('run it again'); } } grid();

 .block { height: 10px; width: 100px; background: blue; margin: 5px; }

 <div id="grid"> </div>

問候。

Answer 2

let gridHome = document.getElementById('grid');
let grid = function() {
    //let gridBlock = document.createElement('div')
    for (i = 0; i < 16; i++){
        let gridBlock = document.createElement('div') // Use this line here 
        console.log('added a div');
        gridBlock.setAttribute('class', 'block');
        gridHome.appendChild(gridBlock);
        console.log('run it again');
    }
}
grid();