Vuejs学习笔记(一)-16.js的高阶函数 filter,reduce,map 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>Title</title>
 6 </head>
 7 <body>
 8 <script src='..js/vue.js'></script>
 9 <script>
10   let arr = [1, 2, 3, 4, 5, 6, 7, 8];
11   let arr1 = [];
12 
13   arr1 = arr.filter(function (n) {
14     return n < 5;
15   })
16 
17   console.log(arr1)
18 
19 
20   let arr2 = arr1.map(function (n) {
21     return n * 2;
22   })
23 
24   console.log(arr2);
25 
26   // 3.对数组中所有的元素进行汇总
27   // 参数1是function,参数2传的0,初始值是0
28   let arr3 = arr2.reduce(function (preValue, n) {
29     return preValue + n;
30   }, 0)
31 
32   console.log(arr3)
33   // 第一次遍历: preValue:0,n:2;
34   // 第二次遍历: preValue:2,n:4;
35   // 第三次遍历: preValue:6,n:6;
36   // 第四次遍历: preValue:12,n:8;
37   //    return preValue+n:20
38 
39 
40   // 以上代码合并
41   arr4 = [1, 23, 43, 5, 6, 7, 8, 9, 0];
42   let total1 = 0;
43   total1 = arr4.filter(function (n) {
44     return n < 10;
45   }).map(function (n) {
46     return n * 2;
47   }).reduce(function (preValue, n) {
48     return preValue + n;
49   }, 0)
50 
51   // 以上代码简写
52   arr5 = [1, 23, 43, 5, 6, 7, 8, 9, 0];
53   let total2 = 0;
54   total2 = arr5.filter(n => n < 10).map(n => 2 * n).reduce((pre, n) => pre + n)
55 </script>
56 </body>
57 </html>

以上是对数组进行多种操作，

filter 按照条件过滤并赋值给新的数组

map 按照表达式进行运算并赋值到新的数组。

reduce:对数据内部的数据进行累加操作

最后一个简便操作则是将所有函数拼接在一起，因为每个函数本身返回数组，而filter,map,reduce都是数组的高阶函数

 

total2 = arr5.filter(n => n < 10).map(n => 2 * n).reduce((pre, n) => pre + n)

 

剪头函数是一种简便写法

 

 

posted @ 2021-07-01 17:00  kaer_invoker  阅读(83)  评论(0)    收藏  举报