【重溫基礎】21.高階函數

時間 2019-11-08

標籤重溫基礎高階函數简体版

原文原文鏈接

本文是 重溫基礎 系列文章的第二十一篇。
今日感覺：想家。前端

本人本身整理的【Cute-JavaScript】資料，包含：【ES6/ES7/ES8/ES9】，【JavaScript基礎（初級/中級/高級）】以及後面會添加的【JS面試題】三個系列。
歡迎您的支持！git

系列目錄：github

本章節複習的是JS中的高階函數，能夠提升咱們的開發效率。面試

1.介紹

我的簡單理解爲，一個函數能夠接收其餘函數做爲參數，這種函數便稱爲高階函數，而主要目的就是爲了能接收其餘函數做爲參數。數組

Q：爲何能夠接收一個函數做爲參數？
A：由於函數能夠接收變量做爲參數，而變量能夠聲明一個方法。微信

簡單實例：閉包

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內置方法：post

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()。
參數：ui

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參數的初始值，默認數組第一個元素，可選

返回值：
返回一個最終的累計值。

實例：

數組求和

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
複製代碼

二維數組轉化爲一維

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 的值，可選

返回值：
返回一個過濾剩下的元素組成的新數組。

實例：

過濾奇數值

let arr = [1, 2, 3, 4, 5, 6];
let res = arr.filter(x => x % 2 != 0);
// res => [1, 3, 5]
複製代碼

過濾不知足條件的值

let arr = [1, 2, 3, 4, 5, 6];
let res = arr.filter(x => x > 3);
// res => [4, 5, 6]
複製代碼

過濾空字符串

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() 返回 a和b兩個值的大小的比較結果，sort()根據返回結果進行排序：
若 fun(a, b) 小於 0 ，則 a 排在 b 前面；
若 fun(a, b) 等於 0 ，則 a b 位置不變；
若 fun(a, b) 大於 0 ，則 a 排在 b 後面；

返回值：
返回排序後的新數組，並修改原數組。

實例：

升序降序數組

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]
複製代碼

字符串排序

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;
})
複製代碼