どんな時に使うか
この構文は配列の中身をすべて表示するときに使います。
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を使えば問題ないです。
最近のコメント