vue常用高階函數(shù)及綜合實例
一. 常用的數(shù)組的高階函數(shù)
假設(shè), 現(xiàn)在有一個數(shù)組, 我們要對數(shù)組做如下一些列操作
- 找出小于100的數(shù)字:
- 將小于100的數(shù)字, 全部乘以2:
- 在2的基礎(chǔ)上, 對所有數(shù)求和:
通常我們會怎么做呢?
<!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>對所有數(shù)求和:</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的數(shù)字 let newNum1 = [] for(let num of this.nums) { if (num < 100) { newNum1.push(num) } } this.num1=newNum1 console.log(newNum1) // 2. 對小于100的數(shù)字*2 let newNum2 = [] for(let num of newNum1) { newNum2.push(num * 2) } this.num2 = newNum2 console.log(newNum2) // 3. 對小于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)來進行計算, 并且最后達(dá)到了我們想要的效果. 點擊計算按鈕, 查看計算結(jié)果:
在js高階函數(shù)里面, 有一些高階函數(shù)是可以直接計算得到上面的效果的. 下面主要介紹三個高階函數(shù)
- filter
- map
- reduce
1. filter函數(shù)
filter()方法會創(chuàng)建一個新數(shù)組,原數(shù)組的每個元素傳入回調(diào)函數(shù)中,回調(diào)函數(shù)中有return返回值,若返回值為true,這個元素保存到新數(shù)組中;若返回值為false,則該元素不保存到新數(shù)組中;原數(shù)組不發(fā)生改變。
- 語法: array.filter(function(currentValue,index,arr), thisValue)
- 參數(shù)
舉例1: 返回數(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)⑹且粋€function, 出參是一個新的數(shù)組
- function函數(shù)也有參, 這里只傳入了第一個入?yún)? 表示: 循環(huán)遍歷時的數(shù)組元素.
- function的返回值類型是true或false, 如果返回結(jié)果是true, 則返回新數(shù)組中有這個元素, 返回結(jié)果是false, 則返回新數(shù)組中沒有這個元素
舉例2:利用filter,可以巧妙地去除Array的重復(fù)元素:
filter()接收的回調(diào)函數(shù),其實可以有多個參數(shù)。通常我們僅使用第一個參數(shù),表示Array的某個元素。回調(diào)函數(shù)還可以接收另外兩個參數(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 })
運行結(jié)果
[10, 20, 100, 30, 320, 55, 80, 210]
去除重復(fù)元素依靠的是indexOf總是返回第一個元素的位置,后續(xù)的重復(fù)元素位置與indexOf返回的位置不相等,因此被filter濾掉了。
2. map函數(shù)
方法返回一個新數(shù)組,新數(shù)組中的每一個元素為原始數(shù)組對應(yīng)每一個元素調(diào)用函數(shù)處理后的值;不會對空數(shù)組進行編輯,不改變原來的數(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() 方法接收一個函數(shù)作為累加器,reduce 為數(shù)組中的每一個元素依次執(zhí)行回調(diào)函數(shù),數(shù)組中被刪除或從未被賦值的元素不處理.
- 語法:arr.reduce(callback,[initialValue])
- 參數(shù)
案例1: 求一個數(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三個函數(shù), 獲取數(shù)組中<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)
輸出結(jié)果: 1220
其實還有更簡單的算法, 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
顯示一個列表, 選中那個那個變色, 使用vue實現(xiàn)
可以思考兩分鐘, 看看, 如何來設(shè)計.
在vue中, 這個過程將非常簡單
- 第一步: 定義了一個isCurrentIndex用來記錄當(dāng)前選中元素的下標(biāo).
- 第二步: 在class屬性中設(shè)置 :isCurrentIndex == index. 表示選中元素的下標(biāo)顯示紅色, 其他不顯示紅色.
- 第三步: 定義一個click事件, 每次點擊事件, 修改選中的下標(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
我們要做一個表格, 具體內(nèi)容如下
主要有哪些東西呢?
- 有n本書, 書有書名, 出版日期, 價格, 數(shù)量, 操作
- 價格保留兩位小數(shù), 數(shù)量可增減, 最多減到0,
- 操作可以刪除表格 ,當(dāng)表格沒有數(shù)據(jù)時顯示無數(shù)據(jù)
- 隨時計算總價格.
下面來看看這個代碼如何實現(xiàn), 結(jié)合我們之前學(xué)過的js高階函數(shù)
第一步: 定義了n本書, 放在vue的data屬性里面
data: { books: [ {name:"java設(shè)計模式", publishDate:"1998-10-21", price: 58.00, count: 1}, {name:"go語言實戰(zhàn)分析", publishDate:"2018-5-12", price: 70.00, count: 1}, {name:"vue深入淺出", publishDate:"2019-08-09", price: 46.89, count: 1}, {name:"jquery實戰(zhàn)", publishDate:"2014-02-29", price: 39.98, count: 1} ], total: 0 },
定義了一個總價格, 用來保存計算后的總價格
第二步: 畫table
<div id="app"> <table border="1"> <thead> <tr> <td>序號</td> <td>書名</td> <td>出版日期</td> <td>價格</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">總價: {{getTotal() | priceUnit}} </label> </div>
在這里我們循環(huán)遍歷了data數(shù)據(jù), 然后對價格進行了處理, 增加了單位, 對數(shù)量增加了增減的button. 最后定義了一個刪除功能
第三步. 使用過濾器格式化價格
在對價格進行格式化的時候, 使用了管道符.這是過濾器的寫法. 不加過濾器之前, 價格是58. 加了過濾器之后是: $58.00, 增加了一個美元符號, 價格保留兩位小數(shù)
因為不止有一個地方會用到加單位, 所以, 我們將其定義為一個方法. 如下寫法
filters: { priceUnit(price) { return "$" + price.toFixed(2) } }
這里定義了過濾器的寫法. 類似于methods. 里面定義一個方法. 其實這個方法可不可以放在methods中呢? 也可以, 但是放在filters有一個好處. 可以使用管道符寫法
<td>{{item.price | priceUnit}} </td>
使用過濾器, 會自動將 | 前面的值作為參數(shù)傳遞給priceUnit
第四步: 定義methods, 對圖書數(shù)量進行增減, 且做少不能少于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 ++; },
這個就不多說了, 普通函數(shù)寫法
第五步: 計算總額
計算總額有多種寫法, 常規(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, 價格和數(shù)量乘積的和
推薦使用js的高階函數(shù)
getTotal() { // 使用數(shù)組的高階函數(shù)計算每種書的價格總和 return this.books.map((book)=>book.price * book.count).reduce((total,num) => total + num) },
在回顧一下
map是對數(shù)組的每一個元素執(zhí)行操作
reduce是對數(shù)組中所有元素求和
第六步: 刪除表格行
del(index){ this.books.splice(index,1) }
刪除行, 使用splice刪除指定的data中的元素, 就可以了
到此這篇關(guān)于vue常用高階函數(shù)及綜合案例的文章就介紹到這了,更多相關(guān)vue常用高階函數(shù)及實例內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue proxyTable 接口跨域請求調(diào)試的示例
本篇文章主要介紹了vue proxyTable 接口跨域請求調(diào)試的示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-09-09vue3中使用viewerjs實現(xiàn)圖片預(yù)覽效果的項目實踐
viewer.js是一款開源的圖片預(yù)覽插件,功能十分強大,本文主要介紹了vue3中使用viewerjs實現(xiàn)圖片預(yù)覽效果的項目實踐,具有一定的參考價值,感興趣的可以了解一下2023-09-09vue2使用wangeditor實現(xiàn)數(shù)學(xué)公式和富文本編輯器
這篇文章主要為大家詳細(xì)介紹了vue2如何使用wangeditor實現(xiàn)數(shù)學(xué)公式和富文本編輯器功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解一下2023-12-12vue?this.$router和this.$route區(qū)別解析及路由傳參的2種方式?&&?this.$route
this.$router?相當(dāng)于一個全局的路由器對象,包含了很多屬性和對象(比如?history?對象),任何頁面都可以調(diào)用其?push(),?replace(),?go()?等方法,本文給大家介紹Vue中this.$router與this.$route的區(qū)別?及push()方法,感興趣的朋友跟隨小編一起看看吧2023-10-10