Vue が学ぶべき知識ポイント: forEach() の使用

Vue が学ぶべき知識ポイント: forEach() の使用

序文

フロントエンド開発では、目的のコンテンツを取得するためにループをトラバースする必要がある状況に頻繁に遭遇します。この状況は開発のいたるところで見られます。このブログ投稿では、より一般的で古典的な知識ポイントである forEach() の使用について説明します。

forEach() は、フロントエンド開発で配列を操作するメソッドです。主な機能は配列をトラバースすることです。実際、これは for ループのアップグレード版です。このステートメントには、パラメーターとしてコールバック関数が必要です。コールバック関数のパラメータは次のとおりです: 1. 値: 配列の内容を走査します。2. インデックス: 対応する配列のインデックス。3. 配列: 配列自体。

Vue プロジェクトでは、タグ内のループには v-for が使用され、メソッド内のループには forEach が使用されます。

1. forEach() の原則

forEach() メソッドは主に、配列の各要素を呼び出して、その要素をコールバック関数に渡すために使用されます。 forEach() メソッドは空の配列に対してコールバック関数を実行しないことに注意してください。

forEach: Array.prototype.forEach は配列内にのみ存在するメソッドで、配列を走査する for ループと同等です。使用方法: arr.forEach(function(item,index,array){...})、ここで、コールバック関数には 3 つのパラメーターがあり、item は現在走査されている要素、index は現在走査されている要素のインデックス、array は配列自体です。 forEach メソッドは null および未定義の要素をスキップしません。たとえば、配列 [1, undefine, null, , 2] の 4 つの要素すべてが走査されます。map との違いに注意してください。

2. forEach() 構文

array.forEach(関数(現在の値、インデックス、配列)、この値)

例:

配列.forEach(関数(項目、インデックス、配列){...})

3. forEach() その他の関連コンテンツ

1. forEach() の continue と break:

forEach() 自体は continue および break ステートメントをサポートしていませんが、some および every を通じて実装できます。

2. forEach() と map の違い:

forEach() には戻り値がなく、基本的には for ループと同じで、各項目に対して関数を実行します。つまり、map は元の配列を変更せずに新しい配列を返しますが、forEach は元の配列を変更します。

3. forEach() と for ループの比較:

for ループには多くのステップがあり、比較的複雑ですが、 forEach ループは比較的単純で使いやすく、エラーが発生しにくくなります。

4. forEach() の例:

例1:

配列を[1, 2, 3, 4, 5, 6, 7]とします。
配列.forEach(関数(項目,インデックス){
    console.log(item); //配列の各要素を出力します});

例2:

var 配列 = [1, 2, 3, 4, 5];
array.forEach(関数(項目, インデックス, 配列){
    配列[インデックス]=4 * 項目;
});
console.log(array); //出力結果: 元の配列要素が変更され、各要素が4倍になります

例3:

 <el-checkbox v-for="(item) in searchContent"
                       :label="アイテムID"
                       :key="アイテムID"
                       クラス="チェックボックス">
            <span>{{item.value}}{{item.checked}}</span>
          </el-チェックボックス>
  ハンドル(インデックス、行) {
        this.selectedCheck=[];
        a = this とします。
        this.jurisdiction = true;
        ロールID = 行ID;
        this.$http.get("/user/resources", {
            パラメータ: {userId: this.userId}
          }).then((応答) => {
          レスポンスボディ
          a.searchContent.forEach(関数(b) {
            if(b['チェック済み']){
              a.selectedCheck.push(b.id);
            }
          })
        })

例4:

var userList = 新しい配列();
        var データ = {};
        (response.data.userList != null && response.data.userList.length > 0)の場合{
          レスポンス.data.userList.forEach((item, index) => {

            データ.a = アイテム.a;
            データ.b = アイテム.b;
            data.arr1 = 新しい配列();
            データ.arr1[0] = アイテム.c;
            データ.arr1[1] = アイテム.d;
            データ.e = アイテム.e;
            データ.f = アイテム.f;
            data.arr2 = 新しい配列();
            データ.arr2[0] = アイテム.j;
            データ.arr2[1] = アイテム.h;
            ユーザーリストをプッシュします(データ);
          });
        }

例5:

searchDept(キーワード、コールバック) {
       if (キーワード) {
        this.$service.data
          .searchDepts({ データ: { フルネーム: キーワード } })
          .then(r => {
            if (r.Success) {
              arr = [] とします。
              r.Data.Result.forEach(要素 => {
                arr.push({
                  id: 要素.work_id、
                  値: 要素.full_name、
                  部門: 要素
                });
              });
              コールバック(arr);
            }
         });
      }
    },

要約する

Vue で必ず覚えておきたい forEach() の使い方についての記事はこれで終わりです。Vue forEach() の使い方に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue 配列トラバーサルメソッド forEach と map の原理分析と実用的応用の詳細な説明
  • Vue forEachループ配列を使用して必要なデータを取得します
  • vue-router beforEachを使用して、ユーザーログインジャンプルートフィルタリングを判断する機能を実装する
  • Vue.js の二重ネストされたトラバーサル メソッドの詳細な説明 (PHP foreach() に類似)

<<:  Ubuntu の仮想環境に Django をインストールする方法

>>:  正の整数かどうかを判断するMYSQLカスタム関数の例コード

推薦する

CSSスタイルのカスケーディングルールの詳細な説明

CSS スタイル ルール構文スタイルは、CSS の基本単位です。各スタイル ルールは、セレクターと宣...

CSS フィルターを使用してマウスオーバー効果を記述する例

CSSフィルターを使用してマウスオーバー効果を記述する <div class="fi...

nginxでgzip圧縮を有効にする手順を完了する

目次序文1. gzip圧縮を設定する2. 詳細設定3. nginxサービスを再起動する要約する序文ウ...

Vue で v-if と v-for を一緒に使用することが推奨されない理由の詳細な説明

この記事では主に、v-if と v-for を一緒に使用することが推奨されない理由を紹介します。詳細...

MySQL パフォーマンス チューニングについて知っておくべき 15 個の重要な変数 (要約)

序文: MYSQL は最も人気のある WEB バックエンド データベースです。最近、NOSQL がま...

Javascriptでシングルトンパターンを実装する方法

目次概要コードの実装シングルトンパターンの簡易版改良版プロキシバージョンシングルトンモード遅延シング...

CPU、マシンモデル、メモリなどの情報を表示するLinuxシステム

システムメンテナンス中は、いつでも CPU 使用率を確認し、対応する情報に基づいてシステムの状態を分...

MySQL 5.7 zip アーカイブ バージョンのインストール チュートリアル

この記事では、MySQL 5.7 zipアーカイブ版のインストールチュートリアルを参考までに紹介しま...

Vue3ナビゲーションバーコンポーネントのカプセル化実装方法

参考までに、Vue3でナビゲーションバーコンポーネントをカプセル化し、スクロールバーのスクロールに合...

IE で ClearType をオンにした後の透明フォントの問題の解決方法

IE で ClearType をオンにした後に発生する透明フォントの問題を解決するには、透明要素に背...

CD コマンドを使わずに Linux でディレクトリ/フォルダに入る方法

ご存知のとおり、cd コマンドがないと、Linux でディレクトリを切り替えることはできません。それ...

ラジオボタンと複数選択ボタンは画像を使用してスタイル設定されます

ラジオ ボタンや複数選択ボタンにスタイルを追加する方法や、ボタンを大きくする方法を尋ねる人を以前見か...

Vue を使用してパブリック アカウントの Web ページを開発する方法

目次プロジェクトの背景始めるvue-cliでプロジェクトを作成するモバイル適応についてnormali...

ツリー チャートの実装方法に関する Echarts チュートリアル

ツリーマップは主にツリーのようなデータ構造を視覚化するために使用され、特殊なタイプの階層です。これを...

K8Sの5つのコントローラーの紹介と使用

目次k8sのコントローラータイプポッドとコントローラの関係デプロイメント(ステートレスアプリケーショ...