vue常用高次関数及び総合事例

10332 ワード
vue 高次関数
一.一般的な配列の高次関数
行列があると仮定して、次のような列を作ります。
  • 、100未満の数字を見つける：
  • は100以下の数字を2:
    • を乗じます。
  • は2の基礎の上で、すべての数に対して合計を求めます：
    • 普通はどうしますか？
    
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
<div id="app">
 <p>    100   :</p>
 <p>   100   ,     2: </p>
 <p>      :</p>

 <button @click="getNum()">  </button>
</div>

<script src="../js/vue.js"></script>
<script>
 const app = new Vue({
  el: "#app",
  data: {
   nums: [10, 20, 100, 30, 320, 55, 80, 210],
   num1:0,
   num2:0,
   num3:0
  },
  methods: {
   getNum(){
    // 1.   <100   
    let newNum1 = []
    for(let num of this.nums) {
     if (num < 100) {
      newNum1.push(num)
     }
    }
    this.num1=newNum1
    console.log(newNum1)


    // 2.    100   *2
    let newNum2 = []
    for(let num of newNum1) {
     newNum2.push(num * 2)
    }
    this.num2 = newNum2
    console.log(newNum2)

    // 3.    100   *2   
    let newNum3 = 0;
    for(let num of newNum2) {
     newNum3 += num
    }
    this.num3 = newNum3
    console.log(newNum3)
   }
  }
 })
</script>
</body>
</html>
    上記のデモの中で、私達は全部サイクルを使って計算して、そして最後に私達が欲しい効果を達成しました。計算ボタンをクリックして、計算結果を調べます。

    js高次関数の中には，いくつかの高次関数が直接計算して上の効果を得ることができます。ここでは主に三つの高次関数を紹介します。
  • filter
  • map
  • レデュース
    • 1.filter関数
    filter()メソッドは新しい配列を作成します。元の配列の各要素はコールバック関数に入ってきます。コールバック関数にはリターン値があります。戻り値がtrueなら、この要素は新しい配列に保存されます。戻り値がfalseの場合、要素は新しい配列に保存されません。元の配列は変更されません。
  • 文法：array.filter（function）
  • パラメータ

    • 例1:行列に戻る<100の要素
    
getNums() {
 //    filter   　　 let num1 = [10 ,20, 100, 30, 320, 55. 80, 210]
 let newNum1 = this.nums.filter(function (num) {
  return num < 100;
 })
 console.log(newNum1)
}
  • filter()関数の入力はfunctionであり、新規配列
    • である。
  • function関数も参照してください。ここでは最初のエントリのみが導入されています。ループオーバー時の配列要素を表しています。
  • functionの戻り値タイプはtrueまたはfalseであり、戻り値がtrueであれば、この要素が新しい配列に戻り、戻り値がfalseであれば、新しい配列に戻ります。
    例2：filterを利用して、Arayの重複要素を巧みに除去することができる：
    filter（）受信のコールバック関数は、複数のパラメータがあります。通常は最初のパラメータのみを使用して、Arayのある要素を表します。コールバック関数はまた、要素の位置および配列自体を表す他の2つのパラメータを受信することができる。
    
let nums = [10, 20, 100, 30, 320, 55, 80, 210, 20, 55, 320]
let newNum2 = this.nums.filter(function(element, index, self) {
 return self.indexOf(element) == index
})
    実行結果
    [10,20,100,30,320,55,80,210]
    重複要素の除去に依存するのはindexOfであり、常に最初の要素の位置に戻り、後続の重複要素の位置はindexOfの戻り位置と等しくないので、filterによってフィルタリングされた。
    2.map関数
    方法は新しい配列を返します。新しい配列の各要素は元の配列に対応しています。各要素が関数を呼び出して処理した後の値です。空の配列は編集されません。元の配列は変更されません。
  • 文法：array.every(function)
  • パラメータ：

    • 例1：行列のすべての要素*2の後の配列を求めます。
    
let nums = [10, 20, 100, 30, 320, 55, 80, 210, 20, 55, 320]
let newNum1 = this.nums.map(function (num) {
 return num * 2;
})

console.log(newNum1)
    出力結果:
    [20,40,200,60,640,110,160,420,40,110,640]
    3.reduce関数
    reduce()メソッドは、アキュムレータとして関数を受信し、reduceは、配列内の各要素に対して順次、コールバック関数を実行し、配列内で削除されたり、割り当てられていない要素は処理されません。
  • 文法：arr.reduce（calback，[initial Value]）
  • パラメータ

    • 実例1：行列の和を求めます。
    
// reduce   
let nums = [10, 20, 100, 30, 320, 55, 80, 210, 20, 55, 320]
let newNum1 = this.nums.reduce(function (total, num) {
 return num + total;
}, 0)
console.log(newNum1)
    二.総合判例1
    filter、map、reduceの3つの関数を結合して、配列の中で<100の元素を獲得して、それからこれらの元素に対して*5に賛成して、最後に*5の後のすべての元素の和を求めます。
    
// reduce   
let nums = [10, 20, 100, 30, 320, 55, 80, 210, 20, 55, 320]
let newNum1 = this.nums.filter(function (number) {
 return number < 100
}).map(function (number) {
 return number * 5
}).reduce(function (total, num) {
 return num + total;
}, 0)
console.log(newNum1)
    出力結果：1220
    もっと簡単なアルゴリズムもあります。
    
// reduce   
let nums = [10, 20, 320]
let newNum11 =
nums.filter(num => num < 100).map(num => num * 5, this).reduce((total, num) => total + num)
console.log(newNum11)
    実行結果：150
    三.総合判例2
    リストを表示して、その色を選択して、vueを使って実現します。

    二分間考えてみてもいいです。どうやってデザインしますか？
    vueでは、このプロセスは非常に簡単です。
  • 第1ステップ：現在選択されている要素を記録するためのisCurrenntIndexを定義しました。
  • 第二ステップ：class属性に設定：isCurrenntIndex==index.選択された要素の下付き表示は赤色で、他は赤ではない。
  • 第3ステップ：clickイベントを定義し、イベントをクリックするたびに、選択した下付き値
    • を修正する。
    コードは以下の通りです
    
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
  .action {
   color: red;
  }
 </style>
</head>
<body>
<div id="app">
 <ul>
  <li v-for="(item, index) in languages" :class="{action:isCurrentIndex == index}" @click="changeCurrentIndex(index)"> {{index}}--{{item}}</li>
 </ul>
</div>

<script src="../js/vue.js"></script>
<script>
 var app = new Vue({
  el: "#app",
  data: {
   languages: ["java", "php", "python", "go", "c  "],
   isCurrentIndex:0
  },
  methods: {
   changeCurrentIndex(index) {
    this.isCurrentIndex = index
   }
  }
 });
</script>
</body>
</html>
    四.総合判例3
    私たちは表を作りたいです。具体的な内容は次の通りです。

    主にどんなものがありますか？
  • はn冊の本があって、本の名前があって、出版の期日、価格、数量、操作の
  • 価格は2桁の小数を保留して、数量は増減することができて、最大で0まで減らして、
  • 操作でテーブルを削除できます。テーブルにデータがない場合はデータがないと表示されます。
  • いつでも総価格を計算します。
    • このコードがどのように実現されるかを見てみましょう。これは前に習ったjs高次関数と結合します。
    第一歩：n冊の本を定義して、vueのdata属性の中に入れます。
    
data: {
 books: [
  {name:"java    ", publishDate:"1998-10-21", price: 58.00, count: 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  ", publishDate:"2014-02-29", price: 39.98, count: 1}
 ],
 total: 0
},
    総価格を定義して、計算後の総価格を保存します。
    ステップ2：テーブルを描く
    
<div id="app">
 <table border="1">
  <thead>
   <tr>
    <td>  </td>
    <td>  </td>
    <td>    </td>
    <td>  </td>
    <td>    </td>
    <td>  </td>
   </tr>
  </thead>

  <tbody v-if="books.length==0">
   <tr>
    <td colspan="6" >    </td>
   </tr>
  </tbody>

  <tbody v-else>
   <tr v-for="(item, index) in books" >
    <td>{{index+1}}</td>
    <td>{{item.name}}</td>
    <td>{{item.publishDate}}</td>
    <td>{{item.price| priceUnit}} </td>
    <td>
     <button @click="sub(index)">-</button>
     {{item.count}}
     <button @click="add(index)">+</button>
    </td>
    <td>
     <button @click="del(index)">  </button>
   </tr>
  </tbody>
 </table>
 <label id="sum">  : {{getTotal() | priceUnit}} </label>
</div>
    ここではデータを巡回して価格を処理し、単位を増やし、数を増減させたブットンを追加しました。最後に削除機能を定義しました。
    ステップ3.フィルタを使って価格を書式設定する
    価格をフォーマットする時、パイプを使っています。フィルタを入れない前に価格は58です。フィルタを入れた後は58.00です。ドル記号を追加しました。価格は2桁の小数を残しています。
    一つのところだけではなく、単位を加えることができるので、一つの方法として定義します。次のように書きます。
    
filters: {
 priceUnit(price) {
  return "$" + price.toFixed(2)
 }
}
    フィルタの書き方を定義します。methodsに似ています。方法を定義します。この方法はmethodsに入れてもいいですか？いいですが、filtersに置くといいです。パイプの書き方が使えます。
    
<td>{{item.price | priceUnit}} </td>
    フィルタを使用すると、自動的に前の値をパラメータとしてprceUnitに渡すことができます。
    第四ステップ：methodsを定義し、図書の数量を増減し、かつ少なくしても0を下回ってはいけない。
    
sub(index) {
 if (this.books[index].count <= 0) {
  this.books[index].coun = 0;
 } else {
  this.books[index].count --;
 }
},
add(index) {
 this.books[index].count ++;
},
    これは多くなくて、普通の関数の書き方です。
    第五ステップ：総額計算
    計算総額にはいろいろな書き方があります。
    
getTotal() {
 let totalPrice = 0;
 for(let i = 0; i < this.books.length; i++) {

  totalPrice += this.books[i].price * this.books[i].count;
 }
 
 return totalPrice;
},
    book sを巡回して、価格と数量の積の和
    jsの高次関数の使用を推奨します。
    
getTotal() {
 //                    
 return this.books.map((book)=>book.price * book.count).reduce((total,num) => total + num)
},
    振り返ってみます
    mapは、配列の各要素に対して動作します。
    reduceは配列中のすべての要素に対する合計です。
    ステップ6：表の行を削除します。
    
del(index){
 this.books.splice(index,1)
}
    行を削除し、指定したdataの要素をspliceで削除すればいいです。
    ここで、vueに関する一般的な高次関数と総合事例についての記事を紹介します。より多くの関連するvueは高次関数と実例の内容を常用しています。私たちの以前の文章を検索してください。
    Sql Server触発器の使用
    オリジナルJS実現音楽プレーヤーのコード例