vue高阶用法,vue函数式编程
本文主要介绍vue常用的高阶函数和综合案例。文章内容很清晰，对这方面感兴趣的同学可以研究一下。
一. 常用的数组的高阶函数
假设，现在有了一个数组，我们要对数组进行如下的列操作。
找出小于100的数字：
将所有小于100的数乘以2:
以2为基础，对所有数字求和：
我们通常做什么？
！声明文档类型
html lang=en
头
meta charset=UTF-8
标题标题/标题
/头
身体
div id=应用程序
p查找小于100的数字：/p
p将所有小于100的数乘以2:/p。
p对所有数字求和：/p
Button @click=getNum()计算/button
/div
脚本src=./js/vue.js/script
脚本
const app=new Vue({
埃尔： #app ，
数据：{
nums: [10，20，100，30，320，55，80，210]，
num1:0，
num2:0，
num3:0
},
方法：{
getNum(){
//1.找出100的数字
设newNum1=[]
for(let num of this.nums) {
如果(编号100) {
newNum1.push(数字)
}
}
this.num1=newNum1
console.log(newNum1)
//2.对于小于100 *2的数字
设newNum2=[]
for(let num of newNum1) {
newNum2.push(num * 2)
}
this.num2=newNum2
console.log(newNum2)
//3.将小于100的数字*2相加。
设new num 3=0；
for(let num of newNum2) {
newNum3=num
}
this.num3=newNum3
console.log(newNum3)
}
}
})
/脚本
/body
/html
在上面的演示中，我们都使用了循环来计算，最终达到了预期的结果。单击计算按钮查看计算结果：
js高阶函数中，有一些高阶函数可以直接计算得到上述效果。这里有三个高阶函数
过滤器
地图
减少
1. filter函数
filter()方法会创建一个新数组，原数组的每个元素都会被传入回调函数，回调函数有返回值。如果返回值为真，这个元素将被保存在新数组中；如果返回值为false，该元素将不会保存在新数组中；原始数组不会改变。
语法：array.filter(函数(当前值，索引，数组)，此值)
参数
举例1: 返回数组中100的元素
getNums() {
//我们来看看filter let num 1=[10，20，100，30，320，55.80，210]的用法
设new num 1=this . nums . filter(function(num){
返回编号100；
})
console.log(newNum1)
}
filter()函数的参数是函数，参数是新数组。
该函数也有参数，这里只传入第一个参数，这意味着：循环遍历期间的数组元素。
函数的返回值类型为true或false。如果返回结果为真，则在新数组中返回该元素；如果返回结果为false，则该元素不会在新数组中返回。
举例2:利用filter，可以巧妙地去除Array的重复元素：
filter()接收的回调函数实际上可以有多个参数。通常，我们只使用第一个参数来表示数组的一个元素。回调函数还可以接收另外两个参数，分别表示元素和数组本身的位置：
设nums=[10，20，100，30，320，55，80，210，20，55，320]
设new num 2=this . nums . filter(function(element，index，self) {
返回self.indexOf(element)==index
})
运行结果
[10, 20, 100, 30, 320, 55, 80, 210]
移除重复元素依赖于indexOf总是返回第一个元素的位置，后续的重复元素不等于indexOf返回的位置，所以被filter过滤掉。
2. map函数
方法返回一个新数组，新数组中的每个元素都是调用函数后每个元素对应的原数组的值；空数组将不会被编辑，原始数组也不会被更改。
语法：array.every(函数(项，索引，数组){})
参数：
举例1: 求数组中所有元素*2后的数组
设nums=[10，20，100，30，320，55，80，210，20，55，320]
设new num 1=this . nums . map(function(num){
返回num * 2；
})
console.log(newNum1)
输出结果：
[20, 40, 200, 60, 640, 110, 160, 420, 40, 110, 640]
3. reduce函数
reduce()方法接收一个函数作为累加器，reduce依次对数组中的每个元素执行一个回调函数。不处理数组中被删除或从未赋值的元素。
语法：arr.reduce(回调，[初始值])
参数
案例1: 求一个数组的和
reduce的用法
设nums=[10，20，100，30，320，55，80，210，20，55，320]
设new num 1=this . nums . reduce(function(total，num) {
返回总数；
}, 0)
console.log(newNum1)
二. 综合案例1
结合filter，map，reduce的函数得到数组中的100个元素，然后对这些元素约定*5，最后求出*5之后所有元素的和。
reduce的用法
设nums=[10，20，100，30，320，55，80，210，20，55，320]
设new num 1=this . nums . filter(function(number){
退货数量100
}).地图(函数(数字){
退货数量* 5
}).reduce(function (total，num) {
返回总数；
}, 0)
console.log(newNum1)
产量：1220
其实还有一个更简单的算法，lambda表达式。
reduce的用法
设nums=[10，20，320]
设newNum11=
nums.filter(num=num 100)。map(num=num * 5，this)。减少((总数，数量)=总数)
console.log(newNum11)
执行结果：150
三.综合案例2
显示一个列表，选择那个要变色的，用vue实现。
你可以想两分钟，看看怎么设计。
在vue中，这个过程会非常简单。
步骤1:定义一个isCurrentIndex来记录当前选中元素的下标。
第二步：在class属性中设置：isCurrentIndex==index，表示选中元素的下标显示为红色，其他不显示为红色。
步骤3:定义一个点击事件。每个单击事件都会修改选定的下标值。
代码如下：
！声明文档类型
html lang=en
头
meta charset=UTF-8
标题标题/标题
风格。动作{
颜色：红色；
}
/风格
/头
身体
div id=应用程序
保险商实验所
li v-for=(item，index)in languages :class= { action:isCurrentIndex==index } @ click= changeCurrentIndex(index) { { index } }-{ { item } }/Li
/ul
/div
脚本src=./js/vue.js/script
脚本
var app=新Vue({
埃尔： #app ，
数据：{
语言：[Java ， PHP ， Python ， Go ， C语言]，
isCurrentIndex:0
},
方法：{
changeCurrentIndex(索引){
this.isCurrentIndex=index
}
}
});
/脚本
/body
/html
四. 综合案例3
我们要做一个表格。具体情况如下
主要有哪些东西呢？
有n本书，有书名，出版日期，价格，数量，操作。
价格应保留到小数点后两位，数量最多可增减到0。
当表格中没有数据时，您可以删除表格并且不显示数据。
随时计算总价。
结合之前学过的js高阶函数，我们来看看这段代码是如何实现的。
第一步： 定义了n本书， 放在vue的data属性里面
数据：{
书籍：[
{名称：《java设计模式》，出版日期：“1998年10月21日”，价格：58.00，计数：1}，
{名称：《围棋语言实战分析》，发布日期：《2018年5月12日》，价格：70.00，计数：1}，
{名称： vue很好解释，发布日期： 2019-08-09 ，价格：46.89，计数：1}，
{名称： jquery实战，发布日期： 2014-02-29 ，价格：39.98，计数：1}
],
总计：0
},
定义总价以保存计算出的总价。
第二步： 画table
div id=应用程序
表格边框=1
四羟乙基己二酰胺
tr
Td序列号/td
Td标题/td
Td出版日期/td
Td价格/td
Td采购数量/td
Td操作/td
/tr
/thead
tbody v-if=books.length==0
tr
Tdspan= 6 没有数据/td
/tr
/tbody
tbody v-else
tr v-for=(项目，索引)在书籍中
td{{index 1}}/td
td{{item.name}}/td
td{{item.publishDate}}/td
td{{item.price priceUnit}} /td
任务描述
button @ click= sub(index)-/button
{{item.count}}
button @click=添加(索引)/button
/td
任务描述
按钮@click=del(index)删除/按钮
/tr
/tbody
/表格
Label= sum 总价：{ { { GetTotal() price unit } }/label
/div
在这里，我们遍历数据，然后处理价格，增加单位，增加或减少按钮的数量。最后，我们定义一个删除函数。
第三步. 使用过滤器格式化价格
格式化价格时，使用管道符号。这是编写过滤器的方法。加滤镜前，价格58。加了滤镜后是$58.00，加了美元符号，价格保留两位小数。
因为增加单位在不止一个地方被使用，我们把它定义为一个方法。它是这样写的
过滤器：{
价格单位(价格)
返回 $ price.toFixed(2)
}
}
在这里，过滤器的书写被定义。它类似于方法。其中定义了一种方法。实际上，这个方法可以放在方法中吗？是的，但是把它放在过滤器里有一个好处。可以用管道字符写。
td{{item.price priceUnit}} /td
有了过滤器，之前的值将作为参数自动传递给priceUnit。
第四步： 定义methods, 对图书数量进行增减， 且做少不能少于0
子(索引){
if (this.books[index].count=0) {
this . books[索引]。coun=0；
}否则{
this . books[索引]。count-；
}
},
添加(索引){
this . books[索引]。数数；
},
这个我就不多说了，就写普通函数吧。
第五步： 计算总额
总量的计算方法有很多种，比如常规写法。
getTotal() {
设total price=0；
for(设I=0；我this . books . length；i ) {
totalPrice=this.books[i]。price * this.books[i]。数数；
}
返回总价；
},
循环遍历图书，价格和数量的乘积之和。
推荐js的高阶函数
getTotal() {
//使用数组的高阶函数计算每本书的价格总和
返回this . books . map((book)=book . price * book . count)。减少((总数，数量)=总数)
},
回首往事。
Map是对数组的每个元素执行操作。
Reduce是数组中所有元素的总和。
第六步： 删除表格行
del(索引){
this.books.splice(索引，1)
}
删除行，用splice删除指定数据中的元素，就这样。
关于vue常见高阶函数和综合案例的这篇文章到此为止。关于vue常见高阶函数及例子的更多信息，请搜索我们之前的文章或继续浏览以下相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。