Vue初学11-高级函数

filter函数

filter可以对数组元素进行有条件过滤，条件表达式返回值为true时，将元素放到结果数组中，返回值为满足过滤条件的新数组。例如，从一个数组中筛选出所有大于20的元素，不必写循环遍历，通过filter函数就可以实现。

filter函数的参数是function,function的参数n表示当前元素的值。执行过程类似于foreach，对每个元素都执行一次function。如果表达式的值为true就把n放到新数组中。

 <script>
        let arr=[10,20,30,40,50];
        let arr2=arr.filter(function(n){
            return n>20
        });
        console.log(arr2);
 </script>

结果如下：

map函数 

map函数可以对数组元素进行计算，得到一个新的元素，返回值为对每个元素进行计算后的新数组。例如，将上面返回的arr2数组元素值变成原来的2倍。同样省去了循环遍历的繁琐。

map函数的参数是function,function的参数n表示当前元素的值。执行过程类似于foreach，对每个元素都执行一次function。对每个元素都执行计算表达式，并将结果放到新数组中，与filter的不同是不会对元素进行筛选。

 <script>
        let arr=[10,20,30,40,50];
        let arr2=arr.filter(function(n){
            return n>20
        });
        console.log(arr2);
        let arr3=arr2.map(function(n){
            return n*2;
        });
        console.log(arr3);
</script>

结果如下： 

reduce函数 

reduce函数主要用于数组元素值的汇总，例如，要求上述arr3数组元素的和。

reduce函数第一个参数是function,function有两个参数pre和n,pre表示上一个汇总结果，n表示当前的元素值。这个地方跟递归函数差不多，比如，当前是第3个元素，pre的值就是前2个元素的和。reduce的第二个参数是pre的初始化值。

<script>
        let arr=[10,20,30,40,50];
        let arr2=arr.filter(function(n){
            return n>20
        });
        console.log(arr2);
        let arr3=arr2.map(function(n){
            return n*2;
        });
        console.log(arr3);
        let total=arr3.reduce(function(pre,n){
            return pre+n;
        },0);
        console.log(total);
 </script>

结果如下：

将上面的数组筛选、计算后，汇总结果，需要三步。三步可以合并成一步

    <script>
        let arr=[10,20,30,40,50];
        let arr2=arr.filter(function(n){
            return n>20
        });
        console.log(arr2);
        let arr3=arr2.map(function(n){
            return n*2;
        });
        console.log(arr3);
        let total=arr3.reduce(function(pre,n){
            return pre+n;
        },0);
        console.log(total);

        let total2 = arr.filter(function(n){
            return n>20
        }).map(function(n){
            return n*2
        }).reduce(function(pre,n){
            return pre+n;
        },0);
        console.log(total2);

    </script>

结果如下：total和total2结果是一致的。