Javascript中關(guān)于Array.filter()的妙用詳解
前言
和map類(lèi)似，Array的filter也接收一個(gè)函數(shù)。但是和map不同的是， filter把傳入的函數(shù)依次作用于每個(gè)元素，然后根據(jù)返回值是 true 還是false決定保留還是丟棄該元素。
實(shí)例介紹
例如，在一個(gè)Array中，刪掉偶數(shù)，只保留奇數(shù)，可以這么寫(xiě)：
var arr = [1, 2, 4, 5, 6, 9, 10, 15];
var r = arr.filter(function (x) {
return x % 2 !== 0;
});
r; // [1, 5, 9, 15]
把一個(gè)Array中的空字符串刪掉，可以這么寫(xiě)：
var arr = ['A', '', 'B', null, undefined, 'C', ' '];
var r = arr.filter(function (s) {
return s && s.trim(); // 注：IE9(不包含IE9)以下的版本沒(méi)有trim()方法
});
arr; // ['A', 'B', 'C']
可見(jiàn)用 filter 這個(gè)高階函數(shù)，關(guān)鍵在于正確實(shí)現(xiàn)一個(gè)“篩選”函數(shù)。
回調(diào)函數(shù)
filter 接收的回調(diào)函數(shù)，其實(shí)可以有多個(gè)參數(shù)。通常我們僅使用第一個(gè)參數(shù)，表示Array的某個(gè)元素?；卣{(diào)函數(shù)還可以接收另外兩個(gè)參數(shù)，表示元素的位置和數(shù)組本身：
var arr = ['A', 'B', 'C'];
var r = arr.filter(function (element, index, self) {
console.log(element); // 依次打印'A', 'B', 'C'
console.log(index); // 依次打印0, 1, 2
console.log(self); // self就是變量arr
return true;
});
利用 filter ，可以巧妙地去除Array的重復(fù)元素：
var r,
arr = ['apple', 'strawberry', 'banana', 'pear', 'apple', 'orange', 'orange', 'strawberry'];
r = arr.filter(function (element, index, self) {
return self.indexOf(element) === index;
});
console.log(r.toString());
去除重復(fù)元素依靠的是 indexOf 總是返回第一個(gè)元素的位置，后續(xù)的重復(fù)元素位置與 indexOf 返回的位置不相等，因此被 filter 濾掉了。
總結(jié)
以上就是關(guān)于Javascript中Array.filter()妙用的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流。
相關(guān)文章
這篇文章主要介紹了leaflet基本使用示例教程,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-12-12
這篇文章主要介紹了JS實(shí)現(xiàn)Ajax的方法,結(jié)合實(shí)例形式分析了ajax的概念、原理、js實(shí)現(xiàn)與使用方法,需要的朋友可以參考下2016-12-12
微信小程序用戶授權(quán)、位置授權(quán)及獲取微信綁定手機(jī)號(hào)
這篇文章主要介紹了信小程序用戶授權(quán)、位置授權(quán)及獲取微信綁定手機(jī)號(hào),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-07-07
js jquery數(shù)組介紹，數(shù)組時(shí)編程中比較常用的處理，需要的朋友可以參考下2012-07-07
微信小程序?qū)崿F(xiàn)倒計(jì)時(shí)補(bǔ)零功能
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)倒計(jì)時(shí)補(bǔ)零功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-07-07
詳解小程序云開(kāi)發(fā)攻略(解決最棘手的問(wèn)題)
這篇文章主要介紹了詳解小程序云開(kāi)發(fā)攻略(解決最棘手的問(wèn)題)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
javascript實(shí)現(xiàn)簡(jiǎn)單的on事件綁定
這篇文章主要介紹了javascript中Event 對(duì)象中的 on, off 方法，非常的簡(jiǎn)單實(shí)用，有需要的小伙伴可以參考下2016-08-08
將中國(guó)標(biāo)準(zhǔn)時(shí)間轉(zhuǎn)換成標(biāo)準(zhǔn)格式的代碼
這篇文章主要介紹了將中國(guó)標(biāo)準(zhǔn)時(shí)間轉(zhuǎn)換成標(biāo)準(zhǔn)格式的方法,需要的朋友可以參考下2014-03-03
JS組件庫(kù)AlloyTouch實(shí)現(xiàn)圖片輪播過(guò)程解析
這篇文章主要介紹了JS組件庫(kù)AlloyTouch實(shí)現(xiàn)圖片輪播組件過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05
js Canvas實(shí)現(xiàn)圓形時(shí)鐘教程
這篇文章主要為大家詳細(xì)介紹了HTML5 Canvas實(shí)現(xiàn)圓形時(shí)鐘簡(jiǎn)易教程，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09