JavaScript中常見(jiàn)的高階函數(shù)總結(jié)
前言
一個(gè)函數(shù)可以接受另一個(gè)函數(shù)作為參數(shù),就把這個(gè)函數(shù)叫做高階函數(shù)。
一個(gè)最簡(jiǎn)單的高階函數(shù):
function add(x, y, f) {
return f(x) + f(y);
}
//當(dāng)調(diào)用add(-5, 6, Math.abs)時(shí),參數(shù)x,y和f分別接收-5,6和函數(shù)Math.abs,根據(jù)函數(shù)定義,可以推導(dǎo)計(jì)算過(guò)程為:
//x = -5;
//y = 6;
//f = Math.abs;
//f(x) + f(y) ==> Math.abs(-5) + Math.abs(6) ==> 11;
//return 11;
//用代碼驗(yàn)證一下:
add(-5, 6, Math.abs); // 11map函數(shù)
map()方法定義在JavaScript的數(shù)組中,我們調(diào)用Array的map()方法,傳入我們自己的函數(shù),就得到了一個(gè)新的數(shù)組。
舉個(gè)例子:現(xiàn)在有一個(gè)數(shù)組,想讓每個(gè)數(shù)組元素都變成它的平方,輸出這個(gè)新數(shù)組,傳統(tǒng)方法也很簡(jiǎn)單,今天我們用map函數(shù)來(lái)寫(xiě):
function pow(x) {
return x * x;
}
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
alert (arr.map(pow))

reduce函數(shù)
數(shù)組的reduce()把一個(gè)函數(shù)作用在這個(gè)數(shù)組的[x1, x2, x3…]上,這個(gè)函數(shù)必須接收兩個(gè)參數(shù),reduce()把結(jié)果繼續(xù)和序列的下一個(gè)元素做累積計(jì)算。
舉個(gè)例子:
let arr=[6,8,8,6,9,6]
let a=arr.reduce(function(x,y){
return x+y;
})
alert(a)

filter函數(shù)
filter函數(shù)可以說(shuō)是數(shù)組的一個(gè)過(guò)濾函數(shù),它會(huì)將接收的函數(shù)作用于每一個(gè)元素,然后根據(jù)返回的布爾值決定這個(gè)元素留下還是丟掉。
filter()接收的回調(diào)函數(shù),其實(shí)可以有多個(gè)參數(shù) ,通常我們僅使用 第一個(gè)參數(shù) 表示元素的位置和數(shù)組本身。
看一個(gè)簡(jiǎn)單的例子:有一個(gè)數(shù)組,現(xiàn)在想只保留數(shù)組的偶數(shù)元素,奇數(shù)元素全部過(guò)濾掉,看下代碼:
var arr = [1,2,1,2,1,2,1,2];
var r = arr.filter(function (x) {
return x % 2 == 0;
});
alert(r)

sort
sort主要用于排序
看下例子:有一個(gè)數(shù)組,想將它按從小到大或從大到小的順序排列,看下代碼:
//從小到大排列
let arr=[1,3,1,2,3,6,4,3]
let arr1=arr.sort((a,b)=>a-b)
alert(arr1)

//從大到小排列
let arr=[1,3,1,2,3,6,4,3]
let arr1=arr.sort((a,b)=>b-a)
alert(arr1)

every方法
數(shù)組對(duì)象提供的every()方法判斷數(shù)組的所有元素是否滿(mǎn)足測(cè)試條件
舉個(gè)例子:測(cè)試數(shù)組元素是否大于6
let arr=[4,6,8,8]
let result=arr.every(function(a){
return a>6
})
alert(result)

find方法
數(shù)組對(duì)象提供的find()方法用于查找符合條件的第一個(gè)元素,如果找到 了,返回這個(gè)元素,否則,返回undefined
let arr=[4,6,8,9]
let result=arr.find(function(a){
return a>6
})
alert(result)

findIndex方法
數(shù)組對(duì)象提供的find()方法用于查找符合條件的第一個(gè)元素,如果找到 了,返回這個(gè)元素的索引
let arr=[4,6,8,9]
let result=arr.findIndex(function(a){
return a>6
})
alert(result)

foreach方法
forEach() 方法對(duì)數(shù)組的每個(gè)元素執(zhí)行一次給定的函數(shù)
舉個(gè)例子:遍歷數(shù)組,先使用傳統(tǒng)的for循環(huán),再使用foreach函數(shù),看下代碼:
const items = ['item1', 'item2', 'item3'];
const copy = [];
//傳統(tǒng)方式
for (let i=0; i<items.length; i++) {
copy.push(items[i]);
}
// foreach方法
items.forEach(function(item){
copy.push(item);
});
總結(jié)
到此這篇關(guān)于JavaScript中常見(jiàn)的高階函數(shù)總結(jié)的文章就介紹到這了,更多相關(guān)JavaScript高階函數(shù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript通如何過(guò)RGraph實(shí)現(xiàn)動(dòng)態(tài)儀表盤(pán)
這篇文章主要介紹了JavaScript通如何過(guò)RGraph實(shí)現(xiàn)動(dòng)態(tài)儀表盤(pán),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-10-10
JavaScript實(shí)現(xiàn)常用二級(jí)省市級(jí)聯(lián)下拉列表的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)常用二級(jí)省市級(jí)聯(lián)下拉列表的方法,實(shí)例分析了javascript實(shí)現(xiàn)級(jí)聯(lián)下拉列表的技巧與相關(guān)的元素操作方法,需要的朋友可以參考下2015-03-03
js實(shí)現(xiàn)簡(jiǎn)單的獲取驗(yàn)證碼按鈕效果
本文主要介紹了js實(shí)現(xiàn)簡(jiǎn)單的獲取驗(yàn)證碼按鈕加效果的實(shí)例,具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03
js鼠標(biāo)滑輪滾動(dòng)事件綁定的簡(jiǎn)單實(shí)例(兼容主流瀏覽器)
本篇文章主要介紹了js鼠標(biāo)滑輪滾動(dòng)事件綁定的簡(jiǎn)單實(shí)例(兼容主流瀏覽器)。需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-01-01
使用mixins實(shí)現(xiàn)elementUI表單全局驗(yàn)證的解決方法
這篇文章主要介紹了使用mixins實(shí)現(xiàn)elementUI表單的全局驗(yàn)證的解決方法,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04
數(shù)組方法解決JS字符串連接性能問(wèn)題有爭(zhēng)議
大多數(shù)情況下,加法運(yùn)算符是首選;如果用戶(hù)主要使用IE6或7,并且字符串大小較大或數(shù)量較多時(shí),那么數(shù)組技術(shù)就很值得。2011-01-01
用jscript實(shí)現(xiàn)新建和保存一個(gè)word文檔
用jscript實(shí)現(xiàn)新建和保存一個(gè)word文檔...2007-06-06

