インソースマーケティングデザイン
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の扱いが違ったり、ループから抜ける際の違いがあったりと、それぞれの違いを分かった上で使い分けたいですね。
以上です。