js の Array.forEach でループを終了する方法の例

js の Array.forEach でループを終了する方法の例

forEach() メソッド

構文: array.forEach(callback(currentvalue,index,arr),thisValue)


callback は配列内の各要素に対して実行される関数で、1 ~ 3 個のパラメータを受け入れることができます。

  • currentvalueパラメータは配列の現在の要素を表します。必須パラメータです。
  • インデックスパラメータは現在の要素のインデックスを表します。オプションパラメータ
  • arr パラメータは、現在の要素が属する配列を示します。これはオプションのパラメータです。

thisValue は、コールバック関数 callback() が実行されたときの this ポイントを表します。オプションのパラメータ。書き込まれていない場合、デフォルトではウィンドウのグローバルを指す。

    var arr = [1, 3, 5, 13, 2];
    var res = arr.forEach(function(item,index) {
        console.log(`配列の${index+1}番目の要素は${item}です`);
    })
    console.log(res); // forEachの戻り値は未定義です。

実行結果:

js の Array.forEach のループから抜け出す方法

forEach は break や return によってループから抜け出すことはできません。ループから抜け出す一般的な方法は、例外をスローすることです。

 試す {
   配列 = [1, 2, 3, 4] とします。
   配列.forEach((項目, インデックス) => {
     (項目 === 3)の場合{
       throw new Error('end')//エラーが発生した場合、ループは終了します} else {
       コンソール.log(アイテム)
     }
   })
 } キャッチ (e) {
 }

この書き方は実は非常に面倒です。

解決:

1. 代わりに every を使用します。

配列 = [1, 2, 3, 4] とします。
配列.every((項目, インデックス) => {
  (項目 === 3)の場合{
    真を返す
  } それ以外 {
    コンソール.log(アイテム)
  }
})

2. 自分で書いてみる😁

//ループから抜け出せる配列のトラバーサル Array.prototype.loop = function(cbk) {
  //現在の配列が空かどうかを判断します if (this?.length) {
    (i = 0 とします; i < this.length; i++) {
      stop = cbk(this[i], i, this) とします。
      //ループを停止するかどうかを判定する if (stop) {
        壊す
      }
    }
  }
}


配列 = [1, 2, 3, 4] とします。
配列.loop ((項目, インデックス) => {
  if (item === 3) {
    真を返す
  } それ以外 {
    コンソール.log(アイテム)
  }
})

要約する

Array.forEach が js のループから抜け出すことに関するこの記事はこれで終わりです。Array.forEach が js のループから抜け出すことに関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。皆様が今後も 123WORDPRESS.COM を応援してくれることを願っています。

以下もご興味があるかもしれません:
  • JavaScript Array.reduce ソースコードの詳細な説明
  • JavaScript Array.flat() 関数の使用分析
  • JavaScript Array.prototype.slice の使用手順
  • JavaScript マッパー array.flatMap()

<<:  Vue はフォームデータ検証のサンプルコードを実装します

>>:  Baota LinuxパネルにFTP接続できない問題の解決方法の詳細な説明

推薦する

JavaScript でクールなマウス テーリング効果を実装

これを見た後、あなたにも手ができて、さまざまな美しい小さなしっぽを作れるようになることを保証します!...

h5入力ボックスプロンプト+通常のテキストボックスプロンプトを実装する方法

XML/HTML コードコンテンツをクリップボードにコピー<入力 id = "ユーザ...

HTML ボディタグと HTML でよく使われる制御タグの詳細な説明

1. <body> タグ: Web ページの本体をマークするために使用されます。body...

Dockerコンテナの構築と実行のプロセスの詳細な説明

イメージをプルし、コンテナを作成してコンテナを実行するだけです。 docker run -d --r...

レスポンシブWebデザイン学習(1) - 画面サイズと使用率の決定

最近では、モバイルデバイスがますます普及しており、ユーザーがスマートフォンやタブレットを使用して W...

Jira リバース プロキシを実装するための nginx について

概要: nginx リバース プロキシ jira を構成し、https を実装します。Tomcat ...

Linux の圧縮および解凍コマンドの紹介

目次一般的な圧縮形式: gz .bz2 .xz .zip一般的に使用されるアーカイブは圧縮を必要とす...

mysql 起動時の ERROR 2003 (HY000) の問題を解決する方法

1. 問題の説明MYSQL を起動すると、図に示すように、「ERROR 2003 (HY000): ...

vue keep-alive の簡単な概要

1. 機能主にコンポーネントの状態を保持したり、再レンダリングを回避したりするために使用されます。 ...

MySQLでMyISAMストレージエンジンをInnodbに変更した操作記録のまとめ

一般的に、MySQL はデフォルトでさまざまなストレージ エンジンを提供しており、次のように表示され...

TypeScriptはvscodeを使用してコードのコンパイルプロセスを監視します

インストールtsコマンドをグローバルにインストールする npm install -g typescr...

MySQLインデックスの失敗の典型的なケース

目次典型的なケース付録: 一般的なインデックス障害の状況典型的なケース次の構造を持つ 2 つのテーブ...

Linux redis-Sentinel 設定の詳細

ダウンロードダウンロードアドレス: https://redis.io/download /usr/l...

nginx を使用して正規表現で指定された URL リクエストを傍受する方法

nginx サーバーnginx は、静的ファイルの処理に非常に効率的な優れた Web サーバーです。...

TypeScript マッピング型の詳細

目次1. マップされた型2. マッピング修飾子3. キーの再マッピング4. さらなる探究序文: Ty...