filter、map、reduce的使用示例

问题：
有一串数组，
1. 选出小于100的数组返回一个新数组，
2. 在第一的返回的数组里对里面每个元素都乘以2并返回新数组，
3. 在第二的返回的新数组上，求出数组里面所有元素相加的值并返回这个值

方法一 ： 在不使用 filter map reduce 的前提下完成
1-1 . 筛选出小于100的数组返回一个新数组

const num = [22,34,78,98,57,102,167];
        let newNums = [];
        for ( let item of num){//----> 筛选出小于100的放在一个新数组里面
             if(item < 100) {
                newNums.push(item);
             }
        }
        console.log(newNums);

1-2 .将上面返回的新数组里面的每个元素都乘以2，并返回新数组

let newNums2 = [];
        for(let item of newNums){// ----> 将上一步中的新数组里面的每个元素都乘以2，得到一个新数组
            newNums2.push(item * 2);
        }
        console.log(newNums2);

1-3 . 将上面返回的新数组里面的所有元素相加并返回最终的值

let total = 0;
        for(let item of newNums2){
            total += item;
        }
        console.log(total)

方法二： 使用 filter map reduce 高级函数的基础上完成：
2-1 . filter 函数：fileter(function(value) { return boolean})
filter函数里面的参数是一个回调函数（必须），该回调函数的参数是一个value值（必须），一般是指需要过滤的数组中的元素
filter 中的回调函数有一个要求：必须返回一个 boolean 值

  const num = [22,34,78,98,57,102,167];
        newnums = num.filter(function(n) {
            return n < 100;// 通过条件判断过滤出满足条件的元素
        })
        console.log(newnums);

2-2 . map函数：map(function(n) { 函数体里面是对 n 的一个处理过程 })
map函数里面的参数也是一个回调函数（必须），该回调函数的参数也是一个value值（必须），一般是指需要操作的数组的里面的元素
map函数返回的是对value处理之后的结果.

newnums2 = newnums.map(function(n) {
            return n * 2;
        });
        console.log(newnums2);

2-3. reduce函数：reduce( function(previous,value) { previous和value的数据处理过程 }, 0 )
reduce函数里面有两个参数，第一个参数是一个回调函数，该回调函数也有两个参数，其中第一个参数 previous 表示上一个元素，第二个参数 value 表示当前元素，
reduce函数第二个参数表示回调函数里面第一个参数 previous 的初始值。
回调函数第二个参数一般是指需要操作的数组里面的元素。

total = newnums2.reduce( function( previous, value ) {
            return previous + value;
        }, 0 );
        console.log(total)

方法三： 使用filter map reduce 函数对上面的代码进行简化

const num = [22,34,78,98,57,102,167];
        total = num.filter(function(n){
            return n < 100;
        }).map(function(n) {
            return n * 2;
        }).reduce(function( previous , n ) {
            return previous + n;
        }, 0 );
        console.log(total);

在实际开发中最好使用第三种比较简单的写法，当然还会有更简单的写法，使用箭头函数，这里就不再列举啦。