铭哥和佩佩的博客

铭哥和佩佩的博客分享Python、PHP、JavaScript、HTML5、CSS3等各种知识

JavaScript数组高阶函数总结

1 高阶函数

通常我们把满足下列条件中任意一个的函数或方法称之为高阶函数

  • 接收一个或多个函数作为输入
  • 输出或返回一个函数

2 JavaScript 数组对象中的高阶函数

arrayObject.forEach()
arrayObject.sort()
arrayObject.filter()
arrayObject.map()
arrayObject.find()
arrayObject.findIndex()
arrayObject.reduce()
arrayObject.reduceRight()
arrayObject.some()
arrayObject.every()

以上方法都有一个共同特点,就是接收一个回调函数作为参数,满足高阶函数的定义

3 各方法介绍

3.1 forEach

这个比较常用,用来迭代(遍历)数组

var list = [100, 200, 400, 400];

// val得到每个数组成员的值
list.forEach(function(val){
    console.log(val);
})

// val是每个数组成员的值,index是每个数组成员的索引
list.forEach(function(val, index) {
    console.log(key, index);
})

3.2 sort

改方法用于数组排序,可以使数组对象本身发生改变

var list = [23, 5, 102, 12, 45, 67];

//如果不指定参数,那么数组成员会按照转换为的字符串的诸个字符的Unicode位点进行排序, 升序排列
// 如果想要按照成员的数值大小排序,结果并未我们想要
list.sort(); 
console.log(list);   //结果为 [102, 12, 23, 45, 5, 67]

//使用回调函数,按照数值大小,升序排列
list.sort(function(p, n){
    return p - n;
});
console.log(list);   // 结果为 [5, 12, 23, 45, 67, 102]

//按照数值大小 降序排列
list.sort(function(p, n){
    return n - p;
});
console.log(list);   // 结果为 [102, 67, 45, 23, 12, 5]

我们来做一番解释,回调函数会被调用多次,每次传入的参数分别是数组前一个成员的值和后一个成员的值,回调函数的返回值如果 >0 前一个成员和后一个成员会互换位置, 如果返回值 <=0 ,位置不变
上面的代码,我们要实现升序,返回的是 p - n, 如果大于0, 说明 p 的值较大, 位置互换,如果小于0,说明 p 的值较小, 位置不变, 最终会永远保证数值较小的成员在前面,所以实现了升序排列,反之亦然。

3.3 map

该方法,接受一个回调函数作为参数,返回一个新的数组; 回调函数接收的参数同 forEach 累次, 且每个成员的值都会依次传入回调函数,新数组的值取决于回调函数的返回值

 var todoList = [
    {content: '吃饭饭', complete: false},
    {content: '睡觉觉', complete: true},
    {content: '打豆豆', complete: false}
];

// 实现把所有成员的 complete 值设置为 true
todoList = todoList.map(function(val){
    val.complete = true;
    return val;
});

3.4 filter

通过名字我们可以知道,该方法是用来过滤,接收一个回调函数作为参数,返回一个新的数组。 回调函数的参数同 map 类似,且每个成员的值都会依次传入回调函数, 回调函数返回值布尔值来决定新数组中是否保留该成员,true 保留, false 不保留。

var todoList = [
    {content: '吃饭饭', complete: false},
    {content: '睡觉觉', complete: true},
    {content: '打豆豆', complete: false}
];

// 实现 从数组中 取出 complete 为 true 的成员
todoList = todoList.filter(function(val){
    return val.complete;
});

3.5 find

该函数的作用是返回数组中第一个满足条件的成员,参数是一个回调函数,回调函数的参数同 filter 、map 都类似,回调函数同样会被调用多次,如果返回 true ,对应的数组成员就是 find 的最终返回值,且不在继续迭代数组。

find 方法对数组中的每一项成员执行一次回调函数,直至有一个回调函数返回 true。当找到了这样一个成员后,该方法会立即返回这个成员的值,否则返回 undefined。

var todoList = [
   {content: '吃饭饭', complete: false},
   {content: '睡觉觉', complete: true},
   {content: '打豆豆', complete: true}
 ];

 //取出数组中第一个 complete 值为 true 的成员

 var todo = todoList.find(function(item){
   return item.complete;
 });

 console.log(todo)    // {content: "睡觉觉", complete: true}

3.6 findIndex

该方法同 find 类似,只是最终返回不是第一个满足条件的数组成员的值,而是第一个满足条件的数组成员的索引

var todoList = [
    {content: '吃饭饭', complete: false},
    {content: '睡觉觉', complete: true},
    {content: '打豆豆', complete: true}
];

//取出数组中第一个 complete 值为 true 的成员的索引

var todoIndex = todoList.findIndex(function(item){
    return item.complete;
});

console.log(todoIndex)

3.7 reduce

该函数会对数组的每个成员进行计算,将计算结果作为单一的值返回。 接收回调函数作为参数,还有一个可选参数作为初始值(不指定则为第一个数组成员的值)。 统计可以用来计算数组各元素之和等类似的操作

// 计算各数组成员之和 
var list = [23, 5, 102, 12, 45, 67];
var sum = list.reduce(function(prev, curr){
    return prev + curr;
}, 0);
console.log(sum);     // 254


// 统计数组中 complete 值为 true 的成员的数量
var todoList = [
    {content: '吃饭饭', complete: false},
    {content: '睡觉觉', complete: true},
    {content: '打豆豆', complete: false},
    {content: '喝水水', complete: true},
    {content: '逛街街', complete: false}
];
var completedSize = todoList = todoList.reduce(function(prev, curr) {
    return prev + (curr.complete ? 1 : 0);
}, 0);
console.log(completedSize);    // 2

回调函数接收两个参数 prev 和 curr,这个与前面的方法都不一样, 第一次参数 prev 是前面的计算值,第二个参数 curr 是当前的数组成员; 当然,回调函数被第一次调用的时候还并没有计算值,此时 prev 的值取决于是否指定了 reduce 的第二个参数,没指定 prev 的值就是数组的第一个成员的值,指定了 prev 的值就是 reduce 的第二参数的值。

3.8 reduceRight

reduceRight() 方法的功能和 reduce() 功能是一样的,不同的是 reduceRight() 从数组的末尾向前将数组中的数组项做累加。

// 计算各数组成员之和 
var list = [23, 5, 102, 12, 45, 67];
var sum = list.reduce(function(next, curr){
    return next + curr;
}, 0);
console.log(sum);     // 254


// 统计数组中 complete 值为 true 的成员的数量
var todoList = [
    {content: '吃饭饭', complete: false},
    {content: '睡觉觉', complete: true},
    {content: '打豆豆', complete: false},
    {content: '喝水水', complete: true},
    {content: '逛街街', complete: false}
];
var completedSize = todoList = todoList.reduce(function(next, curr) {
    return next + (curr.complete ? 1 : 0);
}, 0);
console.log(completedSize);    // 2

3.9 some()

该函数结构一个回调函数作为参数,返回一个布尔值。 回调函数的参数同 mapfilter 等方法的回调函数的参数相同。 回调函数要求返回布尔值,只要有一个回调函数返回 true,some 的返回结果就是 true, 只有所有回调函数的返回结果是 false, some 的返回结果才是fasle

var todoList = [
    {content: '吃饭饭', complete: false},
    {content: '睡觉觉', complete: true},     {content: '打豆豆', complete: false},
    {content: '喝水水', complete: true},
    {content: '逛街街', complete: false}
];

// 判断 todoList 是否有 complete 为 true 的成员
var isHasCompleted = todoList = todoList.some(function(item){
    return item.complete
});
console.log(isHasCompleted);    // true

3.10 every()

该方法格式要求与 some() 相同, 功能与 some() 相反, 要求每个回调函数的返回值是 true, every() 的结果才是 true

var todoList = [
    {content: '吃饭饭', complete: false},
    {content: '睡觉觉', complete: true},     {content: '打豆豆', complete: false},
    {content: '喝水水', complete: true},
    {content: '逛街街', complete: false}
];

// 判断 todoList 是否所有成员的 complete 的值都为 true
var isAllCompleted = todoList = todoList.every(function(item){
    return item.complete
});
console.log(isAllCompleted);    // false

添加新评论