vue常用高階函數(shù)及綜合實(shí)例
一. 常用的數(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)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了web面試中常問(wèn)到的關(guān)于vue自定義組件及調(diào)用方式，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步2021-09-09
關(guān)于json-bigint處理大數(shù)字問(wèn)題
這篇文章主要介紹了關(guān)于json-bigint處理大數(shù)字問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-05-05
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)全選功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
vue中計(jì)算屬性和方法的區(qū)別及說(shuō)明
這篇文章主要介紹了vue中計(jì)算屬性和方法的區(qū)別及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
本文的初衷是想讓更多哎學(xué)習(xí)的人知道并了解vue模版編譯，所以文中主要以階段流程為主，不會(huì)涉及過(guò)多的底層代碼邏輯,需要的朋友可以參考一下2021-09-09
vue實(shí)現(xiàn)橫屏滾動(dòng)公告效果
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)橫屏滾動(dòng)公告效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要為大家詳細(xì)介紹了vue組件學(xué)習(xí)教程，根據(jù)Vue官方文檔學(xué)習(xí)的筆記，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-09-09
vue + element-ui實(shí)現(xiàn)簡(jiǎn)潔的導(dǎo)入導(dǎo)出功能
Element-UI是餓了么前端團(tuán)隊(duì)推出的一款基于Vue.js 2.0 的桌面端UI框架,手機(jī)端有對(duì)應(yīng)框架是 Mint UI，下面這篇文章主要給大家介紹了關(guān)于利用vue + element-ui如何實(shí)現(xiàn)簡(jiǎn)潔的導(dǎo)入導(dǎo)出功能的相關(guān)資料，需要的朋友可以參考下。2017-12-12
axios發(fā)送post請(qǐng)求,提交圖片類(lèi)型表單數(shù)據(jù)方法
下面小編就為大家分享一篇axios發(fā)送post請(qǐng)求,提交圖片類(lèi)型表單數(shù)據(jù)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
使用vue-cli3+typescript的項(xiàng)目模板創(chuàng)建工程的教程
這篇文章主要介紹了使用vue-cli3+typescript的項(xiàng)目模板創(chuàng)建工程,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-02-02