【重温基础】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() 主要作为 排序功能 ,因此核心就是正确实现一个“排序”函数。


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

查看所有标签

猜你喜欢:

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

PERL學習手札.

PERL學習手札.

簡信昌 / 上奇科技 / 20040816 / NT$ 390

1. 關於Perl 當你翻開這本書的時候,你也就進入了一個奇幻的世界。Perl確實是一種非常吸引人的程式語言,而之所以這麼引人入勝的原因不單單在於他的功能,也在於他寫作的方式,或說成為一種程式寫作的藝術。即使你只是每天埋首於程式寫作的程式設計師,也不再讓生活過份單調,至少你可以嘗試在程式碼中多一些變化。而且許多Perl的程式設計師已經這麼作了,這也是Perl的理念-「There is mor......一起来看看 《PERL學習手札.》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

随机密码生成器
随机密码生成器

多种字符组合密码

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换