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

更新時(shí)間：2021年02月25日 14:21:09 作者：盛開(kāi)的太陽(yáng)

這篇文章主要介紹了vue常用高階函數(shù)及綜合案例，文章內(nèi)容講解的很清晰，有對(duì)于這方面感興趣的同學(xué)可以研究下

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

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

找出小于100的數(shù)字:
將小于100的數(shù)字, 全部乘以2:
在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)來(lái)進(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ā)生改變。

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

舉例1: 返回?cái)?shù)組中<100的元素

getNums() {
 // 來(lái)看看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的返回值類(lèi)型是true或false, 如果返回結(jié)果是true, 則返回新數(shù)組中有這個(gè)元素, 返回結(jié)果是false, 則返回新數(shù)組中沒(méi)有這個(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è)瓉?lái)的數(shù)組。

語(yǔ)法: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ù)組中被刪除或從未被賦值的元素不處理.

語(yǔ)法: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)

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

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

第一步: 定義了一個(gè)isCurrentIndex用來(lái)記錄當(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語(yǔ)言"],
   isCurrentIndex:0
  },
  methods: {
   changeCurrentIndex(index) {
    this.isCurrentIndex = index
   }
  }
 });
</script>
</body>
</html>

四. 綜合案例3

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

主要有哪些東西呢?

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

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

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

data: {
 books: [
  {name:"java設(shè)計(jì)模式", publishDate:"1998-10-21", price: 58.00, count: 1},
  {name:"go語(yǔ)言實(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à)格, 用來(lái)保存計(jì)算后的總價(jià)格

第二步: 畫(huà)table

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

  <tbody v-if="books.length==0">
   <tr>
    <td colspan="6" >沒(méi)有數(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è)刪除功能

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

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

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

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

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

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

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

第四步: 定義methods, 對(duì)圖書(shū)數(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è)就不多說(shuō)了, 普通函數(shù)寫(xiě)法

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

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

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ì)算每種書(shū)的價(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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线