Vue でよく使われる高階関数と包括的な例

1. 配列のよく使われる高階関数

配列があり、その配列に対して次の操作を実行したいとします。

100 未満の数を見つけます。
100 未満のすべての数値を 2 倍します。
2 を基準にして、すべての数字を合計します。

私たちは普段何をしているのでしょうか？

<!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 の場合、要素は新しい配列に保存されません。元の配列は変更されません。

構文: array.filter(function(currentValue,index,arr), thisValue)
パラメータ

例1: 配列内の100未満の要素を返す

getNums() {
 // フィルターの使い方を見てみましょう let num1 = [10, 20, 100, 30, 320, 55. 80, 210]
 newNum1 = this.nums.filter(function (num) {
  数値 < 100 を返します。
 })
 コンソール.log(新しい番号1)
}

filter()関数の入力パラメータは関数であり、出力パラメータは新しい配列である。
この関数にはパラメータもあり、ここでは最初のパラメータのみが渡されます。これはループ時の配列要素を意味します。
関数の戻り値の型は true または false です。戻り結果が true の場合、要素は新しい配列内にあることを意味します。戻り結果が false の場合、要素は新しい配列内にないことを意味します。

例 2: フィルターを使用すると、配列から重複する要素を巧みに削除できます。

filter() によって受信されるコールバック関数には、実際には複数のパラメータが含まれる場合があります。通常は、配列の要素を表す最初のパラメータのみを使用します。コールバック関数は、要素の位置と配列自体を示す 2 つの追加パラメータも受け取ることができます。

数値を[10, 20, 100, 30, 320, 55, 80, 210, 20, 55, 320]とします。
newNum2 = this.nums.filter(function(要素, インデックス, self) {
 self.indexOf(要素) == インデックスを返す
})

運用結果

[10、20、100、30、320、55、80、210]

重複要素の削除は、indexOf が常に最初の要素の位置を返すという事実に依存します。後続の重複要素の位置は indexOf によって返される位置と同じではないため、フィルターによって除外されます。

2. マップ機能

このメソッドは新しい配列を返します。各要素は、各要素に対して関数を呼び出した後の元の配列の値です。空の配列は編集されず、元の配列は変更されません。

構文: array.every(function(item,index,array）{})
パラメータ:

例1: 配列内のすべての要素を2倍した後の配列を見つける

数値を[10, 20, 100, 30, 320, 55, 80, 210, 20, 55, 320]とします。
newNum1 = this.nums.map(function (num) {
 数値 * 2 を返します。
})

コンソール.log(新しい番号1)

出力：

[20、40、200、60、640、110、160、420、40、110、640]

3. 機能の削減

Reduce() メソッドは、関数をアキュムレータとして受け取ります。Reduce は、配列内の各要素に対してコールバック関数を順番に実行します。削除された配列内の要素や値が割り当てられていない要素は処理されません。

構文: arr.reduce(callback,[initialValue])
パラメータ

例1: 配列の合計を求める

// 削減の使い方 let nums = [10, 20, 100, 30, 320, 55, 80, 210, 20, 55, 320]
newNum1 = this.nums.reduce(関数 (total, num) {
 数値 + 合計を返します。
}, 0)
コンソール.log(新しい番号1)

2. 包括的ケース1

filter、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)

出力: 1220

実際、より単純なアルゴリズム、ラムダ式がある。

// 削減の使い方 let nums = [10, 20, 320]
newNum11 = とする
nums.filter(num => num < 100).map(num => num * 5, this).reduce((total, num) => total + num)
コンソール.log(新しい番号11)

実行結果: 150

3. 包括的ケース2

リストを表示し、色が変わるものを選択し、vueを使用して実装します

2 分間考えて、どのように設計するかを検討してください。

Vueではこのプロセスは非常にシンプルになります

ステップ 1: 現在選択されている要素のインデックスを記録するために isCurrentIndex を定義します。
ステップ 2: クラス属性で isCurrentIndex == index を設定します。これは、選択された要素の添え字が赤で表示され、他の要素は赤で表示されないことを意味します。
ステップ3: クリックイベントを定義し、イベントがクリックされるたびに選択されたインデックス値を変更します。

コードは次のとおりです。

<!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

次の内容のテーブルを作成する必要があります。

主なものは何ですか?

本は n 冊あり、それぞれの本にはタイトル、発行日、価格、数量、操作方法があります。
価格は小数点第2位まで切り上げ、数量は増減可能、最大減額は0となります。
この操作によりテーブルを削除できます。テーブルにデータがない場合、「データなし」と表示されます。
いつでも合計金額を計算できます。

このコードが、前に学んだ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 を応援していただければ幸いです。

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

Vue配列のレスポンシブ操作と高階関数の使用コードの詳細な説明
vue-simple-uploader をベースに、ファイルセグメントアップロード、インスタントアップロード、ブレークポイント再開のグローバルアップロードプラグイン機能をカプセル化します。
vite を使用して vue3 アプリケーションを構築する方法
Vue3.0 + TypeScript + Vite初体験の詳しい説明

<<: dockerプライベート倉庫の構築と利用の詳細説明

>>: MySQL イベントスケジューラに関するよくある話 (必読)