【javascript快速入门-基础篇】- 高阶函数

map

由于map()方法定义在JavaScript的Array中，调用Array的map()方法，传入我们自己的函数，就得到了一个新的Array作为结果,例如：（实现数组中的元素的平方）

'use strict';

function pow(x) {
    return x * x;
}
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var results = arr.map(pow); // [1, 4, 9, 16, 25, 36, 49, 64, 81]
console.log(results);

reduce

再看reduce的用法。Array的reduce()把一个函数作用在这个Array的[x1, x2, x3...]上，这个函数必须接收两个参数，reduce()把结果继续和序列的下一个元素做累积计算，其效果就是：

[x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4)

例如： 

var arr = [1, 3, 5, 7, 9];
arr.reduce(function (x, y) {
    return x + y;
}); // 25

等价于===>
arr.reduce((x,y)=>(x*y));

典型案例

1.

'use strict';

var arr = ['1', '2', '3'];
var r;
r = arr.map(parseInt);
console.log(r);
output：1, NaN, NaN
//map方法的函数只要一个参数，但是map传递的参数有三个，分别是：数组元素、元素索引，数组本身，而paresInt是可以接受两个参数的，第一个是字符，第二个是进制。
['1', '2', '3'].map(paresInt)  
相当于

['1', '2', '3'].map(paresInt(value, index))

执行的内在逻辑就是：

第一个元素就是：paresInt('1', 0)  > 1

第二个元素就是：paresInt('2', 1)  >  NaN

第三个元素就是：paresInt('3', 2)  >  NaN

2.把一个字符串13579先变成Array——[1, 3, 5, 7, 9]，再利用reduce()就可以写出一个把字符串转换为Number的函数。

'use strict';

function string2int(s) {
return s.split('').map(x=>x*1).reduce((x,y)=>(x*10+y));
}

// 测试:
if (string2int('0') === 0 && string2int('12345') === 12345 && string2int('12300') === 12300) {
    if (string2int.toString().indexOf('parseInt') !== -1) {
        console.log('请勿使用parseInt()!');
    } else if (string2int.toString().indexOf('Number') !== -1) {
        console.log('请勿使用Number()!');
    } else {
        console.log('测试通过!');
    }
}
else {
    console.log('测试失败!');
}

filter

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

例如，在一个Array中，删掉偶数，只保留奇数

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

回调函数

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

'use strict';

var
    r,
    arr = ['apple', 'strawberry', 'banana', 'pear', 'apple', 'orange', 'orange', 'strawberry'];
r = arr.filter(function (element, index, self) {
    return self.indexOf(element) === index;//indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
//后续的重复元素位置与indexOf返回的位置不相等，因此被filter滤掉了。
});
console.log(r.toString());

Sort

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

特点：

1.sort是根据字符串的ASCII码进行排序；

2.Array的sort()方法默认把所有元素先转换为String再排序；

3.sort()方法也是一个高阶函数，它还可以接收一个比较函数来实现自定义的排序。

4.sort()方法会直接对Array进行修改，它返回的结果仍是当前Array。

例子：忽略大小写对字符串进行排序

'use strict';
var arr = ['Google', 'apple', 'Microsoft'];
arr.sort(function (s1, s2) {
    x1 = s1.toUpperCase();//忽略大小写的实质就是先把字符串转换为大小写再进行比较
    x2 = s2.toUpperCase();
    if (x1 < x2) {
        return -1;
    }
    if (x1 > x2) {
        return 1;
    }
    return 0;
}); // ['apple', 'Google', 'Microsoft']

every

every()方法可以判断数组的所有元素是否满足测试条件。

例如：

'use strict';
var arr = ['Apple', 'pear', 'orange'];
console.log(arr.every(function (s) {
    return s.length > 0;
})); // true, 因为每个元素都满足s.length>0

console.log(arr.every(function (s) {
    return s.toLowerCase() === s;
})); // false, 因为不是每个元素都全部是小写

find

find()方法用于查找符合条件的第一个元素，如果找到了，返回这个元素，否则，返回undefined，例如：

'use strict';
var arr = ['Apple', 'pear', 'orange'];
console.log(arr.find(function (s) {
    return s.toLowerCase() === s;
})); // 'pear', 因为pear全部是小写

console.log(arr.find(function (s) {
    return s.toUpperCase() === s;
})); // undefined, 因为没有全部是大写的元素

findIndex

findIndex()和find()类似，也是查找符合条件的第一个元素，不同之处在于findIndex()会返回这个元素的索引，如果没有找到，返回-1：

'use strict';
var arr = ['Apple', 'pear', 'orange'];
console.log(arr.findIndex(function (s) {
    return s.toLowerCase() === s;
})); // 1, 因为'pear'的索引是1

console.log(arr.findIndex(function (s) {
    return s.toUpperCase() === s;
})); // -1

forEach

forEach()和map()类似，它也把每个元素依次作用于传入的函数，但不会返回新的数组。forEach()常用于遍历数组，因此，传入的函数不需要返回值。