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

資訊專欄INFORMATION COLUMN

數(shù)組方法find、filter、findIndex簡(jiǎn)介

Yangder / 446人閱讀

摘要：方法，意思為過(guò)濾，同樣接收一個(gè)回調(diào)函數(shù)，該方法的使用場(chǎng)景是查找數(shù)組內(nèi)符合指定條件的所有元素。

前言

ES6提供了很多新的API，數(shù)組對(duì)象的尤為實(shí)用，但是如果我們沒(méi)有在相對(duì)應(yīng)的開(kāi)發(fā)環(huán)境下，很難對(duì)這些API有深入的了解，畢竟實(shí)踐出真知。

find、filter、findIndex這三個(gè)方法都是對(duì)于數(shù)組的查找，其中返回的值略微相關(guān)，所以在這里做一個(gè)介紹。

Array.prototype.find()

這是一個(gè)數(shù)組原型上的方法，調(diào)用格式應(yīng)該是使用數(shù)組對(duì)象來(lái)調(diào)用，該方法接收一個(gè)回調(diào)函數(shù)callback，如：array.find(callback)。
find方法用途是 查找符合條件的第一個(gè)數(shù)組元素
例子：

var array = [1,4,6,7,9,11,13];
//需求： 查找大于10的第一個(gè)數(shù)
function callback(elem){
    return elem > 10;
}
var dayu10 = array.find(callback);
console.log(dayu10); // 11

如果找不到，返回undefined
例子：

var array = [1,4,6,7,9,11,13];
//需求： 查找大于100的第一個(gè)數(shù)
function callback(elem){
    return elem > 100;
}
var dayu100 = array.find(callback);
console.log(dayu100); // undefined

很顯然，這個(gè)方法比較適合用來(lái) 判斷數(shù)組內(nèi)是否包含某種條件的值的元素。
或者進(jìn)一步擴(kuò)展，查找json數(shù)組內(nèi)包含某個(gè)值的對(duì)象。如下：

var array = [
    {name:"xxa",age: 15},
    {name:"xxb",age:18}
];
var xx = array.find(elem => elem.name === "xxa");
console.log(xx); // {name:"xxa",age: 15}
Array.prototype.findIndex()

作為原型上的方法，調(diào)用和參數(shù)與find相同。
顧名思義，這個(gè)對(duì)比find方法，這個(gè)方法返回的是符合條件的元素的下標(biāo)index。
例子：

var array = [1,4,6,7,9,11,13];
//需求： 查找大于10的第一個(gè)數(shù)
function callback(elem){
    return elem > 10;
}
var dayu10index = array.find(callback);
console.log(dayu10index); // 5

如果找不到，返回-1，這點(diǎn)類似字符串查找的indexOf或者正則表達(dá)式的search，總而言之，無(wú)論什么查找方法，找不到就是-1.
例子：

var array = [1,4,6,7,9,11,13];
//需求： 查找大于100的第一個(gè)數(shù)
function callback(elem){
    return elem > 100;
}
var dayu100index = array.find(callback);
console.log(dayu100index); // -1

很顯然，這個(gè)方法更適合用來(lái) 判斷數(shù)組內(nèi)是否包含某種條件的值的元素。

Array.prototype.filter()

作為原型上的方法，調(diào)用和參數(shù)如上。
filter方法，意思為過(guò)濾，同樣接收一個(gè)回調(diào)函數(shù)callback，該方法的使用場(chǎng)景是 查找數(shù)組內(nèi)符合指定條件的所有元素。
例子：

var array = [1,6,5,9,7,16,18];
//查找偶數(shù)
function callback(elem){
    return elem % 2 === 0;
}
var oushu = array.filter(callback);
console.log(oushu);// [6,16,18];

該方法返回的是一個(gè)集合，即數(shù)組如果找不到，返回空數(shù)組[]。
例子：

var array = [1,6,5,9,7,16,18];
//查找大于20的數(shù)
function callback(elem){
    return elem > 20;
}
var dayu20 = array.filter(callback);
console.log(dayu20);// [];
結(jié)語(yǔ)

這三個(gè)方法，都是對(duì)數(shù)組元素的查找，find返回第一個(gè)符合的元素的值，findIndex返回第一個(gè)符合的元素的下標(biāo)，filter返回符合的元素的集合。
這三個(gè)方法都不會(huì)改變?cè)瓟?shù)組的值，具有很大的相同點(diǎn)，所以在這里統(tǒng)一介紹。
相關(guān)鏈接 MDN web docs -- Array

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/103306.html

相關(guān)文章

  • 生動(dòng)形象解釋forEach、filter、map、some、every、find、findIndex

    摘要：前言從最開(kāi)始學(xué)的循環(huán)遍歷方法，到后來(lái)層出不窮的各種遍歷方法，其實(shí)最大的區(qū)別就是應(yīng)用場(chǎng)景的不同。我們最需要記住的就是，什么情況下用哪一種方法比較合適。 前言 從最開(kāi)始學(xué)的for循環(huán)遍歷方法，到后來(lái)層出不窮的各種遍歷方法，其實(shí)最大的區(qū)別就是應(yīng)用場(chǎng)景的不同。我們最需要記住的就是，什么情況下用哪一種方法比較合適。 從挑土豆開(kāi)始 showImg(https://segmentfault.com/...

    Luosunce 評(píng)論0 收藏0

  • forEach、map、filter、find、sort、some等易錯(cuò)點(diǎn)整理

    摘要：最近手頭上做了一個(gè)很大的后臺(tái)管理項(xiàng)目，前端對(duì)復(fù)雜數(shù)據(jù)的處理要求頗高，也確實(shí)讓自己發(fā)現(xiàn)了很多之前被忽視的細(xì)節(jié)。鳴人佐助卡卡西佐助佐助佐助但是很遺憾及更早版本也不支持。 ??最近手頭上做了一個(gè)很大的后臺(tái)管理項(xiàng)目，前端對(duì)復(fù)雜數(shù)據(jù)的處理要求頗高，也確實(shí)讓自己發(fā)現(xiàn)了很多之前被忽視的細(xì)節(jié)。在此特整理出來(lái)，希望不熟悉的朋友們們以后可以繞開(kāi)我踩的這些坑。本文初衷在于幫助大家梳理一些數(shù)組操作上的重點(diǎn)和易...

    AJie 評(píng)論0 收藏0

  • JavaScript數(shù)組迭代（遍歷）方法

    摘要：正文和中新增的的數(shù)組迭代方法如下其中，是新增的，其余都是新增的。指數(shù)組后，返回過(guò)濾后的新數(shù)組。它的參數(shù)跟方法是一樣的所有數(shù)組成員依次執(zhí)行回調(diào)函數(shù)，直到找出第一個(gè)返回值為的成員，然后返回該成員。 前言 ES5和ES6中新增了不少東西，對(duì)于數(shù)組而言，新增了不少迭代方法，讓我們可以拋棄for循環(huán)，更方便的寫(xiě)JS代碼。 正文 ES5和ES6中新增的的數(shù)組迭代方法如下： forEach map...

    light 評(píng)論0 收藏0

  • JavaScript30秒， 從入門(mén)到放棄之Array（五）

    摘要：原文地址秒，從入門(mén)到放棄之五博客地址秒，從入門(mén)到放棄之五水平有限，歡迎批評(píng)指正從給定的數(shù)組中隨機(jī)選出指定個(gè)數(shù)的數(shù)組元素。否則判斷數(shù)組元素是否大于或者等于指定元素，尋找過(guò)程與前邊類似。 原文地址：JavaScript30秒， 從入門(mén)到放棄之Array（五）博客地址：JavaScript30秒， 從入門(mén)到放棄之Array（五） 水平有限，歡迎批評(píng)指正 sampleSize Gets n...

    dunizb 評(píng)論0 收藏0

  • [翻譯]map和reduce，處理數(shù)據(jù)結(jié)構(gòu)的利器

    摘要：一個(gè)簡(jiǎn)單的實(shí)踐返回?cái)?shù)組或類似結(jié)構(gòu)中滿足條件的第一個(gè)元素。這個(gè)翻譯項(xiàng)目才開(kāi)始，以后會(huì)翻譯越來(lái)越多的作品。 原文地址：https://codeburst.io/writing-javascript-with-map-reduce-980602ff2f2f 作者：Shivek Khurana 簡(jiǎn)介：本文是一份編寫(xiě)優(yōu)雅、簡(jiǎn)潔和函數(shù)式ES6代碼的快捷清單。 現(xiàn)如今JavaScript有許多問(wèn)...

    233jl 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<