vue（高级函数：filter，map，reduce）
filterfilter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。注意：filter() 不会对空数组进行检测。注意：filter() 不会改变原始数组。语法array.filter(function(currentValue,index,arr), thisValue)详细网址：https://www.runoob.com/j...
·
filter
filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
注意： filter() 不会对空数组进行检测。
注意： filter() 不会改变原始数组。
语法
array.filter(function(currentValue,index,arr), thisValue)
详细网址：https://www.runoob.com/jsref/jsref-filter.html
map
map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
map() 方法按照原始数组元素顺序依次处理元素。
注意： map() 不会对空数组进行检测。
注意： map() 不会改变原始数组。
语法
array.map(function(currentValue,index,arr), thisValue)
详细网址：https://www.runoob.com/jsref/jsref-map.html
reduce
reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。
reduce() 可以作为一个高阶函数，用于函数的 compose。
注意: reduce() 对于空数组是不会执行回调函数的。
语法
array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
详细网址：https://www.runoob.com/jsref/jsref-reduce.html
案例：给出一组数将其中小于100的数乘于2再求和，下面给出了三种方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
</style>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
</div>
<script>
new Vue({
el:"#root",
data:{
},
methods:{
},
computed:{
},
filters:{ //过滤器
}
})
//1.------------------------------------------
const nums=[10,20,30,40,111,222,333];
let total=nums.filter(n=>n<100).map(n=>n*2).reduce((pre,n)=>pre+n);
console.log("total:"+total);
//2.------------------------------------------
//高级函数filter（过滤函数）
let nums1=nums.filter(function(n){
return n<100;
})
//高级函数map
let nums2=nums1.map(function(n){
return n*2;
})
let total1=nums2.reduce(function(preValue,n){
return preValue+n;
})
console.log("total1:"+total1);
//3.------------------------------------------
let total2=nums.filter(function(n){
return n<100;
}).map(function(n){
return n*2;
}).reduce(function(preValue,n){
return preValue+n;
},0)
console.log("total2:"+total2)
</script>
</body>
</html>
前往低代码交流专区
更多推荐
1
0- 0
已为社区贡献3条内容
所有评论(0)