JS中的迭代函数：filter, map, reduce

1. filter()函数

1. 它用于把Array的某些元素过滤掉，然后返回剩下的元素。

2. 和map()类似，Array的filter()也接收一个函数。 和map()不同的是，filter()把传入的函数依次作用于每个元素，

3. 然后根据返回值是true还是false决定保留还是丢弃该元素。

例如，在一个Array中，删掉偶数，只保留奇数，可以这么写

var arr = [1, 2, 4, 5, 6, 9, 10, 15];
    var r = arr.filter(function(x) {
        return x % 2 !== 0;
    });
    console.log(r);

    // [1, 5, 9, 15]
1
2
3
4
5
6
7

把一个Array中的空字符串删掉，可以这么写

var arr = ['A', '', 'B', null, undefined, 'C', '  '];
    var r = arr.filter(function(s) {
        return s && s.trim();

        // trim()函数去掉字符串首尾空白字符
    });
    console.log(arr); // ['A', 'B', 'C']
1
2
3
4
5
6
7

当回调函数使用

• 1 filter()接收的回调函数，可以有多个参数。

• 2 第一个参数，表示Array的某个元素。

• 3 回调函数还可以接收另外两个参数，表示元素的位置和数组本身：

 var arr = ['A', 'B', 'C'];
    var r = arr.filter(function(element, index, self) {
        console.log(element); // 依次打印'A', 'B', 'C'
        console.log(index); // 依次打印0, 1, 2
        console.log(self); // self就是变量arr
        return true;
    });
1
2
3
4
5
6
7

利用filter，可以巧妙地去除Array的重复元素：

 var  r,arr = ['apple', 'strawberry', 'banana', 'pear', 'apple', 'orange', 'orange', 'strawberry'];

    r = arr.filter(function(element, index, self) {
        return self.indexOf(element) === index;
    });

    alert(r.toString());
1
2
3
4
5
6
7

indexOf总是返回第一个元素的位置，后续的重复元素位置与indexOf返回的位置不相等，因此被filter滤掉了，所以重复的元素仅会保留第一个位置的元素

2. map()函数

1. map()方法定义在JavaScript的Array中，它返回一个新的数组，数组中的元素为原始数组调用函数处理后的值。
2. map()函数根据一个回调函数创建一个新的函数，它会遍历数组中的每一个值

语法：

array.map(function(currentValue, index, arr), thisIndex)
function(currentValue, index, arr)：必须为一个函数，数组中的每个元素都会执行这个函数。其中函数参数：
currentValue：必须。当前元素的的值。
index：可选。当前元素的索引。
arr：可选。当前元素属于的数组对象。
thisValue：可选。对象作为该执行回调时使用，传递给函数，用作"this"的值。

例题：返回由原数组中每个元素的平方组成的新数组：

 let array = [1, 2, 3, 4, 5];

    let newArray = array.map((item) => {
        return item * item;
    })

    console.log(newArray) // [1, 4, 9, 16, 25]
1
2
3
4
5
6
7

3. reduce()函数

• reducer逐个遍历数组元素，每一步都将当前元素的值与上一步的计算结果相加（上一步的计算结果是当前元素之前所有元素的总和）——直到没有更多的元素被相加。

语法：

reduce(function(previousValue, currentValue, currentIndex, array) {/* ... */ }, initialValue)

参数：

一个 “reducer” 函数，包含四个参数：

1. previousValue：上一次调用 callbackFn 时的返回值。在第一次调用时，若指定了初始值 initialValue，其值则为 initialValue，否则为数组索引为 0 的元素 array[0]。
2. currentValue：数组中正在处理的元素。在第一次调用时，若指定了初始值
3. initialValue，其值则为数组索引为 0 的元素 array[0]，否则为 array[1]。
4. currentIndex：数组中正在处理的元素的索引。若指定了初始值 initialValue，则起始索引号为 0，否则从索引 1起始。

array：用于遍历的数组。

 let maxarr = [1, '2', true, undefined, null]
        // 累加器是一个函数接收4个参数
    console.log(
        maxarr.reduce((sum, item, index, arr) => {
            console.log('sum:', sum);
            console.log('item:', item);
            console.log('index:', index);
            console.log('arr:', arr);
            // return的值会被当成下一次循环的sum
            return sum + item;
        }, 0)
        //  起始值为0 进行累加 
        // 数组.reduce((累加器,起始值))
    );

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

总结：

箭头函数，高阶函数 filter过虑器 map映射，reduce合并

// let sumone = array.filter(function(n) {
    //     return n < 50;

    // })
    // console.log(sumone);
    // let sumtwo = sumone.map(function(n) {
    //     return n * 2;

    // })
    // console.log(sumtwo);
    // let sumthree = sumtwo.reduce(function(indexvalue, n) {
    //     return indexvalue + n;

    // }, 0)
    // console.log(sumthree);
    let sumone = array.filter(n => n < 50).map(n => n * 2).reduce((indexvalue, n) => indexvalue + n)
    console.log(sumone);  //120

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18