予期せぬ返りのループのために

Question

私は単純なfor ... forループをやっています。私はconsole.logにループの出力と、それを画面に出力するときに異なる結果が得られる理由を理解していません。

const list = document.getElementById('list'); 
const results = [1, 2, 5]; 
let listItems; 

for (let r of results) { 
    listItems = listItems + `<li>${r}</li>`; 
    console.log(r); 
} 

list.innerHTML = listItems; 

//// console.log returns 1, 2, 5 

//// in the DOM, i get undefined, 1, 2, 5 

私のcodepenで試すことができます。

ありがとうございました。

Answer 1

listItemsが最初にundefinedにあるためです。

let listItems; 
 
console.log(listItems); // undefined

空の文字列に初期化し、又は接合アレイを使用する：

let listItems = ''; 
 
for (let r of [1, 2, 5]) 
 
    listItems += `<li>${r}</li>`; 
 
console.log(listItems); 
 

 
listItems = []; 
 
for (let r of [1, 2, 5]) 
 
    listItems.push(`<li>${r}</li>`); 
 
console.log(listItems.join(''));

Answer 2

ため、ループの最初の反復において、listItemsがundefinedあります。 listItemsがundefinedあるためです

let listItems = ''; 

Updated CodePen

Answer 3

、そしてあなたがundefinedある変数に文字列「foo」を追加したときの結果は「undefinedfoo`は次のようになります。それを空の文字列を与えます。

正しいバージョンは以下の通りです：

const list = document.getElementById('list'); 
const results = [1, 2, 5]; 
let listItems = ''; 

for (let r of results) { 
    listItems = listItems + `<li>${r}</li>`; 
    console.log(r); 
} 

list.innerHTML = listItems; 

Answer 4

letItemsが最初に定義されていないので。ループ内に設定した後は、2回目の値だけを持ちます。

これを行います。

let listItems = '';