JavaScript?數(shù)組方法filter與reduce
前言
在ES6新增的數(shù)組方法中，包含了多個(gè)遍歷方法，其中包含了用于篩選的filter和reduce
filter
主要用于篩選數(shù)組的filter方法，在使用中，不會(huì)改變原數(shù)組，同時(shí)會(huì)將符合篩選條件的元素，放入新的數(shù)組進(jìn)行返回。
/***
* @item 數(shù)組元素
* @index 遍歷數(shù)組下標(biāo)
* @thisArr 當(dāng)前數(shù)組
*/
let arr1 = [1, 2, 3, 4, 5];
let newArr1 = arr1.filter((item, index, thisArr) => {
console.log(item);
console.log(index);
console.log(thisArr);
return item > 2;
})
console.log(arr1);
console.log(newArr1);`上面的代碼，運(yùn)行之后，可以看到原來的數(shù)組arr1沒有發(fā)生改變，而newArr1用于接收符合篩選條件的數(shù)組
// [1, 2, 3, 4, 5] arr1 // [3, 4, 5] newArr1
reduce
不同于map和filter這類遍歷方法，reduce的語法較為特殊一點(diǎn)
語法：
array.reduce(function(total,currentValue,currentIndex,thisArr){},initValue);
@function回調(diào)函數(shù)作為第一個(gè)參數(shù)，- total作為返回值或者初始值進(jìn)行返回
- currentValue當(dāng)前遍歷的元素
- currentIndex當(dāng)前遍歷元素下標(biāo)
- thisArr為當(dāng)前執(zhí)行操作的數(shù)組。
- initValue是作為傳遞給函數(shù)的初始值
數(shù)組求和
// 數(shù)組求和
let arr1 = [1, 2, 3, 4, 5]
let totals = arr1.reduce(function (prev, next) {
console.log(prev);
console.log(next);
return prev + next;
}, 0)
console.log(totals)篩選首字母是否是含有b字母
let arr = ['beep', 'boop', 'foo', 'bar'];
console.log(arr.reduce((acc, val) => (val[0] === 'b' && acc.push(val), acc), []));
// 進(jìn)階每個(gè)數(shù)是否含有'b'
arr.reduce((acc, val) =>
(val.indexOf('b') >-1 && acc.push(val), acc),
[])除了數(shù)組求和之外，reduce還可以處理數(shù)組去重，遍歷最大值最小值的操作
同時(shí)還能已高階函數(shù)的形式供其他函數(shù)進(jìn)行調(diào)用。
結(jié)語
reduce和filter作為ES6中數(shù)組新增的方法，在面試和開發(fā)中經(jīng)常會(huì)遇到，可以通過這兩個(gè)函數(shù)結(jié)合其他類似map等新方法去處理一些較為復(fù)雜的數(shù)據(jù)。
到此這篇關(guān)于JavaScript 數(shù)組方法filter與reduce的文章就介紹到這了,更多相關(guān)JavaScript filter與reduce內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
微信小程序使用WxJava獲取用戶手機(jī)號(hào)步驟
這篇文章主要介紹了微信小程序使用WxJava獲取用戶手機(jī)號(hào)的相關(guān)資料,還詳細(xì)講解了WxMpService接口的主要功能和常用方法,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-12-12
bootstrap導(dǎo)航欄、下拉菜單、表單的簡單應(yīng)用實(shí)例解析
這篇文章主要介紹了bootstrap導(dǎo)航欄、下拉菜單、表單的簡單應(yīng)用實(shí)例解析,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2017-01-01
最近在網(wǎng)上查閱了不少Javascript閉包(closure)相關(guān)的資料，寫的大多是非常的學(xué)術(shù)和專業(yè)。對于初學(xué)者來說別說理解閉包了，就連文字?jǐn)⑹龆己茈y看懂。撰寫此文的目的就是用最通俗的文字揭開Javascript閉包的真實(shí)面目。2010-12-12
這篇文章主要介紹了JS數(shù)組扁平化(flat)方法總結(jié)詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了JS+JQuery實(shí)現(xiàn)無縫連接輪播圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
Swiper如何實(shí)現(xiàn)兩行四列輪播圖效果實(shí)例
大家應(yīng)該都知道,Swiper是純javascript打造的滑動(dòng)特效插件,面向手機(jī)、平板電腦等移動(dòng)終端,下面這篇文章主要給大家介紹了關(guān)于Swiper如何實(shí)現(xiàn)兩行四列輪播圖效果的相關(guān)資料,需要的朋友可以參考下2022-10-10
使用TypeScript和裝飾器實(shí)現(xiàn)前端數(shù)據(jù)脫敏
這篇文章主要為大家詳細(xì)介紹了如何使用TypeScript和裝飾器實(shí)現(xiàn)前端數(shù)據(jù)脫敏功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解一下2024-11-11
微信小程序返回上一級(jí)頁面的實(shí)現(xiàn)代碼
這篇文章主要介紹了微信小程序返回上一級(jí)頁面的實(shí)現(xiàn)代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-06-06
這篇文章主要為大家詳細(xì)介紹了多種方式實(shí)現(xiàn)js圖片預(yù)覽,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
通過js控制時(shí)間,一秒一秒自己動(dòng)的實(shí)例
下面小編就為大家?guī)硪黄ㄟ^js控制時(shí)間,一秒一秒自己動(dòng)的實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10