JavaScript 2019.10.04

JavaScriptで配列を扱う時によく使うメソッド＃2【配列の値に対して繰り返し処理を行う】

最終更新日：2019.11.12Update

Vue.jsなどフロントエンドのフレームワークを使って、バックエンドから送られてきたデータを処理する際には、配列データを取り扱うケースが多いかと思います。前回記事「JavaScriptで配列を扱う時によく使うメソッド＃1【配列の作成・値や総数の取得・空判定など】」に引き続き、今回もJavaScriptで配列データを扱うときによく使う例をまとめていきたいと思います。

今回は、配列データに対して、個別の値に繰り返し処理を行う場合に使うメソッドになります。主に配列データを操作してHTML上に出力するケースが多いのではないでしょうか。それでは、早速みていきたいと思います。

Array.forEach()

配列のデータに対してそれぞれ処理を加えていくときに、よく使われるのは「Array.forEach()」です。対象となる配列に対して指定します。引数には配列内のデータの他にインデックス番号も取得できます。コールバック関数で、配列データに行う処理を記述します。

// HTML
<ul class="target">
</ul>


// javascript（ES6）
const targetElement = document.querySelector('.target');
const arrayObject = [
 { name: 'りんご', price: '100円' },
 { name: 'みかん', price: '80円' },
 { name: 'ぶどう', price: '500円' }
];
arrayObject.forEach((item, index) => {
 const insertElement = `
  <li>
   No.${ index + 1 } ${ item.name } ${ item.price }
  </li>
 ` 
 targetElement.innerHTML += insertElement;
});

上記のコードを実行すると下記のような結果を得ることができます。ここでは配列のデータを全てHTMLとして出力した例になります。

【HTML】

<ul class="target">
 <li>No.1 りんご 100円</li>
 <li>No.2 みかん 80円</li>
 <li>No.3 ぶどう 500円</li>
</ul>

過去記事「JavaScriptで順番に並んだ要素を連続して動かすシーケンシャルなアニメーション実装する」や「JavaScriptで複数要素の値をそれぞれ取得して配列で扱う」などでも、このArray.forEach()を使ったサンプルを紹介していますのでご参考に。

Array.forEach() は「querySelectorAll()」などで取得してきた特定の複数要素に対して、処理を行うケースなどでよく使いますが、その際にIE11で次のようなエラーが表示される場合があります。

このエラーですが、NodeListオブジェクトに対してforEach()を実行するのが、IE11ではサポートされていないことが原因のようです。querySelectorAll()の返り値がNodeListオブジェクトになりますね。そんな場合には、下記のように「Array.prototype.slice.call()」を使って、NodeListオブジェクトを配列に変換し、その配列に対してforEach()を実行させるような形に修正します。

const nodeListObject = document.querySelector('.target');
const arrayObject = Array.prototype.slice.call( nodeListObject );
arrayObject.forEach((item, index) => {
 // 配列データに対しての処理
});

このようにすることで、IE11でもforEach()が自由に使えるようになります。

for ( …. of Array )

また、上記のArray.forEach()以外にも「for ( …. of Array )」も使われることがあります。引数として配列内のデータを変数や定数などで指定する形になります。基本的には同じように配列の個別の値に対して繰り返し処理を行いますが、for ( …. of Array )では「break文」が使えるので、繰り返し処理を抜けることができます。

【javascript（ES6）】

const arrayObject = [
 { name: 'りんご', price: '100円' },
 { name: 'みかん', price: '80円' },
 { name: 'ぶどう', price: '500円' }
];
for ( const item of arrayObject ) {
 console.log(item);
 if ( item.name === 'みかん' ) {
  break;
 }
}

break文でループを途中で抜ける場合には、条件を指定します。ここではキーの値を基準に条件分岐してみました。コンソールで出力結果を見ると、繰り返し処理は指定した条件までで止まっているのが確認できます。

【console.log】

Object { name: "りんご", price: "100円" }
Object { name: "みかん", price: "80円" }

それ以外にも、「for ( …. in Array )」や「for ( …. < Array.length ….++)」などの方法で配列データを展開することも可能ですが、概ね上記2つのどちらかが使われるケースが多いようですね。

まとめ

【配列のすべての値に対して処理を繰り返す】

Array.forEach(( value, index ) => { callback });

【配列の値に対して条件付きの処理を繰り返す】

for ( const value of array ) { callback };

今回はJavaScriptで配列を扱う例として、配列データに対して繰り返し処理を行うケースについてまとめてみました。本文中でもある通り、HTMLとして配列データを展開するといった表示や出力に関係する処理や、それらのデータをもとに処理を行うケースなどが挙げられます。また、別記事でその他のユースケースについてもまとめていきたいと思います。

（こちらの記事もどうぞ）
JavaScriptで配列を扱う時によく使うメソッド＃1【配列の作成・値や総数の取得・空判定など】