https://idea-hack.com/courses/arrange-and-remember-how-to-handle-arrays-in-javascript/lessons/for-of-syntax-that-executes-processing-for-each-element-of-array-with-javascript/
https://idea-hack.com/courses/arrange-and-remember-how-to-handle-arrays-in-javascript/lessons/for-of-syntax-that-executes-processing-for-each-element-of-array-with-javascript/

JavaScriptで配列の各要素に対して処理を実行するfor…of構文の使い方

JavaScriptで配列の各要素に対して処理を実行するにはfor...of文を使うことができます。

forEachメソッドがES2015以降でしか使えないのに対し、for...ofは古いブラウザでも動くので、こちらを使っている人もまだまだ多いです。

次のページで紹介する for文でループを回す方法と違い、この構文はインデックス番号の付与(処理された順番を要素に振る)を行いません。

そのため、途中までの要素に対してだけ適用したい時などは、for文の利用をオススメします。

構文

構文意味
for const [要素名] of [元となる配列] for… of 文で配列の各要素に対して同じ処理を実行する。
for… of構文

サンプルコード

サンプルコードとして、配列のそれぞれに対してfor… of 構文を適用するサンプルスクリプトを紹介します。

Output
Pug
.container.my-5
	div
		table.table
			tbody#targetText
JavaScript
const targetText = document.getElementById( 'targetText' );


const postDatas = [
  { post_id: 123, post_status: 'draft' },
  { post_id: 1021, post_status: 'publish' },
  { post_id: 6021, post_status: 'future' },
];

for ( const postData of postDatas ) {
		//インデックスと値を順に出力
	targetText.innerHTML += `<tr><th>post_id: ${postData.post_id}</th><td>post_status: ${postData.post_status}</td>
</tr>`;
}
インストラクター
コメント

コメントを残す