序文フロントエンド開発では、目的のコンテンツを取得するためにループをトラバースする必要がある状況に頻繁に遭遇します。この状況は開発のいたるところで見られます。このブログ投稿では、より一般的で古典的な知識ポイントである 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() 構文
例:
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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Ubuntu の仮想環境に Django をインストールする方法
>>: 正の整数かどうかを判断するMYSQLカスタム関数の例コード
CSS スタイル ルール構文スタイルは、CSS の基本単位です。各スタイル ルールは、セレクターと宣...
CSSフィルターを使用してマウスオーバー効果を記述する <div class="fi...
目次序文1. gzip圧縮を設定する2. 詳細設定3. nginxサービスを再起動する要約する序文ウ...
この記事では主に、v-if と v-for を一緒に使用することが推奨されない理由を紹介します。詳細...
序文: MYSQL は最も人気のある WEB バックエンド データベースです。最近、NOSQL がま...
目次概要コードの実装シングルトンパターンの簡易版改良版プロキシバージョンシングルトンモード遅延シング...
システムメンテナンス中は、いつでも CPU 使用率を確認し、対応する情報に基づいてシステムの状態を分...
この記事では、MySQL 5.7 zipアーカイブ版のインストールチュートリアルを参考までに紹介しま...
参考までに、Vue3でナビゲーションバーコンポーネントをカプセル化し、スクロールバーのスクロールに合...
IE で ClearType をオンにした後に発生する透明フォントの問題を解決するには、透明要素に背...
ご存知のとおり、cd コマンドがないと、Linux でディレクトリを切り替えることはできません。それ...
ラジオ ボタンや複数選択ボタンにスタイルを追加する方法や、ボタンを大きくする方法を尋ねる人を以前見か...
目次プロジェクトの背景始めるvue-cliでプロジェクトを作成するモバイル適応についてnormali...
ツリーマップは主にツリーのようなデータ構造を視覚化するために使用され、特殊なタイプの階層です。これを...
目次k8sのコントローラータイプポッドとコントローラの関係デプロイメント(ステートレスアプリケーショ...