欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue常用高階函數(shù)及綜合實(shí)例

 更新時(shí)間：2021年02月25日 14:21:09   作者：盛開的太陽  
這篇文章主要介紹了vue常用高階函數(shù)及綜合案例，文章內(nèi)容講解的很清晰，有對(duì)于這方面感興趣的同學(xué)可以研究下

一. 常用的數(shù)組的高階函數(shù)

假設(shè), 現(xiàn)在有一個(gè)數(shù)組, 我們要對(duì)數(shù)組做如下一些列操作

  1. 找出小于100的數(shù)字:
  2. 將小于100的數(shù)字, 全部乘以2:
  3. 在2的基礎(chǔ)上, 對(duì)所有數(shù)求和:

通常我們會(huì)怎么做呢?

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
<div id="app">
 <p>找出小于100的數(shù)字:</p>
 <p>將小于100的數(shù)字, 全部乘以2: </p>
 <p>對(duì)所有數(shù)求和:</p>

 <button @click="getNum()">計(jì)算</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的數(shù)字
    let newNum1 = []
    for(let num of this.nums) {
     if (num < 100) {
      newNum1.push(num)
     }
    }
    this.num1=newNum1
    console.log(newNum1)


    // 2. 對(duì)小于100的數(shù)字*2
    let newNum2 = []
    for(let num of newNum1) {
     newNum2.push(num * 2)
    }
    this.num2 = newNum2
    console.log(newNum2)

    // 3. 對(duì)小于100的數(shù)字*2后求和
    let newNum3 = 0;
    for(let num of newNum2) {
     newNum3 += num
    }
    this.num3 = newNum3
    console.log(newNum3)
   }
  }
 })
</script>
</body>
</html>

在上面的demo中, 我們?nèi)慷际鞘褂醚h(huán)來進(jìn)行計(jì)算, 并且最后達(dá)到了我們想要的效果. 點(diǎn)擊計(jì)算按鈕, 查看計(jì)算結(jié)果:

在js高階函數(shù)里面, 有一些高階函數(shù)是可以直接計(jì)算得到上面的效果的. 下面主要介紹三個(gè)高階函數(shù)

  • filter
  • map
  • reduce

1. filter函數(shù)

filter()方法會(huì)創(chuàng)建一個(gè)新數(shù)組，原數(shù)組的每個(gè)元素傳入回調(diào)函數(shù)中，回調(diào)函數(shù)中有return返回值，若返回值為true，這個(gè)元素保存到新數(shù)組中；若返回值為false，則該元素不保存到新數(shù)組中；原數(shù)組不發(fā)生改變。

  • 語法: array.filter(function(currentValue,index,arr), thisValue)
  • 參數(shù)

　　

舉例1: 返回?cái)?shù)組中<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()函數(shù)的入?yún)⑹且粋€(gè)function, 出參是一個(gè)新的數(shù)組
  • function函數(shù)也有參, 這里只傳入了第一個(gè)入?yún)? 表示: 循環(huán)遍歷時(shí)的數(shù)組元素.
  • function的返回值類型是true或false, 如果返回結(jié)果是true, 則返回新數(shù)組中有這個(gè)元素, 返回結(jié)果是false, 則返回新數(shù)組中沒有這個(gè)元素

舉例2:利用filter，可以巧妙地去除Array的重復(fù)元素：

filter()接收的回調(diào)函數(shù)，其實(shí)可以有多個(gè)參數(shù)。通常我們僅使用第一個(gè)參數(shù)，表示Array的某個(gè)元素?；卣{(diào)函數(shù)還可以接收另外兩個(gè)參數(shù)，表示元素的位置和數(shù)組本身：

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
})

運(yùn)行結(jié)果

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

去除重復(fù)元素依靠的是indexOf總是返回第一個(gè)元素的位置，后續(xù)的重復(fù)元素位置與indexOf返回的位置不相等，因此被filter濾掉了。

2. map函數(shù)

方法返回一個(gè)新數(shù)組，新數(shù)組中的每一個(gè)元素為原始數(shù)組對(duì)應(yīng)每一個(gè)元素調(diào)用函數(shù)處理后的值；不會(huì)對(duì)空數(shù)組進(jìn)行編輯，不改變?cè)瓉淼臄?shù)組。

  • 語法:array.every(function(item,index,array）{})
  • 參數(shù):

　　　　

舉例1: 求數(shù)組中所有元素*2后的數(shù)組

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)

輸出結(jié)果:

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

3. reduce函數(shù)

reduce() 方法接收一個(gè)函數(shù)作為累加器,reduce 為數(shù)組中的每一個(gè)元素依次執(zhí)行回調(diào)函數(shù)，數(shù)組中被刪除或從未被賦值的元素不處理.

  • 語法:arr.reduce(callback,[initialValue])
  • 參數(shù)

案例1: 求一個(gè)數(shù)組的和

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

結(jié)合filter, map, reduce三個(gè)函數(shù), 獲取數(shù)組中<100的元素, 然后對(duì)這些元素同意*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)

輸出結(jié)果: 1220

其實(shí)還有更簡(jiǎn)單的算法, lambda表達(dá)式

// 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)

執(zhí)行結(jié)果: 150

三.綜合案例2

顯示一個(gè)列表, 選中那個(gè)那個(gè)變色, 使用vue實(shí)現(xiàn)

可以思考兩分鐘, 看看, 如何來設(shè)計(jì).

在vue中, 這個(gè)過程將非常簡(jiǎn)單

  • 第一步: 定義了一個(gè)isCurrentIndex用來記錄當(dāng)前選中元素的下標(biāo).
  • 第二步: 在class屬性中設(shè)置 :isCurrentIndex == index. 表示選中元素的下標(biāo)顯示紅色, 其他不顯示紅色.
  • 第三步: 定義一個(gè)click事件, 每次點(diǎn)擊事件, 修改選中的下標(biāo)值

代碼如下所示:

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

我們要做一個(gè)表格, 具體內(nèi)容如下

主要有哪些東西呢?

  1. 有n本書, 書有書名, 出版日期, 價(jià)格, 數(shù)量, 操作
  2. 價(jià)格保留兩位小數(shù), 數(shù)量可增減, 最多減到0,
  3. 操作可以刪除表格 ,當(dāng)表格沒有數(shù)據(jù)時(shí)顯示無數(shù)據(jù)
  4. 隨時(shí)計(jì)算總價(jià)格.

下面來看看這個(gè)代碼如何實(shí)現(xiàn), 結(jié)合我們之前學(xué)過的js高階函數(shù)

第一步: 定義了n本書, 放在vue的data屬性里面

data: {
 books: [
  {name:"java設(shè)計(jì)模式", publishDate:"1998-10-21", price: 58.00, count: 1},
  {name:"go語言實(shí)戰(zhàn)分析", publishDate:"2018-5-12", price: 70.00, count: 1},
  {name:"vue深入淺出", publishDate:"2019-08-09", price: 46.89, count: 1},
  {name:"jquery實(shí)戰(zhàn)", publishDate:"2014-02-29", price: 39.98, count: 1}
 ],
 total: 0
},

定義了一個(gè)總價(jià)格, 用來保存計(jì)算后的總價(jià)格

第二步: 畫table

<div id="app">
 <table border="1">
  <thead>
   <tr>
    <td>序號(hào)</td>
    <td>書名</td>
    <td>出版日期</td>
    <td>價(jià)格</td>
    <td>購買數(shù)量</td>
    <td>操作</td>
   </tr>
  </thead>

  <tbody v-if="books.length==0">
   <tr>
    <td colspan="6" >沒有數(shù)據(jù)</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">總價(jià): {{getTotal() | priceUnit}} </label>
</div>

在這里我們循環(huán)遍歷了data數(shù)據(jù), 然后對(duì)價(jià)格進(jìn)行了處理, 增加了單位, 對(duì)數(shù)量增加了增減的button. 最后定義了一個(gè)刪除功能

第三步. 使用過濾器格式化價(jià)格

在對(duì)價(jià)格進(jìn)行格式化的時(shí)候, 使用了管道符.這是過濾器的寫法. 不加過濾器之前, 價(jià)格是58. 加了過濾器之后是: $58.00, 增加了一個(gè)美元符號(hào), 價(jià)格保留兩位小數(shù)

因?yàn)椴恢褂幸粋€(gè)地方會(huì)用到加單位, 所以, 我們將其定義為一個(gè)方法. 如下寫法

filters: {
 priceUnit(price) {
  return "$" + price.toFixed(2)
 }
}

這里定義了過濾器的寫法. 類似于methods. 里面定義一個(gè)方法. 其實(shí)這個(gè)方法可不可以放在methods中呢? 也可以, 但是放在filters有一個(gè)好處. 可以使用管道符寫法

<td>{{item.price | priceUnit}} </td>

使用過濾器, 會(huì)自動(dòng)將 | 前面的值作為參數(shù)傳遞給priceUnit

第四步: 定義methods, 對(duì)圖書數(shù)量進(jìn)行增減, 且做少不能少于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 ++;
},

這個(gè)就不多說了, 普通函數(shù)寫法

第五步: 計(jì)算總額

計(jì)算總額有多種寫法, 常規(guī)寫法

getTotal() {
 let totalPrice = 0;
 for(let i = 0; i < this.books.length; i++) {

  totalPrice += this.books[i].price * this.books[i].count;
 }
 
 return totalPrice;
},

循環(huán)遍歷books, 價(jià)格和數(shù)量乘積的和

推薦使用js的高階函數(shù)

getTotal() {
 // 使用數(shù)組的高階函數(shù)計(jì)算每種書的價(jià)格總和
 return this.books.map((book)=>book.price * book.count).reduce((total,num) => total + num)
},

在回顧一下

map是對(duì)數(shù)組的每一個(gè)元素執(zhí)行操作

reduce是對(duì)數(shù)組中所有元素求和

第六步: 刪除表格行

del(index){
 this.books.splice(index,1)
}

刪除行, 使用splice刪除指定的data中的元素, 就可以了

到此這篇關(guān)于vue常用高階函數(shù)及綜合案例的文章就介紹到這了,更多相關(guān)vue常用高階函數(shù)及實(shí)例內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論