JS中Array之高阶函数实战

Array数组就不过多解释，那什么是高阶函数？

       JavaScript的函数其实都指向某个变量。既然变量可以指向函数，函数的参数能接收变量，那么一个函数就可以接收另一个函数作为参数，这种函数就称之为高阶函数。

一、JS中Array之Map/Reduce高阶函数详解：

例1，比如我们有一个函数f(x)=x2，要把这个函数作用在一个数组[1, 2, 3, 4, 5, 6, 7, 8, 9]上，就可以用map实现如下：

//定义一个普通函数
function pow(x) {
    return x * x;
}

var arr = [1, 2, 3, 4, 5];
//直接调用Array的map()方法，并接受pow()函数作为参数
var results = arr.map(pow);
console.log(results);    //[1,4,9,16,25]

注意：从上面的循环代码，我们无法一眼看明白“把f(x)作用在Array的每一个元素并把结果生成一个新的Array”

例2：将其数组中的数字转换为字符串

var arr = [1, 2, 3, 4, 5];
//依然使用map()高阶函数，接受一个函数名作为参数
console.log(arr.map(String));    //['1','2','3','4','5']

Array的reduce()相当于递归函数，把一个函数作用在这个Array的[x1,x2,x3...]上，这个函数必须接受两个参数，reduce()把结果继续和序列的下一个元素做累积计算:

拆开分析：[x1,x2,x3,x4].reduce(f) = f(f(f(x1,x2),x3),x4);

例3：1~5累加、累积，转换为序列数等

//累加数组中的元素
var arr = [1, 2, 3, 4, 5];
var result = arr.reduce(function (x, y) {
    return x + y;       //累加
});
console.log(result);    //15

//累积数组中的元素
var result = arr.reduce(function (x, y) {
    return x * y;       //累积
});
console.log(result);    //120

//将数组中元素变成序列数：12345
var result = arr.reduce(function (x, y) {
    return x * 10 + y;
});
console.log(result);    //12345

//使用map()高阶函数，将其用户输入的英文名字，变成大写
var arr = ["java", "Android", "Ios", "Python"];
function toUpperCase(x) {
    return x.toUpperCase();
}
var result = arr.map(toUpperCase);
console.log(result);   //['JAVA','ANDROID','IOS','PYTHON'] 

二、JS中Array之filter()高阶函数详解：

filter也是一个常用的操作，它用于把Array的某些元素过滤掉，然后返回剩下的元素。

和map()类似，Array的filter()也接收一个函数。和map()不同的是，filter()把传入的函数依次作用于每个元素，然后根据返回值是true还是false决定保留还是丢弃该元素。

例四：过滤数组中的偶数，留下奇数；过滤掉数组中的空字符串

//在一个Array中，删除偶数，只保留奇数
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var result = arr.filter(function (x) {
    return x % 2 !== 0;
});
console.log(result);        //[1,3,5,7,9]

//将一个Array中的空字符串删掉
var arr = ['A', 'B', null, 'C', undefined, ' '];
var result = arr.filter(function (str) {
    return str && str.trim();
});
console.log(result);    //['A','B','C']

例五：利用filter()筛选出100以内的素数

var i,
    r,
    arr = [];

//添加1~100到数组arr中
for (i = 1; i <= 100; i++) {
    arr.push(i);
}

//过滤素数
r = arr.filter(function (x) {
    var j;
    for (j = 2; j <= x / 2 && x % j != 0; j++);
    if (x >= 2 && j > x / 2) {
        return x;
    }
});
console.log(r);    //[2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97]

回调函数

filter()接收的回调函数，其实可以有多个参数。通常我们仅使用第一个参数，表示Array的某个元素。回调函数还可以接收另外两个参数，表示元素的位置和数组本身

例六：去除数组中重复的元素

//过滤重复元素
var arr = ['A', 'B', 'C', 'B', 'D', 'C'];
var result = arr.filter(function (element, index, arr) {
    return arr.indexOf(element) === index;
});
console.log(result);    //['A','B','C','D']

去除重复元素依靠的是indexOf总是返回第一个元素的位置，后续的重复元素位置与indexOf返回的位置不相等，因此被filter滤掉了。

三、JS中Array之sort()高阶函数详解：

通常规定，对于两个元素x和y，如果认为x < y，则返回-1，如果认为x == y，则返回0，如果认为x > y，则返回1，这样，排序算法就不用关心具体的比较过程，而是根据比较结果直接排序。

注意：Array中的sort()函数，只会对字符串进行排序，一切排序对象皆为字符串，但是sort()方法也是一个高阶函数，它还可以接收一个比较函数来实现自定义的排序。

陷阱：[10,20,3,1] 的排序结果为：[1,10,20,3]  ==> 一切皆为字符串排序(结果错误)

例七：对其数组中数字升序排序；对其字符串数组升序排序，并忽略大小写

//将其数组按照数字升序排序
var arr = [10, 20, 3, 1];
arr.sort(function (x, y) {
    if (x > y) {
        return 1;
    } else if (x === y) {
        return 0;
    } else {
        return -1;
    }
});
console.log(arr);    //[1,3,10,20]

//忽略字符串大小写，升序排序
var arr = ['Google', 'Java', 'android', 'ios'];
arr.sort(function (s1, s2) {
    var x1 = s1.toUpperCase();
    var x2 = s2.toUpperCase();
    if (x1 > x2) {
        return 1;
    } else if (x1 === x2) {
        return 0;
    }
    else {
        return -1;
    }
});
console.log(arr);    //["android", "Google", "ios", "Java"]

本博客是学习了廖雪峰JS学习网站，心得和总结，下来会继续学习后续内容，也希望JS爱好者一同学习进步......