javascriptのfor…ofで配列の中身をすべて表示する

  • このエントリーをはてなブックマークに追加

どんな時に使うか

この構文は配列の中身をすべて表示するときに使います。
ES6から使用が可能となったので比較的新しい構文となります。そのためかわかりませんがIE11では使用することができません。
しばらくは使いどころを選ぶかもしれませんね。
特徴はというと、whileやforを使って繰り返しの処理をするときによく出てくるvar i = 0というような変数を定義する必要がありません。
そのためwhileやforを使うよりも簡潔に書くことができます。

for…of

for (let 変数 of 対象の配列 ) {
 //処理内容
}

配列の中身をすべて表示する

var items = ['a','b','c'];
for (let item of items) {
  $('.list01').append('<li>'+item+'</li>');
};
<ul class="list01">
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>

    for~in~文との違いは???

    for…of文に似ているfor…inという構文と間違いやすいので注意が必要です。

    for…in

    for (let 変数 in オブジェクト ) {
     //処理内容
    }

    オブジェクトの内容を取得する

    var obj = {
      a:'エー',
      b:'ビー',
      c:'シー',
    }
    for (let name in obj) {
      $('.list01').append('<li>'+name+':'+obj[name]+'</li>');
    } 
    <ul class="list01"> 
      <li>a:エー</li> 
      <li>b:ビー</li> 
      <li>c:シー</li> 
    </ul> 
    

    オブジェクトとはPHPなどでいういわゆる連想配列のようなものです。 for…inはそのオブジェクトで使うことが多く、普通の配列の場合はfor…ofを使用することが多いです。
    for…ofであればオブジェクトでも配列でもどちらも対応可能なので、基本的にはfor…ofを使えば問題ないです。

    • このエントリーをはてなブックマークに追加

    SNSでもご購読できます。

    コメントを残す

    *

    CAPTCHA