成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

【重溫基礎(chǔ)】JS中的常用高階函數(shù)介紹

gitmilk / 2073人閱讀

摘要:也可以直接調(diào)用內(nèi)置方法常用高階函數(shù)方法的作用是接收一個函數(shù)作為參數(shù),對數(shù)組中每個元素按順序調(diào)用一次傳入的函數(shù)并返回結(jié)果,不改變原數(shù)組,返回一個新數(shù)組。

Ps. 晚上加班到快十點,回來趕緊整理整理這篇文章,今天老大給我推薦了一篇文章,我從寫技術(shù)博客中收獲到了什么?- J_Knight_,感受也是很多,自己也需要慢慢養(yǎng)成記錄博客的習慣,即使起步艱難,難以堅持,但還是要讓自己加油加油。
前兩天把我整理的【復習資料】ES6/ES7/ES8/ES9資料整理(個人整理)要分享給大家啦。

正文內(nèi)容開始:

1.介紹

個人簡單理解為,一個函數(shù)可以接收其他函數(shù)作為參數(shù),這種函數(shù)便稱為高階函數(shù),而主要目的就是為了能接收其他函數(shù)作為參數(shù)。

Q: 為什么可以接收一個函數(shù)作為參數(shù)?   
A: 因為函數(shù)可以接收變量作為參數(shù),而變量可以聲明一個方法。

簡單實例:

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

這段代碼的意思:定義方法f,接收兩個參數(shù),方法a和變量b,在方法a中返回一段字符串,當執(zhí)行方法f并傳入?yún)?shù)方法a和參數(shù)b的時候,返回"hi leo"。

也可以直接調(diào)用JS內(nèi)置方法:

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.常用高階函數(shù) 2.1 map()

map()方法的作用是:接收一個函數(shù)作為參數(shù),對數(shù)組中每個元素按順序調(diào)用一次傳入的函數(shù)并返回結(jié)果,不改變原數(shù)組,返回一個新數(shù)組。
通常使用方式:arr.map(callback()),更多詳細介紹可以參考 MDN Array.map()。
參數(shù)

arr : 需要操作的數(shù)組;

callback(currentValue, index, array, thisArg) : 處理的方法,四個參數(shù);

currentValue 當前處理的元素的

index 當前處理的元素的索引,可選

array 調(diào)用map()方法的數(shù)組,可選

currentVthisArgalue 執(zhí)行 callback 函數(shù)時使用的 this 值,可選

返回值
返回一個處理后的新數(shù)組。

實例

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 循環(huán),map()書寫起來更加簡潔:

let arr = [1, 3, -5];
let a1 = [];
for (var i=0; i [2, 4, -4]

map()作為高階函數(shù),事實上它把運算規(guī)則抽象了。

2.2 reduce()

reduce()方法的作用是:接收一個函數(shù),對數(shù)組進行累加操作,把累計結(jié)果和下一個值進行操作,最后返回最終的單個結(jié)果值。

通常使用方式:arr.reduce(callback(), initValue),更多詳細介紹可以參考 MDN Array.reduce()

參數(shù)

callback(returnValue, currentValue, currentIndex, array) : 累記器的方法,四個參數(shù):

returnValue 上一次處理的返回值,或者初始值

currentValue 當前處理的元素的,可選

currentIndex 當前處理的元素的索引,可選

array 調(diào)用reduce()方法的數(shù)組,可選

initValue 初次調(diào)用callback()時候returnValue參數(shù)的初始值,默認數(shù)組第一個元素,可選

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

實例

數(shù)組求和

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

二維數(shù)組轉(zhuǎn)化為一維

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()方法的作用是:接收一個函數(shù),依次作用數(shù)組每個元素,并過濾符合函數(shù)條件的元素,將剩下的數(shù)組作為一個新數(shù)組返回。

通常使用方式:arr.filter(callback(), thisArg),更多詳細介紹可以參考 MDN Array.filter()

參數(shù)

callback(ele, index, array) : 過濾條件的方法,當返回true則保存該元素,反之不保留,三個參數(shù):

ele 當前處理的元素

index 當前處理的元素的索引,可選

array 調(diào)用filter()方法的數(shù)組,可選

thisArg 執(zhí)行 callback 時的用于 this 的值,可選

返回值
返回一個過濾剩下的元素組成的新數(shù)組。

實例

過濾奇數(shù)值

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"]

總結(jié)下: filter()主要作為篩選功能,因此核心就是正確實現(xiàn)一個“篩選”函數(shù)。

2.4 sort()

sort()方法的作用是:接收一個函數(shù),對數(shù)組的元素進行排序,并返回排序后的新數(shù)組。默認排序順序是根據(jù)字符串Unicode碼點。

通常使用方式:arr.sort(fun()),更多詳細介紹可以參考 MDN Array.sort()
compareFunction 可選
用來指定按某種順序進行排列的函數(shù)。如果省略,元素按照轉(zhuǎn)換為的字符串的各個字符的Unicode位點進行排序。
參數(shù)

fun(a, b) : 指定按某種順序進行排列的函數(shù),若省略則按照轉(zhuǎn)換為的字符串的各個字符的Unicode位點進行排序,兩個可選參數(shù):

fun() 返回 ab兩個值的大小的比較結(jié)果,sort()根據(jù)返回結(jié)果進行排序:

fun(a, b) 小于 0 ,則 a 排在 b 前面;

fun(a, b) 等于 0 ,則 a b 位置不變;

fun(a, b) 大于 0 ,則 a 排在 b 后面;

返回值
返回排序后的新數(shù)組,并修改原數(shù)組。

實例

升序降序數(shù)組

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;
})

總結(jié)下: sort()主要作為排序功能,因此核心就是正確實現(xiàn)一個“排序”函數(shù)。

3. 參考文章

阮一峰 JS高階函數(shù)

分享的內(nèi)容比較簡單,但是還是希望能幫助到需要的人哈。~~感謝

Author 王平安
E-mail [email protected]
博 客 www.pingan8787.com
微 信 pingan8787
每日文章推薦 https://github.com/pingan8787...
ES小冊 es.pingan8787.com

歡迎關(guān)注微信公眾號【前端自習課】每天早晨,與您一起學習一篇優(yōu)秀的前端技術(shù)博文 .

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/99735.html

相關(guān)文章

  • 重溫基礎(chǔ)】21.高階函數(shù)

    摘要:歡迎您的支持系列目錄復習資料資料整理個人整理重溫基礎(chǔ)篇重溫基礎(chǔ)對象介紹重溫基礎(chǔ)對象介紹重溫基礎(chǔ)介紹重溫基礎(chǔ)相等性判斷重溫基礎(chǔ)閉包重溫基礎(chǔ)事件本章節(jié)復習的是中的高階函數(shù),可以提高我們的開發(fā)效率。 本文是 重溫基礎(chǔ) 系列文章的第二十一篇。 今日感受:想家。 本人自己整理的【Cute-JavaScript】資料,包含:【ES6/ES7/ES8/ES9】,【JavaScript基礎(chǔ)...

    wua_wua2012 評論0 收藏0
  • 重溫基礎(chǔ)】22.內(nèi)存管理

    摘要:內(nèi)存泄露內(nèi)存泄露概念在計算機科學中,內(nèi)存泄漏指由于疏忽或錯誤造成程序未能釋放已經(jīng)不再使用的內(nèi)存。判斷內(nèi)存泄漏,以字段為準。 本文是 重溫基礎(chǔ) 系列文章的第二十二篇。 今日感受:優(yōu)化學習方法。 系列目錄: 【復習資料】ES6/ES7/ES8/ES9資料整理(個人整理) 【重溫基礎(chǔ)】1-14篇 【重溫基礎(chǔ)】15.JS對象介紹 【重溫基礎(chǔ)】16.JSON對象介紹 【重溫基礎(chǔ)】1...

    Pandaaa 評論0 收藏0
  • 重溫基礎(chǔ)】15.JS對象介紹

    摘要:構(gòu)造函數(shù)通常首字母大寫,用于區(qū)分普通函數(shù)。這種關(guān)系常被稱為原型鏈,它解釋了為何一個對象會擁有定義在其他對象中的屬性和方法。中所有的對象,都有一個屬性,指向?qū)嵗龑ο蟮臉?gòu)造函數(shù)原型由于是個非標準屬性,因此只有和兩個瀏覽器支持,標準方法是。 從這篇文章開始,復習 MDN 中級教程 的內(nèi)容了,在初級教程中,我和大家分享了一些比較簡單基礎(chǔ)的知識點,并放在我的 【Cute-JavaScript】系...

    booster 評論0 收藏0
  • 重溫基礎(chǔ)】19.閉包

    摘要:系列目錄復習資料資料整理個人整理重溫基礎(chǔ)篇重溫基礎(chǔ)對象介紹重溫基礎(chǔ)對象介紹重溫基礎(chǔ)介紹重溫基礎(chǔ)相等性判斷本章節(jié)復習的是中的關(guān)于閉包,這個小哥哥呀,看看。這里隨著閉包函數(shù)的結(jié)束,執(zhí)行環(huán)境銷毀,變量回收。 本文是 重溫基礎(chǔ) 系列文章的第十九篇。今日感受:將混亂的事情找出之間的聯(lián)系,也是種能力。 系列目錄: 【復習資料】ES6/ES7/ES8/ES9資料整理(個人整理) 【重溫基礎(chǔ)】...

    nanfeiyan 評論0 收藏0
  • 重溫基礎(chǔ)】9.正則表達式

    摘要:前置知識中的正則表達式是用來匹配字符串中指定字符組合的模式。另外需要記住正則表達式也是對象。在正則表達式創(chuàng)建時更新,不執(zhí)行。替換與正則表達式匹配的子串。查找以十六進制數(shù)規(guī)定的字符。正則表達式拓展介紹在中有兩種情況。 本文是 重溫基礎(chǔ) 系列文章的第九篇。 今日感受:時間管理-角色管理法。 系列目錄: 【復習資料】ES6/ES7/ES8/ES9資料整理(個人整理) 【重溫基礎(chǔ)】1.語...

    ispring 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<