1. 配列のよく使われる高階関数配列があり、その配列に対して次の操作を実行したいとします。
私たちは普段何をしているのでしょうか? <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <title>タイトル</title> </head> <本文> <div id="アプリ"> <p>100 未満の数値を検索します:</p> <p>100 未満のすべての数値を 2 倍します。</p> <p>すべての数字を合計します:</p> <button @click="getNum()">計算</button> </div> <script src="../js/vue.js"></script> <スクリプト> constアプリ = 新しいVue({ el: "#app", データ: { 数字: [10、20、100、30、320、55、80、210]、 番号1:0, 番号2:0, 番号3:0 }, メソッド: { getNum(){ // 1. 100未満の数値を探す let newNum1 = [] for(let num of this.nums) { (数値<100)の場合{ newNum1.push(数値) } } this.num1=新しいNum1 コンソール.log(新しい番号1) // 2. 100 * 2未満の数値の場合 newNum2 = [] とします for(let num of newNum1) { newNum2.push(数値 * 2) } this.num2 = 新しいNum2 コンソール.log(新しい番号2) // 3. 100 * 2 未満の数字を合計します。let newNum3 = 0; for(let num of newNum2) { 新しい数値3 += 数値 } this.num3 = 新しいNum3 コンソール.log(新しい番号3) } } }) </スクリプト> </本文> </html> 上記のデモでは、ループを使用して計算を実行し、最終的に目的の効果を実現しています。計算結果を表示するには、計算ボタンをクリックします。 jsの高階関数では、いくつかの高階関数は上記の効果を直接計算することができます。以下では主に3つの高階関数を紹介します。
1. フィルター機能filter() メソッドは新しい配列を作成します。元の配列の各要素はコールバック関数に渡されます。コールバック関数には戻り値があります。戻り値が true の場合、要素は新しい配列に保存されます。戻り値が false の場合、要素は新しい配列に保存されません。元の配列は変更されません。
例1: 配列内の100未満の要素を返す getNums() { // フィルターの使い方を見てみましょう let num1 = [10, 20, 100, 30, 320, 55. 80, 210] newNum1 = this.nums.filter(function (num) { 数値 < 100 を返します。 }) コンソール.log(新しい番号1) }
例 2: フィルターを使用すると、配列から重複する要素を巧みに削除できます。 filter() によって受信されるコールバック関数には、実際には複数のパラメータが含まれる場合があります。通常は、配列の要素を表す最初のパラメータのみを使用します。コールバック関数は、要素の位置と配列自体を示す 2 つの追加パラメータも受け取ることができます。 数値を[10, 20, 100, 30, 320, 55, 80, 210, 20, 55, 320]とします。 newNum2 = this.nums.filter(function(要素, インデックス, self) { self.indexOf(要素) == インデックスを返す }) 運用結果
重複要素の削除は、indexOf が常に最初の要素の位置を返すという事実に依存します。後続の重複要素の位置は indexOf によって返される位置と同じではないため、フィルターによって除外されます。 2. マップ機能このメソッドは新しい配列を返します。各要素は、各要素に対して関数を呼び出した後の元の配列の値です。空の配列は編集されず、元の配列は変更されません。
例1: 配列内のすべての要素を2倍した後の配列を見つける 数値を[10, 20, 100, 30, 320, 55, 80, 210, 20, 55, 320]とします。 newNum1 = this.nums.map(function (num) { 数値 * 2 を返します。 }) コンソール.log(新しい番号1) 出力:
3. 機能の削減Reduce() メソッドは、関数をアキュムレータとして受け取ります。Reduce は、配列内の各要素に対してコールバック関数を順番に実行します。削除された配列内の要素や値が割り当てられていない要素は処理されません。
例1: 配列の合計を求める // 削減の使い方 let nums = [10, 20, 100, 30, 320, 55, 80, 210, 20, 55, 320] newNum1 = this.nums.reduce(関数 (total, num) { 数値 + 合計を返します。 }, 0) コンソール.log(新しい番号1) 2. 包括的ケース1filter、map、reduce の 3 つの関数を組み合わせて、配列内の 100 未満の要素を取得し、これらの要素に *5 を掛けて、最後に *5 以降のすべての要素の合計を計算します。 // 削減の使い方 let nums = [10, 20, 100, 30, 320, 55, 80, 210, 20, 55, 320] newNum1 = this.nums.filter(function (number) { 戻り値 < 100 }).map(関数(数値) { 戻り値 * 5 }).reduce(関数(合計、数値) { 数値 + 合計を返します。 }, 0) コンソール.log(新しい番号1)
実際、より単純なアルゴリズム、ラムダ式がある。 // 削減の使い方 let nums = [10, 20, 320] newNum11 = とする nums.filter(num => num < 100).map(num => num * 5, this).reduce((total, num) => total + num) コンソール.log(新しい番号11)
3. 包括的ケース2リストを表示し、色が変わるものを選択し、vueを使用して実装します 2 分間考えて、どのように設計するかを検討してください。 Vueではこのプロセスは非常にシンプルになります
コードは次のとおりです。 <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <title>タイトル</title> <スタイル> 。アクション { 色: 赤; } </スタイル> </head> <本文> <div id="アプリ"> <ul> <li v-for="(item, index) 言語内" :class="{action:isCurrentIndex == index}" @click="changeCurrentIndex(index)"> {{index}}--{{item}}</li> </ul> </div> <script src="../js/vue.js"></script> <スクリプト> var アプリ = 新しい Vue({ el: "#app", データ: { 言語: ["java", "php", "python", "go", "c言語"], 現在のインデックス:0 }, メソッド: { 現在のインデックスを変更する(インデックス) { this.isCurrentIndex = インデックス } } }); </スクリプト> </本文> </html> IV. 包括的ケース3次の内容のテーブルを作成する必要があります。 主なものは何ですか?
このコードが、前に学んだjsの高階関数と組み合わせてどのように実装されているかを見てみましょう。 ステップ1: n冊の本を定義し、vueのデータ属性に配置するデータ: { 書籍: {name:"Java デザイン パターン", publishDate:"1998-10-21", 価格: 58.00, 数: 1}, {name:"Go 言語実践分析", publishDate:"2018-5-12", price: 70.00, count: 1}, {name:"vue は理解しやすい", publishDate:"2019-08-09", price: 46.89, count: 1}, {name:"jquery in action", publishDate:"2014-02-29", price: 39.98, count: 1} ]、 合計: 0 }, 計算された合計価格を保存するために合計価格を定義します ステップ2: テーブルを描く<div id="アプリ"> <表の境界線="1"> <頭> <tr> <td>シリアル番号</td> <td>書籍名</td> <td>発行日</td> <td>価格</td> <td>購入数量</td> <td>操作</td> </tr> </thead> <tbody v-if="本.length==0"> <tr> <td colspan="6" >データなし</td> </tr> </tbody> <tbody v-else> <tr v-for="(item, index) 書籍内" > <td>{{インデックス+1}}</td> <td>{{アイテム名}}</td> <td>{{item.publishDate}}</td> <td>{{item.price| 価格単位}} </td> <td> <button @click="sub(index)">-</button> {{item.count}} <button @click="add(index)">+</button> </td> <td> <button @click="del(index)">削除</button> </tr> </tbody> </テーブル> <label id="sum">合計価格: {{getTotal() | priceUnit}} </label> </div> ここでは、データをループし、価格を処理し、単位を追加し、数量を増減するためのボタンを追加します。最後に、削除関数を定義します。 ステップ3. フィルターを使用して価格をフォーマットする価格をフォーマットするときは、パイプ文字を使用します。これがフィルターの書き方です。フィルター前の価格は 58 です。フィルターを追加した後は、価格は $58.00 となり、ドル記号が追加され、価格は小数点以下 2 桁に丸められます。 単位の追加は複数の場所で使用されるため、メソッドとして定義します。 フィルター: 価格単位(価格) { "$" + price.toFixed(2) を返す } } フィルターの書き方の定義は次のとおりです。メソッドと似ています。メソッドはその中で定義されます。実際、このメソッドはメソッド内に配置できますか? はい、できますが、フィルター内に配置することには利点があります。パイプ文字を使用して記述できます。 <td>{{item.price | 価格単位}} </td> フィルターを使用すると、|の前の値がpriceUnitにパラメータとして自動的に渡されます。 ステップ4: 本の数を増減する方法を定義します。その数は0未満にはなりません。サブ(インデックス) { this.books[index].count <= 0 の場合 this.books[インデックス].count = 0; } それ以外 { this.books[インデックス].count --; } }, 追加(インデックス) { this.books[インデックス].count++; }, これについてはあまり言いませんが、通常の関数の書き方です ステップ5: 合計金額を計算する合計金額を計算する方法はたくさんあります。従来の方法は 合計を取得します(){ 合計価格を 0 とします。 for(i = 0; i < this.books.length; i++) { 合計価格 += this.books[i].price * this.books[i].count; } 合計価格を返します。 }, 本をループし、価格と数量の合計を jsの高階関数を使用することをお勧めします 合計を取得します(){ // 配列の高階関数を使用して各書籍の合計価格を計算します。 return this.books.map((book)=>book.price * book.count).reduce((total,num) => total + num) }, レビュー中 Map は配列の各要素に対して操作を実行します。 Reduceは配列内のすべての要素を合計する ステップ6: 表の行を削除するdel(インデックス){ this.books.splice(インデックス,1) } 行を削除するには、splice を使用して、指定されたデータ内の要素を削除します。 Vue のよく使われる高階関数と包括的なケースに関するこの記事はこれで終わりです。より関連性の高い Vue のよく使われる高階関数と例については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
>>: MySQL イベント スケジューラに関するよくある話 (必読)
1. ディスプレイボックス;要素にこのプロパティを設定すると、display:inline-bloc...
MySQL 5.7.19のインストールを例に挙げると、まずダウンロードしますもちろん、最初に行うこと...
docker-maven-plugin プラグインを使用する場合、Maven は対応する jar パ...
注意: 計画、設計、開発のいずれの場合でも、これらの間違いは避けなければなりません。 1. ナビゲー...
まず、イメージをプルします(またはコンテナを作成するだけで、自然にプルされます)。 docker p...
最新の Ubuntu Server バージョンを使用している場合、ようこそメッセージに、Ubuntu...
序文最近、レポート機能に取り組んでいたのですが、ある月に各部署に入社した人と退職した人の数をカウント...
目次JavaScript 改ざん防止オブジェクト1. 拡張不可能なオブジェクト2. 封印された物体3...
最初のステップ組み込みのパッケージ管理機能で一度削除する yum 削除 nodejs npm -y ...
目次質問1件2つの方法3 実験結果と考察質問1件ご存知のとおり、 Pycharm 、 IDLE 、 ...
序文多くの MySQL テスト シナリオでは、テスト用に一部のテスト データを手動で生成する必要があ...
MySQLではisnull()関数をnull値の代わりとして使用することはできません。次のように:ま...
Docker の作成Compose の紹介Compose は、マルチコンテナ Docker アプリケ...
この記事の例では、ユーザー登録インターフェース機能を実装するためのJSの具体的なコードを参考までに共...
以前は、角を丸くするのは非常に面倒でしたが、CSS3 では、角を丸くするのは非常に簡単になり、bor...