vue（高级函数：filter，map，reduce）

最新推荐文章于 2024-04-23 11:30:57 发布

小青龙8085

最新推荐文章于 2024-04-23 11:30:57 发布

阅读量2.5k

点赞数 1

分类专栏： vue 前端

本文链接：https://blog.csdn.net/lbs311709000127/article/details/103235981

版权

前端同时被 2 个专栏收录

39 篇文章 0 订阅

订阅专栏

vue

35 篇文章 0 订阅

订阅专栏

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>

小青龙8085

关注

1
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
vue（高级函数：filter，map，reduce）

filterfilter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。注意：filter() 不会对空数组进行检测。注意：filter() 不会改变原始数组。语法array.filter(function(currentValue,index,arr), thisValue)详细网址：https://www.runoob.com/j...
复制链接

扫一扫