ForEachループを't破ることができる理由|ByteSize JS

私は最近、あるスキーマを別のスキーマに対して評価するコーディングインタビューを受けました。 それの詳細はそれほど重要ではありませんが、(インタビューの途中で)それから出てきたことの1つは、forEach()ループから抜け出すことができないということでした。 私はその小さな一口を忘れていたし、それはおそらく雇われるの私のチャンスを台無しにした。 あなたがこれを読んだ後、うまくいけば、あなたは私がしたのと同じ間違いをしません! 私のようにはならないでください。

https://media.giphy.com/media/nRkQduJDZ43bW/giphy.gif

あなたが読むよりも見ることを好む場合は、これのビデオ版をチェックしてください!

MDNはすべてを知っています

MDNが指摘しているように:

例外をスローする以外に、forEach()ループを停止または中断する方法はありません。 このような動作が必要な場合、forEach()メソッドは間違ったツール

MDN docsからのハードコアなsassです。 しかし、彼らは正しいです、どのツールを選択するかを知ることが重要です。

なぜforEach()から抜け出すことができないのか深く理解する前に、ループが何であるか、forEach()がどこから来たのかを調べてみましょう。

ループとは何ですか

プログラミングにおけるループはかなり一般的な問題を解決します: このすべてのデータに対して同じコードを実行する必要があります。 簡単に言えば、それは:

定義された終了状態に達するまで、同じコードを何度も繰り返します(ループ上)。

The Problem

比較のために、さまざまなループタイプを使用して同じ問題を解決します。 ここに問題があります:

2つの配列を比較し、それらの項目が同じかどうかを確認します。

ここでは、比較しようとしているデータです:

 const jedis = const sith = 

私たちは2つの配列を持っています、両方ともいくつかの名前を持っています。 アナキンはジェダイとシスの両方であることに気付くでしょう。 これは些細な例ですが、私のインタビュー中にテストされたものから遠く離れていません。

古い方法

私はあなたがこの記事から取得したくないのは、あるループが別のループよりも優れているということです。 それらはすべて独特なプログラミングの解決を提供し、特定の使用例のための点を有する。 トリックは、いつ使用するかを知ることです。

伝統的なForループ

あなたはプログラミングコースのいずれかのタイプを取った場合、あなたはおそらく私たちの良い友人forループにさらされています。 これは、長い時間のためのプログラマのための便利なツールとなっており、今日でも有用です。 それを使って私たちの問題を解決しましょう。

// Our data again, for referenceconst jedis = ;const sith = ;// start our loop, define our iterator variablefor (let i = 0; i < jedis.length; i++) { // create a variable we can reference const thisJedi = jedis; // see if the item in the array we are testing exists if (sith.includes(thisJedi)) { // If it does exist, then that jedi is also a sith console.log(`${thisJedi} is also a Sith`); // we can exit out break; } console.log(`${thisJedi} is not a Sith`);}

forループは、選択した条件を満たしている場合にコードを終了する非常に便利な方法を提供します。 これは、大量のデータをループするときに非常に役立ちます。 Project Eulerのいくつかの問題、特にこれを解決するのに非常に役立ちました。

新しい別の方法

とりわけ、forEach()はES5で私たちに与えられた他のすべての良さと一緒に2009年に仕様に刻印されました。 これは、配列内の項目を簡単に反復処理するクリーンなコードを書くための便利なメソッドとして機能します。

何をしているのですか?

forEach()ループは、配列内の各項目に対して別の関数(コールバック)を実行する関数です。 そのコールバック関数で何が起こるかを定義します。 JSは、その関数で3つのパラメータを与えるのに十分です:

  1. 配列内の項目
  2. 項目のインデックス
  3. 配列全体

代わりにforEach()ループを使用して問題を見てみましょう。 私は関数に3つのパラメータすべてを含めましたが、私が命名している最初の項目のみを使用していますjedi

 // We have to create a global state variable to keep track of what is happening let matching // loop over array jedis.forEach((jedi,index,array) => { // check to see if jedi is in sith if(!sith.includes(jedi)) { // if it isn't, set global variable to false matching = false } // it keeps going... }) console.log(matching) // false

より理にかなっている場合は、コールバック関数を名前付き関数にリファクタリングできます。 私はそれがもう少し読みやすくなると思います。 それはまた私達がほしいところはどこでも私達がこの機能を再使用することを可能にする。 Yay関数型プログラミング!

 let matching function isJediAlsoSith(jedi,index,array) { if(!sith.includes(jedi)) { matching = false } } jedis.forEach(isJediAlsoSith)

私たちの解決策は本質的に同じことをします。 唯一の違いは、jedis配列の最後に達するまで実行し続けることです。 このような小さなサイズの配列では、パフォーマンスの違いが大きくなるとは思いません。

しかし、なぜ?

これは最終的に私たちの質問への答えに私たちをもたらします、なぜ私たちはforEach()ループから抜け出すことができませんか? これは、ループがすべての項目に対してそのコールバック関数を実行しているため、returnを記述しても、関数のそのインスタンスでのみ返されるためです。 それは続けています。 forEach()関数の場合、返されたコードでは何もしません。 それは他の配列メソッドのいくつかの場合ではないことに注意してください。

さらに、このため、breakまたはcontinueは有効なステートメントではありません。

その他の方法

ループにはかなりの数の異なるタイプがあります。 彼らはすべて異なる目的を持っており、私はそれぞれを調べることをお勧めします。 常にforEach()ループが必要なわけではありません。

https://media.giphy.com/media/tnwuVMx6n1VtK/giphy.gif

foreach()vs map()

おそらく、チュートリアルに表示される最も一般的な配列メソッドはforEach()map()です。 この2つの最大の違いは、mapは新しい配列を返しますが、forEach()は返さないことです。

伝統的なループ

whileループ

配列メソッド

配列。forEach()

配列。map()

配列。filter()

配列。reduce()

配列。reduceRight()

配列。every()

配列。いくつかの()

配列。indexOf()

配列。lastIndexOf()

配列。find()

配列を検索します。findIndex()

反復可能なオブジェクトループ(配列を含む)

for in

for of

これは方法です

Baby Yoda

信じられないほど生意気なMDN docsで前述したように、適切なツール成功に。 オプションの数は、最初は少し圧倒的に見えるかもしれませんが、私はのアプローチを取るのが好き:”それが動作する場合、それは正しいツールです。”

一般的に言えば、コードをリファクタリングして死に至ることはできますが、ビルドする時間を無駄にしています。 私のインタビューの場合、私は正しいツール、間違った方法を使用していました。 私はあなたがforEachループから抜け出すことができないことを覚えていたならば、物事はおそらく異なる🤷 🏼 ♂ ️になっていたでしょう。

あなたは、任意の追加の情報共有を持っている場合は、以下のコメントにそれをドロップしてください!

いつものように、幸せなコーディング。

グラフィックデザインとそれがソフトウェア開発とどのように関係するかについての本を書いています! あなたが興味を持っている場合は、更新のためにここにサインアップ。

https://digitalnutt.substack.com/p/coming-soon?r=34slo&utm_campaign=post&utm_medium=web&utm_source=copy

音楽

私も音楽を書きます! ここでそれをチェックアウト: Spotify/Youtube|Apple Music

サポート

あなたはこの記事が好きで、より多くを見たい場合は、それを行うための最良の方法は、ここで私を購読/フォローすることです! あなたが優雅に感じているなら、あなたは私にコーヒーを買うことができます!



+