BLOGスタッフブログ

インソースマーケティングデザイン

2017.12.06 システム

[JavaScript] 繰り返し(ループ)処理の「Array.forEach」と「jQuery.each」の比較

こんにちは。エンジニアの高田です。
私JavaScriptは初心者に毛が生えたレベルです。

JavaScriptにおいて、配列を処理するのに何を使おうかなと思って調べてみると、JavaScriptの繰り返し処理には「for」「for-in」「for-of」「Array.forEach」「jQuery.each」と色々あるようです。
配列の処理なので「Array.forEach」と「jQuery.each」どちらが良いか比較してみました。

Array.forEach

Array.forEachの構文

array.forEach(callback[, thisObj]);

<引数>
callback 各要素に対して実行するコールバック関数で、3つの引数をとります。
  value   現在処理されている配列の要素
  index   現在処理されている配列の要素のインデックス
  array   forEachが適用されている配列
thisObj 任意。callback 内で this として使用する値
 

Array.forEachの例

var arr = ['マリンロード', 'ヤフー', 'グーグル'];

// コールバック関数にvalueのみ指定
arr.forEach( function( value ) {
    console.log( value );
});
// マリンロード
// ヤフー
// グーグル


// コールバック関数にvalueとindexを指定
arr.forEach( function( value, index ) {
    console.log( index + ':' + value );
});
// 0:マリンロード
// 1:ヤフー
// 2:グーグル


// コールバック関数にvalueとindexとarrayを指定
arr.forEach( function( value, index, array ) {
    console.log( index + ':' + array[index] );
});
// 0:マリンロード
// 1:ヤフー
// 2:グーグル


var arrUrl = {
    'マリンロード' : 'https://insource-mkd.co.jp/',
    'ヤフー' : 'https://www.yahoo.co.jp/',
    'グーグル' : 'https://www.google.co.jp/'
};

// 第2引数のオブジェクトを指定する
arr.forEach( function( value ) {
    console.log( this[value] );
}, arrUrl);
// https://insource-mkd.co.jp/
// https://www.yahoo.co.jp/
// https://www.google.co.jp/

オブジェクトの使い道がよくわからない。。。
 

Array.forEachの注意点

Array.forEachは処理を途中で抜けることができないそうです。
どうりで。。。「break」してもしっかりループしてから出てくるなとは思ったんです。
途中で抜けたい場合は別の方法をとるしかなさそうです。
では次!

jQuery.each

jQuery.eachの構文

jQuery.each(object, callback);

<引数>
object  繰り返しの対象となるオブジェクト
callback 各要素に対して実行するコールバック関数で、2つの引数をとります。
  index   現在処理されている配列の要素のインデックス
  value   現在処理されている配列の要素
 

jQuery.eachの例

var arr = ['マリンロード', 'ヤフー', 'グーグル'];

// コールバック関数を指定
jQuery.each(arr, function(index, value) {
    console.log( value );
});
// マリンロード
// ヤフー
// グーグル

// コールバック関数を省略
jQuery.each(arr, function() {
    console.log( this );
});
// Stringクラスに変換されて以下が表示される
// マリンロード
// ヤフー
// グーグル

コールバック関数のindexとvalueの順序が「Array.forEach」と「jQuery.each」で違いますね。
 

jQuery.eachのbreakとcontinue

「Array.forEach」では繰り返し処理から抜けられないという大きな注意点がありました。
「jQuery.each」は大丈夫!!
for文の繰り返し制御においてループを抜けるのは「break」。
ループの現在の処理を終了し、次の処理へうつるのは「continue」文。ですね。
 
「jQuery.each」において、
「break」にあたるのは「return false」。
「continue」にあたるのは「return true」。
true以外でもfalseでなければ、continueになるそうです。

var arr = ['マリンロード', 'ヤフー', 'グーグル'];
$.each(arr, function(index, value) {
    if (index == 0) {
        return true;    // continue
    } else {
        return false;   // break
    }
    console.log( value );
});
// 

まとめ

「jQuery.each」はもちろん「jQuery」が使用できる環境でないと使えないというデメリットはありますが、「Array.forEach」より使い勝手は良いような気がします。
コールバック関数の順序が違ったり、thisの扱いが違ったり、ループから抜ける際の違いがあったりと、それぞれの違いを分かった上で使い分けたいですね。
以上です。

インソースマーケティングデザインが書いた他の記事

見積もり・ご依頼など、
お気軽にご相談ください

本サイトはユーザーエクスペリエンスの向上などを目的に、Cookieを使用しています。
右記のバナーで「同意する」をクリックする、または本サイトを利用することにより、
お客様は弊社のCookieポリシーに同意したことになります。

同意します