js配列forEachインスタンスの詳細な使用方法

js配列forEachインスタンスの詳細な使用方法

1. forEach() は map() に似ています。これも渡された関数に各要素を順番に適用しますが、新しい配列は返しません。

2. forEach() は、配列を走査し、配列の各要素を呼び出してコールバック関数に渡すためによく使用されます。転送関数は値を返す必要はありません。

var arr = [7,4,6​​,51,1];
試してください{arr.forEach((item,index)=>{
      (項目<5)の場合{
       throw new Error("myerr") //myerrの新しいエラーメッセージを作成する
      }
      console.log(item)//ループが終了したことを示すために7のみを出力します})}catch(e){
            console.log(e.message);
      if (e.message!=="myerr") { //定義したエラーでない場合は、そのまま破棄します。throw e
      }
     }

知識ポイントの拡張:

手書き forEach

forEach()メソッドは、配列の各要素に対して指定された関数を 1 回実行します。

arr.forEach(callback(currentValue[, index[, array]])[, thisArg]);

  • 折り返し電話

    • 現在の値
      配列内で現在処理されている要素。
    • index オプション 処理中の現在の要素の配列内のインデックス。
    • 配列オプション
      forEach() メソッドが操作する配列。
    • thisArg オプションオプションのパラメーター。コールバック関数が実行されたときに this の値として使用されます。
  • 戻り値なし

forEach関数にthisArgパラメータが指定されている場合、そのパラメータはコールバック関数のthis値として使用されます。それ以外の場合、 this値はundefined になります。コールバック関数内のthisのバインディングは、関数が呼び出されたときの一般的なthisバインディング ルールに従って決定されます。

arr = [1, 2, 3, 4]とします。

arr.forEach((...item) => console.log(item));

// [1, 0, 配列(4)] 現在の値
関数カウンター() {
 this.sum = 0;
 カウント = 0;
}

// thisArg パラメータ (this) は forEach() に渡されるため、呼び出されるたびに、その this 値としてコールバック関数に渡されます。
Counter.prototype.add = function(配列) {
 配列.forEach(関数(エントリ) {
  this.sum += エントリ;
  ++これ.count;
 }、 これ);
 // ^---- 注記
};

定数obj = 新しいカウンター();
obj.add([2, 5, 9]);
オブジェクトの数;
// 3 === (1 + 1 + 1)
オブジェクトの合計;
// 16 === (2 + 5 + 9)

  • すべての配列にはこのメソッドがあります
  • コールバックパラメータは、各項目、インデックス、元の配列です。
Array.prototype.forEach = function(fn, thisArg) {
 var _this;
 if (typeof fn !== "関数") {
  throw "パラメータは関数である必要があります";
 }
 引数の長さが1より大きい場合
  _this = この引数;
 }
 Array.isArray(arr) の場合 {
  throw "forEach メソッドは配列でのみ使用できます";
 }

 for (let index = 0; index < arr.length; index++) {
  fn.call(_this, arr[インデックス], インデックス, arr);
 }
};

js 配列 forEach の例の詳細な使用法に関するこの記事はこれで終わりです。js 配列 forEach メソッドの使用法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JavaScript で知らない Object.entries の使い方
  • js 配列 fill() 充填メソッド
  • JavaScript配列の重複排除のいくつかの方法についての詳細な説明
  • 任意の長さの配列を作成または埋めるための JS のヒントの要約
  • JavaScript 配列と非配列オブジェクトのディープ クローンとシャロー クローンの原則の詳細な説明
  • JavaScript配列重複排除の詳細な説明
  • js 配列エントリ() 反復メソッドを取得する

<<:  CSS と HTML とフロントエンド テクノロジーのレイヤー図

>>:  MySQL データ型 DECIMAL の使用方法の詳細な説明

推薦する

JavaScript の基礎: エラーキャプチャメカニズム

目次序文エラーオブジェクト投げる試して…捕まえて…最後に最終ルールトライ/キャッチパフォーマンスウィ...

VMware Workstation Pro 16 グラフィックチュートリアル (CentOS8 仮想マシン クラスタの構築)

目次準備VMware Workstation Pro 16 をインストールするLinux仮想マシンの...

Ubuntuが仮想マシンでインターネットに接続できない問題の解決策

インターネットに接続できない仮想マシンをセットアップするのは非常に面倒です。ここでは、Ubuntu ...

MySQL 5.7.29 + Win64 解凍バージョンのインストールチュートリアル(画像とテキスト付き)

公式サイトをダウンロード自分に合ったバージョンを選択してダウンロードしてください。 ダウンロードをク...

JDKネイティブスレッドプールのバグを修正するTomcatの実装原理

処理能力と同時実行性を向上させるために、Web コンテナは通常、リクエストを処理するタスクをスレッド...

HTML と CSS の命名規則の概要

CSS命名規則 ヘッダー: ヘッダーコンテンツ: コンテンツ/含むフッターナビゲーション: navサ...

tdが空の場合に境界線を表示する方法

以前、CSS を使用してテーブルの border + bordercolordark + borde...

Docker+gitlab+jenkins は、ゼロから自動デプロイメントを構築します

目次序文: 1. Dockerをインストールする2. DockerでJenkinsをインストールする...

Vue カスタム箇条書きボックス効果 (確認ボックス、プロンプトボックス)

この記事の例では、参考のためにVueカスタムポップアップ効果の具体的なコードを共有しています。具体的...

mysql8.0.11をインストールしてrootパスワードを変更し、navicat for mysqlに接続するアイデアの詳細な説明

1.1. ダウンロード:公式ウェブサイトから zip パッケージをダウンロードします。私は 64 ビ...

Javascriptを使用して滑らかな曲線を生成する方法

目次序文ベジェ曲線の紹介二次ベジェ曲線3次ベジェ曲線ベジェ曲線計算機能フィッティングアルゴリズム付録...

MySQL ステートメントの概要

目次1. データベースの使用を選択2. 情報を表示する3. テーブルを作成する4. データを挿入する...

Vue で echarts を使用してコンポーネントを視覚化する方法

echarts コンポーネントの公式ウェブサイト アドレス: https://echarts.apa...

CSS ハック \9 と \0 は IE11\IE9\IE8 のハッキングには機能しない可能性があります

Web ページやフォームを設計するたびに、さまざまなブラウザ、特に IE ファミリの互換性の問題に悩...

JavaScriptカルーセルの実装について

今日もとても実践的な事例です。名前を聞くだけで高度で難しそうですよね?今日はカルーセル画像の真髄を簡...