$.each() から抜けると同時にメソッドからも抜けるにはどうすればいいのでしょう？

Question

やりたいこと

$.each() のループ内にて、特定条件で"return false" すると、$.each() から抜けることはできるがメソッドから抜けることができない
抜ける場合には、$.each() 内でフラグを立てて抜ける方法しか思いつきませんでした。
なにかスマートに抜ける方法はありますか？

下記のコードで"callMethod()" から抜けるようにしたいです

$(function() {
	callMethod()
})

let callMethod = () => {
	let arr = [1,2,3,4,5]
	console.info('enter: callMethod')
	$.each(arr, (i,e) => {
		console.info(e)
		if (e === 3) return false
	})
	console.info('leave: callMethod')
}

上記のコードだと、console.info('leave: callMethod') が表示されてしまう。
$.each() 内の、"e===3"の時には**console.info('leave: callMethod')**が表示されないようにしたいです。

よろしくお願いします。

Answer 1

他の回答者さんの様に例外やフラグ変数で逃げる手法で意図した挙動になるでしょう。

しかし、そもそも$.each()でやること自体が誤りの始まりです。
eachというのは**配列の要素全てに同じ処理を行う(戻り値は問わない)**リスト操作関数だからです。
特定の何かが出たら逃げる…これで正しいのでしょうか？

jQueryのリスト操作は不完全なので、Underscore.jsもしくは、速度面でより洗練されたlodash.jsを利用してください。

そのfindを利用すれば下記のように書く事が出来ます。

let callMethod = () => {
    let arr = [1,2,3,4,5]
    console.info('enter: callMethod')

    // Add: ここから
    let is_skip = _.find(arr, (it) => {
      return it !== 3
    })
    if (is_skip) return
    // Add: ここまで

    $.each(arr, (i,e) => {
        console.info(e)
    })
    console.info('leave: callMethod')
}

特定のダメな奴が見つかるまで、何かしらの処理をさせたければ_.findIndexと_.takeを組み合わせて実現出来るはずです。

Comments

[yonaO]

miyabi-sunさん

ご回答ありがとうございます。

今後、同様の処理が増えた時には、lodash.js を使用して、find() を使ったやり方も視野に入れていきたいです．

Answer 2

抜ける場合には、$.each() 内でフラグを立てて抜ける方法しか思いつきませんでした。

それ以外に無いと思います。

---

追記：

例外は思いつかなかったです、おもしろい。
そもそも事前にチェックしておけばよいような。

let arr = [1,2,3,4,5];
if ( arr.some( e => { return (e === 3); } ) ) return;

【Array.prototype.some() - JavaScript | MDN】
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/some

Comments

[yonaO]

kei344さん

ご回答ありがとうございます。
事前チェックありですね〜

今回の場合、メソッド内で this を使用したので、今回は try~catch を使います！
some() は知らなかったので、事前チェックの際には使っていきたいです。

[kei344]

> メソッド内で this を使用したので
アロー関数なのでいけるとは思いますよ。

【アロー関数 - JavaScript | MDN】
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/arrow_functions#Lexical_this

【ES2015(ES6)新構文：アロー関数(Arrow function)｜もっこりJavaScript｜ANALOGIC（アナロジック）】
http://analogic.jp/arrow-function/#caution

[yonaO]

言葉足らずでした．すみません．
jQuery で取得した値をもとに each 内で処理しているので今回の場合のように１行で書くことができなくなり、変数が必要になってしまので、今回は try~catch を使うことにします．

some() と $.inArray() の使い分けが難しいです．．．
some() も積極的に使っていきたいですね．

[kei344]

> some() と $.inArray() の使い分けが難しいです
$.inArray() は ArrayにindexOf すら無かった時代に jQuery に実装され、現状に合わせて進化はしていますがそういうメソッドです。対応ブラウザが IE9+ であれば some() など新し目のものを使えば良いと思います。

[yonaO]

なるほど、勉強になります。
ありがとうございます！

Answer 3

例外処理でにげてみては？

$(function(){
  let arr = [1,2,3,4,5];
  console.info('enter: callMethod');
  try{
    $.each(arr, (i,e) => {
      console.info(e);
      if (e === 3) throw true;
    });
  }catch(e){
    return false;
  }
  console.info('leave: callMethod');
});

修正

質問にあわせ関数の形にしておきました
なお、ループから抜けてdoneを表示したあと抜けるにはfinallyを利用ください

<script>
$(function() {
    callMethod()
})
let callMethod = () => {
  let arr = [1,2,3,4,5];
  console.info('enter: callMethod');
  try{
    $.each(arr, (i,e) => {
      console.info(e);
      if (e === 3) throw true;
    });
  }catch(e){
    return false;
  }finally{
    console.info('done: callMethod');
  }
  console.info('leave: callMethod');
}

</script>

Comments

[yonaO]

yambejpさん

ご回答ありがとうございます。
try~catch は、思いつきませんでした。
フラグのために、変数を定義したくなかったのでこの方法で実装したいとおもいます。

助かりました！！

Answer 4

jQuery.each(arr, func) は、arr のそれぞれに対して func を適用します。
つまり、

function func() {...}

$.each(arr, func);

と書いているのと同じです。であれば、func の中で return したところで、each に（そしてさらに上位にも）影響を与えないことは理解できるかと思います。

each ループを飛び越えて影響を与えるためには、

• フラグ変数を介して状態を伝える
• 例外を生成して上位に伝える

ということになるわけです。

Comments

[yonaO]

tacsheavenさん

ご回答ありがとうございます。

今回は、例外を生成して上位に伝える 方法で実装することにしました．