ワン❀リード
JSの開発作業では、アレイを介し操作するには、そんなにforループのように、forEachのような方法が不慣れな性質ではありません、非常に一般的なように記述することができ、また、私は面白い出くわしたまで、ブログの記録を書く価値がないのforEachを考えます問題は、我々は、コードの一部を見てみましょう。
ARR = LET [1、2 ]; arr.forEach((項目、指数) => { arr.splice(インデックス 1 ) はconsole.log( 1 ); //出力時間? }) はconsole.log( ARR)// ?
完了後、このコードが実行されますARR出力がどのくらいありますか?体内の循環コンソール操作が数回行われることになりますか?
この記事では、ピットを踏むかもしれないのforEachを使用すると、foreachループのための違いについて話して、forEachの紹介から始まります、私たちは再び経験しますforeach、この記事の後、始めてみましょう。
II❀forEachのパラメータ
そして、同じループのために、forEachのメソッドもそうあるべき完全なのforEachの実装を提供します、配列、配列の各要素のためのコールバック関数のトラバースを完了するために、所属、我々はすべてのコールバック関数のパラメータを説明し、そして何がこの背後にあります効果。
arr.forEach(関数(自己、インデックス、ARR){}、この)。
自己:配列要素を取得するために、左から右に、デフォルトで現在のトラバーサルの要素の配列。
インデックス:現在の要素の配列インデックスは、最初の要素のインデックスはそうで0であり、。
ARR:配列の現在の反復。
この:この時点でコールバック関数。
これら四つのパラメータという印象を強化するために、簡単な例はforEachを見てみましょう:
ARR1の[1、2 ,. 3 ,. 4のlet = ]; LET OBJ = { A: 1 }; arr1.forEach(関数(セルフ、インデックス、ARR){ にconsole.log(この要素は`$ {自己} $インデックスであります{索引}、配列ARRの一部} { `$); // の単純計算する にconsole.log(自己+ このII.A)を; }、OBJ)
私たちは、私たちが提供OBJ我々は、この時点のコールバック関数を配列を横断している、実際にはARRのパラメータを見ることができます。それは非常に単純ではないのですか?
次の例のように、私たちはこのように、重いの配列を作るためにそれを使用することができますので、第三のパラメータ編曲センス何、彼はまだパラメータとして独自のトラバーサルを提供しています、このパラメータは、実際に使用するのも非常に簡単です、思考する必要があります。
せARR1 = [1、2、1、3、1 ]。 ARR2を聞かせて = []; arr1.forEach(関数(自己、インデックス、ARR){ arr1.indexOf(自己) ===インデックスarr2.push(自己):NULL ; }); console.log(ARR2)。// [1,2,3]
OK、forEachの紹介は、私たちのために(私は現在経験してる)何のforeachピット使用中と言っています。
ピットは3❀のforEachを使用しました
1.forEachは休憩をサポートしていません。
我々はすべて知っているように、あなたはループの外にブレークを使用することができますが、forループを使用する場合、例えば、私は、配列トラバーサルの最適化のための素晴らしいですループの外条件を満たすために、配列の最初の要素を、見つけたいです。残念ながら、forEachのブレークがエラーにつながる、ブレーク操作をサポートしていません。
せARR = [1、2、3、4 ]、 I = 0 、 長さ = arr.length。 用(; iは長さ<; Iは++ ){ にconsole.log([I] ARR)。// 1,2- 場合(ARR [I] === 2 ){ 破ります。 }。 }。 arr.forEach((自己、指数) => { にconsole.log(自己); 場合(自己=== 2 ){ 破壊 ; // 报错 }; });
それはループの外ではないことをforeachの?はい、しかし、ブレークを使用しますが、トライキャッチの組み合わせは動作しますが、ブロガーは、この記事に興味を持って見ていない ループのうちのjsのforEach
2.forEachでは無効なリターンを使用
まず、判断する必要があり、エラーが返されますループを使用するため、リターンののforeach使用は文句はありませんが、有効になりませんrerutnは、我々は例を見て:
せARR = [1、2、3、4 ]。 関数検索(アレイ、NUM){ array.forEach((自己、指数) => { 場合(自己=== NUM){ リターン指数; }; }); }。 インデックスましょう =検索(ARR、2); // 未定義
コード番号2は、配列のインデックスを検索したいのですが、戻って実行し、値を返すために終了コードで役割を果たしています。
私たちは本当に値を返すためにリターンを使用する場合はもちろん、それだけでこのように、代わりにforeachループのリターン機能を操作することができます。
関数検索(アレイ、NUM){ _indexましょう。 array.forEach((自己、指数) => { 場合(自己=== NUM){ _index = 指数; }; }); リターン_index。 }。
3.forEach自体がリセット要素のインデックスではありません削除
記事の冒頭にそれの問題を覚えてコールバック関数を通過した後のforeach仕上げがされますので、実際には、そのコードは一度だけ実行されます、配列は、削除してきれいにされませんようにインデックスインクリメント隠されたこのような、:
arr.forEach((項目、指数)=> { arr.splice(インデックス 1 ) はconsole.log( 1 ); // これは増大暗黙の指標を可能にする1つの。 インデックス++ ; });
最初の反復が完了すると、アレイは、ケース[2]は、インデックスが1となり、最大配列インデックス0のみ、条件が満たされていない、それはループの外です。
アイデアを持っていた、ではない、もちろん、使用しないforEachのこの時点でループから抜け出すためにどのような方法がありES6拡張オペレータが。
[... ARR] .forEach((項目、指数)=> { arr.splice(インデックス 1 ) にconsole.log( 1 ); });
配列arrをリセットするためにオペレータを拡大することで、目的はループの外ではありません、あなたは確かに2の内部実装を見つけるだろう、私は、インデックスがまだリセットされていないことを後悔するので、まだARR配列は、横断しながら、自分自身を空に削除することはできません。
実際の開発では、アレイを介し操作は学生をforeachのためにとても慣れて、非常に一般的です削除しますので、我々は注意を払う必要があります。
店舗のforEachのため❀違い
さてここで、循環とのforEachのためには、どのような違いを生むのでしょうか?私たちのような、いくつかのポイントにそれを言うことができるはずだと思います。
1.forサイクルは、Foreachループの外に休憩を使用しますが、できません。
2.forサイクルを制御することができ、ループスタート(iは周期の開始点を決定するデジタルの初期化)が、forEachのは、デフォルトのインデックス0から開始することができます。
3.forサイクルサポート修正指数(修正I)が、forEachのは行うことはできません(基本的な指標インクリメント制御、我々はそれを制御することはできません)。
呉❀配列トラバーサル、自身を削除します
まあ、我々は同時に、アレイを横断し、そしてそれを修飾するすべての項目を削除する方法、問題の本質に戻りますか?
実際には非常に単純な、私たちはこのように、forループを使用することができます。
ARR = LET [1,2 ,. 1 ]、 I = 0 、 長さ = arr.length; のために(; Iは、長さを<; Iは++ ){ // すべてのアレイを削除する1 IF(ARR [I] === 1。 ){ arr.splice(I、 1 ); // Iをリセットする、私は、そうでなければジャンプ i-- ; }; }; にconsole.log(ARR); // [2]
予選のすべての項目を削除し、それはそれをフィルタリングしていませんか?濾過は、本能的にフィルタ方法は非常に簡単だと思います。
VaRの ARR1 = arr.filter((指数)=> { 戻りインデックス== 1] ; }); console.log(ARR1)。// [2]
小さいコードが、新しい変数値フィルタ処理を受け入れるように返すことがあります。
、あなたは、私は、人がより頑固ですよ、と言う、forEachのインデックスインデックスはリセットできないので、それは項目の配列を削除することは本当に難しいですし、私は大丈夫やるもちろんOKで、この関数はforEachを使用する必要がありますが、私たちは順番に配列させる必要がありトラバーサル:
。arr.slice()()逆forEachの(関数(項目、インデックス、オブジェクト){ 場合(項目=== 1 ){ arr.splice(object.length - 1 -インデックス、1 ); } })。 console.log(ARR)。// [2]
もちろん、私たちは数多くの配列方法ので、それをお勧めしませんし、絶対的に良いか悪いかはありません、どのような状況の下での方法の使用は、より良いアプローチここで使用されるのforeachいる間は終わりに達したが、コードは経験を読んでいません良いです。
まあ、導入は、資料の冒頭の問題を解決する方法、forEachの上にあります。
そして、この記事の最後。
呂❀参照