您的位置:首页 >> Vue >> 《和小米一起学Vue.js》— 高阶函数

《和小米一起学Vue.js》— 高阶函数

[ 孤狼 | 2022-07-29 23:50:49 | Vue | 1079°C | 0条评论 ]

在使用vue的过程中,我们经常会用到一些es6的函数。这些函数可以帮助我们解决一些简单但繁琐的操作。


filter()

filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。

注意:filter() 不会对空数组进行检测也不会改变原始数组。  

let ndata={
nums:[10,22,33,44,55,99,101,120,112,158,522]
};
back1(){
return this.nums.filter(function(n){
return n<100; //条件表达式
});
}

上面函数的作用是判断nums数组内的数字是否小于100,如果小于则返回一个新数组。不符合条件的会跳过。




map()

map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。

map() 方法按照原始数组元素顺序依次处理元素。

注意: map() 不会对空数组进行检测也不会改变原始数组。  

let ndata={
nums:[10,22,33,44,55,99,101,120,112,158,522]
};
back2(){
return this.nums.map(function(n){
return n*2;
});
}

上面函数的作用是将数组nums内的所有数都乘以2,并返回一个新数组




reduce()

reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始运算,最终计算为一个值。

reduce() 可以作为一个高阶函数,用于函数的 compose。

注意: reduce() 对于空数组是不会执行回调函数的。  

let ndata={
nums:[10,22,33,44,55,99,101,120,112,158,522]
};
back3(){
return this.nums.reduce(function(pre,n){
return pre+n;
},0);
}

上面函数作用是将数组nums内的所有数相加,并返回最终值pre

每次循环都会将nums数组内的一个值赋值给n,然后进入函数处理,最终结果返回给pre带入下次循环。最后的“0”,表示pre的初始值。





案例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue 高阶函数</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<div>{{back1()}}</div>
<div>{{back2()}}</div>
<div>{{back3()}}</div>
</div>
<script>
let ndata={
nums:[10,22,33,44,55,99,101,120,112,158,522]
};
const app=new Vue({
el:"#app",
data:ndata,
methods: {
back1(){
return this.nums.filter(function(n){
return n<100;
});
},
back2(){
return this.nums.map(function(n){
return n*2;
});
},
back3(){
return this.nums.reduce(function(pre,n){
return pre+n;
},0);
}
},
});
</script>
</body>
</html>


转载请注明出处:http://gl.paea.cn/n.php?n=176
 
如您看得高兴,欢迎随意投喂,让我们坚持创作!
赞赏一个鸡腿
还没有人留下遗迹
综合 · 搜索