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カスタム関数の例コード

推薦する

jsはCanvasを使用して複数の画像を1つの実装コードにマージします

解決 関数 mergeImgs(リスト) { const imgDom = document.cre...

MySQLの基本操作学習ノートテーブル

テーブルを作成テーブルテーブル名を作成create table if not exists 表名 m...

MySQL で単一のフィールド内の複数の値を分割および結合する方法

複数の値を組み合わせて表示これで、図1から図2に示す要件が揃いました。 どうやってやるんですか?次の...

JSブラウザストレージの詳しい説明

目次導入クッキークッキーとはクッキー生成方法クッキーの適用シナリオクッキーのデメリット回避策ローカル...

MySQLは効率的なインデックス例分析を確立する

この記事では、例を使用して、MySQL で効率的なインデックスを作成する方法について説明します。ご参...

MySQL における IF()、IFNULL()、NULLIF()、および ISNULL() 関数の使用に関する詳細な説明

MySQL では、IF()、IFNULL()、NULLIF()、および ISNULL() 関数を使用...

曇り空のアイコン効果を実現する純粋な CSS

効果効果は以下のとおりです​実装のアイデアbox-shadow プロパティを使用して、複数の灰色の円...

エンタープライズプロダクション MySQL 最適化入門

Oracle、DB2、SQL Server などの他の大規模データベースと比較すると、MySQL に...

Dockerコンテナの中国語言語パックの設定の問題を解決する

Dockerでdocker search centosを使用する場合docker pull dock...

EF (Entity Framework) の挿入または更新データ エラーの解決方法

エラー メッセージ:ストアの更新、挿入、または削除ステートメントが予期しない行数 (0) に影響を与...

Vue ショッピングカートのケーススタディ

目次1. ショッピングカートの例2. コードの実装3. まとめ1. ショッピングカートの例一連の学習...

SQL IDENTITY_INSERT ケーススタディ

一般的に、データ テーブル内の列を ID 列として設定すると、ID 列の表示値を手動で ID 列に挿...

HTML テーブル マークアップ チュートリアル (22): 行の境界線の色属性 BORDERCOLORLIGHT

行内では、明るい境界線の色を個別に定義できます。基本的な構文<TR ボーダーカラーライト=co...