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 をよろしくお願いいたします。

以下もご興味があるかもしれません: