欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

詳解ES6數(shù)組方法find()、findIndex()的總結(jié)

 更新時(shí)間:2020年05月12日 10:54:58   作者:huangfuyk  
這篇文章主要介紹了詳解ES6數(shù)組方法find()、findIndex()的總結(jié),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

本文主要講解ES6數(shù)組方法find()findIndex(),關(guān)于JS的更多數(shù)組方法,可參考以下:

①JavaScript 內(nèi)置對(duì)象之-Array

②ES5新增數(shù)組方法(例:map()、indexOf()、filter()等)

③ES6新增字符串?dāng)U張方法includes()、startsWith()、endsWith()

1. find()

該方法主要應(yīng)用于查找第一個(gè)符合條件的數(shù)組元素,即返回通過測(cè)試(函數(shù)內(nèi)判斷)的數(shù)組的第一個(gè)元素的值。

它的參數(shù)是一個(gè)回調(diào)函數(shù),為數(shù)組中的每個(gè)元素都調(diào)用一次函數(shù)執(zhí)行。在回調(diào)函數(shù)中可以寫你要查找元素的條件,當(dāng)條件成立為true時(shí),返回該元素,之后的值不會(huì)再調(diào)用執(zhí)行函數(shù)。如果沒有符合條件的元素,返回值為undefined。

例:

① 以下代碼在myArr數(shù)組中查找元素值大于5的元素,找到后立即返回,并不會(huì)繼續(xù)往下執(zhí)行。返回的結(jié)果為查找到的元素:

const myArr=[1,2,3,4,5,6,7,8,9];
var v=myArr.find(value=>value>5);
console.log(v);

結(jié)果:


② 如果把條件改為>10,沒有符合元素,則返回undefined:

const myArr=[1,2,3,4,5,6,7,8,9];
var v=myArr.find(value=>value>10);
console.log(v); 

結(jié)果:


③ 它的回調(diào)函數(shù)有三個(gè)參數(shù)。value:當(dāng)前的數(shù)組元素。index:當(dāng)前索引值。arr:被查找的數(shù)組。

例:

查找索引值為5的元素,結(jié)果顯示6:

const myArr=[1,2,3,4,5,6];
var v=myArr.find((value,index,arr)=>{
 return index===5;
});
console.log(v);

結(jié)果:

注意:

  • find() 對(duì)于空數(shù)組,函數(shù)是不會(huì)執(zhí)行的。
  • find() 并沒有改變數(shù)組的原始值。

2. findIndex()

  • findIndex() 方法返回傳入一個(gè)測(cè)試條件(函數(shù))符合條件的數(shù)組第一個(gè)元素位置。
  • 當(dāng)數(shù)組中的元素在測(cè)試條件時(shí)返回 true 時(shí), findIndex() 返回符合條件的元素的索引位置注:find()返回的是元素),之后的值不會(huì)再調(diào)用執(zhí)行函數(shù)。如果沒有符合條件的元素返回 -1注:find()返回的是undefined)。
  • findIndex()與find()的使用方法相同,findIndex()當(dāng)中的回調(diào)函數(shù)也是接收三個(gè)參數(shù),與find()相同。
  • findIndex()方法實(shí)現(xiàn)是通過循環(huán)遍歷查找。應(yīng)用場(chǎng)景廣泛,可以查找大于等于小于,表達(dá)式可以隨便寫。實(shí)際上相當(dāng)于一個(gè)for循環(huán),只不過找到了你不需要自己退出。

語法:

array.findIndex(function(currentValue, index, arr), thisValue);

例①:

const myArr=[
 {
 id:1,
 Name:"張三"
 },
 {
 id:2,
 Name:"李四"
 },
 {
 id:3,
 Name:"王五"
 },
 {
 id:4,
 Name:"趙六"
 }
];
var i0=myArr.findIndex((value)=>value.id==1);
console.log(i0); 
var i1=myArr.findIndex((value)=>value.id==2);
console.log(i1); 
var i2=myArr.findIndex((value)=>value.id==3);
console.log(i2); 
var i3=myArr.findIndex((value)=>value.id==4);
console.log(i3); 
var i4=myArr.findIndex((value)=>value.id==5);
console.log(i4); 

結(jié)果:


例②:

const myArr = [1,2,3,4,5,6,7,8,9];
function bigNum(ele){
 return ele > 6;
}
console.log(myArr.findIndex(bigNum));

結(jié)果(也就是數(shù)組中第一個(gè)大于6的數(shù),即“7”所在位置的索引):


例③:可以用來返回符合大于輸入框中數(shù)字的數(shù)組索引

var ages = [2,4,6,8,10];
 
function checkAdult(age) {
 return age >= document.getElementById("ageToCheck").value;
}
 
function myFunction() {
 document.getElementById("demo").innerHTML = ages.findIndex(checkAdult);
}

注意:

  • findIndex() 對(duì)于空數(shù)組,函數(shù)是不會(huì)執(zhí)行的。
  • findIndex() 并沒有改變數(shù)組的原始值。

到此這篇關(guān)于詳解ES6數(shù)組方法find()、findIndex()的總結(jié)的文章就介紹到這了,更多相關(guān)ES6 find() findIndex()內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評(píng)論