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

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

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

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

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

構文

構文意味
for ( let i = 0; i < 配列の長さ; i++) {
//要素に対する処理
}
for文でループ処理を行う
for構文

サンプルコード

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

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 ( let i = 0; i < postDatas.length; i++ ) {
		//インデックスと値を順に出力
	targetText.innerHTML += `<tr><th>post_id(インデックス${i}): ${postDatas[i].post_id}</th><td>post_status(インデックス${i}): ${postDatas[i].post_status}</td>
</tr>`;
}
インストラクター
コメント

コメントを残す