Ps. 晚上加班到快十點,回來趕緊整理整理這篇文章,今天老大給我推薦了一篇文章,我從寫技術博客中收穫到了什麼?- J_Knight_,感受也是很多,自己也需要慢慢養成記錄博客的習慣,即使起步艱難,難以堅持,但還是要讓自己加油加油。
前兩天把我整理的【複習資料】ES6/ES7/ES8/ES9資料整理(個人整理)分享給大家啦。
正文內容開始:
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內置方法:
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)
: 處理的方法,四個參數;-
currentValue
當前處理的元素的值
-
index
當前處理的元素的索引,可選
-
array
調用map()
方法的數組,可選
-
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)
: 累記器的方法,四個參數:-
returnValue
上一次處理的返回值,或者初始值
-
currentValue
當前處理的元素的值,可選
-
currentIndex
當前處理的元素的索引,可選
-
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
則保存該元素,反之不保留,三個參數:-
ele
當前處理的元素
-
index
當前處理的元素的索引,可選
-
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;
})
總結下: sort()
主要作爲排序功能,因此核心就是正確實現一個“排序”函數。
3. 參考文章
分享的內容比較簡單,但是還是希望能幫助到需要的人哈。~~感謝
Author | 王平安 |
---|---|
[email protected] | |
博 客 | www.pingan8787.com |
微 信 | pingan8787 |
每日文章推薦 | https://github.com/pingan8787/Leo_Reading/issues |
ES小冊 | es.pingan8787.com |