ちょっとディープな生物の世界

【JavaScript】配列の各項目を全て読み取るfor…of文を使ってみよう

for…of文とは?

for…of文は配列の項目数文繰り返し処理を行います。

for(let 変数名 of 配列名){
  処理内容
}

実際には次のような使い方をします。

const foods=["オレンジ","パパイヤ","メロン"]
for(let item of foods){
  console.log(item);
}

結果は以下のようになります。

"オレンジ"
"パパイヤ"
"メロン"

それぞれの項目をリスト化してHTMLに出力してみよう

for…of文でfoods配列から要素を取り出して、HTMLのタグに挟んで出力しています。insertAdjacentHTML()はHTMLタグを挿入するメソッドです。beforeendを指定することで、挿入するタグ(つまり</ul>)の前に要素を出力します。

<ul id = foodsList></ul>
const foods=["オレンジ","パパイヤ","メロン"];
for(let item of foods){
  const li =`<li>${item}</li>`;
  document.getElementById(`foodsList`).insertAdjacentHTML('beforeend',li);
}

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です