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 では、イベント委譲は非常に...

ウェブデザインに必須のツール: Firefox Web Developer プラグイン CSS ツールセットのチュートリアル

プラグインは Firefox ブラウザにインストールされます。 Web Developer プラグイ...

ドメイン名、ポート、IPに基づいてnginx仮想ホストを構築する

nginxでサポートされている仮想ホストには3つの種類があります1. ドメイン名ベースの仮想ホスティ...

PhpStormがVirtualBoxに接続できない問題を解決する

問題の説明: phpstorm の SFTP ホストを 192.168.122.1 に設定すると、接...

JS の効率的なマジック演算子の概要

JavaScript は現在、毎年新しいバージョンがリリースされており、より便利で効率的な新しい演算...

Webデザイナーの成長体験

<br />まず最初に、私はこのグループの中では完全な新人だということを述べなければなり...

スケルトンスクリーン効果を実現する CSS

ネットワーク データを読み込むときは、ユーザー エクスペリエンスを向上させるために、通常は円形の読み...

MySQLでテーブルデータを削除する方法

MySQL でデータを削除する方法は 2 つあります。1 つは DELETE ステートメント、もう ...

MySQLデータベースのトランザクションとインデックスの詳細な説明

目次1. 事務:取引の 4 つの主な特徴:同時トランザクションはどのような問題を引き起こしますか? ...

Ubuntu 16.04 で Python 3 を使用して Django プロジェクトを作成し、実行する方法

ステップ1: Djangoプロジェクトを作成するターミナルを開き、書き込みたいプロジェクトのアドレス...

JavaScript は、マウスがテーブル行を通過するときに色の識別を実装します。

この記事では、マウスがテーブルの行を通過するときにJavaScriptを使用して色ラベルを表示する方...

CSS3 で複数のカスタムフォントを導入する

今日、HTML に問題を発見しました。多くのデフォルト フォントが提供されていますが、「Bold」、...

Javascript の基礎: 演算子とフロー制御の詳細な説明

目次1. オペレーター1.1 算術演算子1.2 インクリメント演算子とデクリメント演算子1.3 比較...

MySQL Shell import_tableデータインポートの実装

目次1. import_tableの紹介2. データのロードとテーブル関数のインポートの例2.1 L...

MySQL シリーズ 10 同時実行制御を実装するための MySQL トランザクション分離

目次1.同時アクセス制御2. 取引1. トランザクションは ACID 原則に従います。 2. トラン...