【重温基础】21.高阶函数

栏目: JavaScript · 发布时间: 5年前

内容简介:本文是今日感受:想家。本人自己整理的【

本文是 重温基础 系列文章的第二十一篇。

今日感受:想家。

本人自己整理的【 Cute-JavaScript 】资料,包含:【ES6/ES7/ES8/ES9】,【JavaScript基础(初级/中级/高级)】以及后面会添加的【JS面试题】三个系列。

欢迎您的支持!

系列目录:

本章节复习的是JS中的高阶函数,可以提高我们的开发效率。

1.介绍

个人简单理解为,一个函数可以接收其他函数作为参数,这种函数便称为 高阶函数 ,而主要目的就是为了能接收其他函数作为参数。

Q: 为什么可以接收一个函数作为参数?

简单实例:

function a (x){
    return 'hi ' + x;
}
function f (a, b){
    return a(b);
}
f(a, 'leo');   // "hi leo"

这段代码的意思:定义方法 f ,接收两个参数,方法 a 和变量 b ,在方法 a 中返回一段字符串,当执行方法 f 并传入参数方法 a 和参数 b 的时候,返回 "hi leo"

也可以直接调用JS内置方法:

let a = 3, b = -2;
function my_abs (val, fun){
    return fun(val);
}
my_abs(a, Math.abs);  // 3
my_abs(b, Math.abs);  // 2

2.常用高阶函数

2.1 map()

map() 方法的作用是:接收一个函数作为参数,对数组中每个元素按顺序调用一次传入的函数并返回结果, 不改变原数组,返回一个新数组

通常使用方式: arr.map(callback()) ,更多详细介绍可以参考 MDN Array.map()

参数:

  • arr : 需要操作的数组;
  • callback(currentValue, index, array, thisArg) : 处理的方法,四个参数;

      1. currentValue 当前处理的元素的
      1. index 当前处理的元素的 索引 ,可选
      1. array 调用 map() 方法的 数组 ,可选
      1. currentVthisArgalue 执行 callback 函数时使用的 this 值,可选

返回值:

返回一个处理后的新数组。

实例:

let arr = [1, 3, -5];
let a1 = arr.map(Math.abs);  
// a1 => [1, 3, 5];

let a2 = arr.map(String);
// a2 => ["1", "3", "-5"]

let a3 = arr.map(function (x){
    return x + 1;
})
// 等价于 a3=arr.map(x => x+1)
// a3 => [2, 4, -4]

对比 for...in 循环, map() 书写起来更加简洁:

let arr = [1, 3, -5];
let a1 = [];
for (var i=0; i<arr.length; i++){
    a1.push(arr[i] + 1); 
}
// a1 => [2, 4, -4]

map() 作为高阶函数,事实上它把运算规则抽象了。

2.2 reduce()

reduce() 方法的作用是:接收一个函数,对数组进行累加操作,把累计结果和下一个值进行操作,最后返回最终的单个结果值。

通常使用方式: arr.reduce(callback(), initValue) ,更多详细介绍可以参考 MDN Array.reduce()

参数:

  • callback(returnValue, currentValue, currentIndex, array) : 累记器的方法,四个参数:

      1. returnValue 上一次处理的返回值,或者初始值
      1. currentValue 当前处理的元素的 ,可选
      1. currentIndex 当前处理的元素的 索引 ,可选
      1. array 调用 reduce() 方法的 数组 ,可选
  • initValue 初次调用 callback() 时候 returnValue 参数的初始值,默认数组第一个元素,可选

返回值:

返回一个最终的累计值。

实例:

  1. 数组求和
let arr = [1, 3, -5];
let sum1 = arr.reduce((res, cur) => res + cur);
// sum1 => -1

let sum2 = arr.reduce((res, cur) => res + cur , 1);
// sum1 => 0
  1. 二维数组转化为一维
let arr = [[1, 2], [3, 4], [5, 6]];
let con = arr.reduce((res, cur) => res.concat(cur));
// con => [1, 2, 3, 4, 5, 6]

2.3 filter()

filter() 方法的作用是:接收一个函数,依次作用数组每个元素,并过滤符合函数条件的元素,将剩下的数组作为一个新数组返回。

通常使用方式: arr.filter(callback(), thisArg) ,更多详细介绍可以参考 MDN Array.filter()

参数:

  • callback(ele, index, array) : 过滤条件的方法,当返回 true 则保存该元素,反之不保留,三个参数:

      1. ele 当前处理的元素
      1. index 当前处理的元素的 索引 ,可选
      1. array 调用 filter() 方法的 数组 ,可选
  • thisArg 执行 callback 时的用于 this 的值,可选

返回值:

返回一个过滤剩下的元素组成的新数组。

实例:

  1. 过滤奇数值
let arr = [1, 2, 3, 4, 5, 6];
let res = arr.filter(x => x % 2 != 0);
// res => [1, 3, 5]
  1. 过滤不满足条件的值
let arr = [1, 2, 3, 4, 5, 6];
let res = arr.filter(x => x > 3);
// res => [4, 5, 6]
  1. 过滤空字符串
let arr = ['a', '', null, undefined, 'b', ''];
let tri = arr.filter(x => x && x.trim());
// tri => ["a", "b"]

总结下: filter() 主要作为 筛选功能 ,因此核心就是正确实现一个“筛选”函数。

2.4 sort()

sort() 方法的作用是:接收一个函数,对数组的元素进行排序,并返回 排序 后的新数组。 默认排序顺序是根据字符串Unicode码点

通常使用方式: arr.sort(fun()) ,更多详细介绍可以参考 MDN Array.sort()

compareFunction 可选

用来指定按某种顺序进行排列的函数。如果省略,元素按照转换为的字符串的各个字符的Unicode位点进行排序。

参数:

  • fun(a, b) : 指定按某种顺序进行排列的函数,若省略则按照转换为的字符串的各个字符的Unicode位点进行排序,两个可选参数:

fun() 返回 ab 两个值的大小的比较结果, sort() 根据返回结果进行排序:

  • fun(a, b) 小于 0 ,则 a 排在 b 前面;
  • fun(a, b) 等于 0 ,则 a b 位置不变;
  • fun(a, b) 大于 0 ,则 a 排在 b 后面;

返回值:

返回排序后的新数组,并 修改原数组

实例:

  1. 升序降序数组
let arr = [1,5,2,3];
let sort1 = arr.sort();
// 等同于 let sort1 = arr.sort((a, b) => a - b);
// sort1 => [1, 2, 3, 5]

let sort2 = arr.sort((a, b) => b - a);
// sort2 => [5, 3, 2, 1]
  1. 字符串排序
let arr1 = ['AA', 'CC', 'BB'];
let sort1 = arr1.sort();
// sort1 => ["AA", "BB", "CC"]

let arr2 = ['AA', 'aa', 'BB'];
let sort2 = arr2.sort();
// sort2 => ["AA", "BB", "aa"]

let arr3 = ['AA', 'aa', 'BB'];
let sort3 = arr3.sort((a, b) => a.toLowerCase() > b.toLowerCase());
// sort3 => ["AA", "aa", "BB"]
// 也可以写成:
let sort3 = arr3.sort((a, b) => {
    let s1 = a.toLowerCase();
    let s2 = b.toLowerCase();
    return s1 > s2 ? 1 : s1 < s2 ? -1 : 0;
})

总结下: sort() 主要作为 排序功能 ,因此核心就是正确实现一个“排序”函数。


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Data Structures and Algorithm Analysis in Java

Data Structures and Algorithm Analysis in Java

Mark A. Weiss / Pearson / 2006-3-3 / USD 143.00

As the speed and power of computers increases, so does the need for effective programming and algorithm analysis. By approaching these skills in tandem, Mark Allen Weiss teaches readers to develop wel......一起来看看 《Data Structures and Algorithm Analysis in Java》 这本书的介绍吧!

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

SHA 加密
SHA 加密

SHA 加密工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具