前言
ES6提供了很多新的API,數組對象的尤爲實用,但是如果我們沒有在相對應的開發環境下,很難對這些API有深入的瞭解,畢竟實踐出真知。
find、filter、findIndex這三個方法都是對於數組的查找,其中返回的值略微相關,所以在這裏做一個介紹。
Array.prototype.find()
這是一個數組原型上的方法,調用格式應該是使用數組對象來調用,該方法接收一個回調函數callback
,如:array.find(callback)
。find
方法用途是 查找符合條件的第一個數組元素
例子:
var array = [1,4,6,7,9,11,13];
//需求: 查找大於10的第一個數
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的第一個數
function callback(elem){
return elem > 100;
}
var dayu100 = array.find(callback);
console.log(dayu100); // undefined
很顯然,這個方法比較適合用來 判斷數組內是否包含某種條件的值的元素。
或者進一步擴展,查找json數組內包含某個值的對象。如下:
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()
作爲原型上的方法,調用和參數與find
相同。
顧名思義,這個對比find
方法,這個方法返回的是符合條件的元素的下標index
。
例子:
var array = [1,4,6,7,9,11,13];
//需求: 查找大於10的第一個數
function callback(elem){
return elem > 10;
}
var dayu10index = array.find(callback);
console.log(dayu10index); // 5
如果找不到,返回-1
,這點類似字符串查找的indexOf
或者正則表達式的search
,總而言之,無論什麼查找方法,找不到就是-1
.
例子:
var array = [1,4,6,7,9,11,13];
//需求: 查找大於100的第一個數
function callback(elem){
return elem > 100;
}
var dayu100index = array.find(callback);
console.log(dayu100index); // -1
很顯然,這個方法更適合用來 判斷數組內是否包含某種條件的值的元素。
Array.prototype.filter()
作爲原型上的方法,調用和參數如上。filter
方法,意思爲過濾
,同樣接收一個回調函數callback
,該方法的使用場景是 查找數組內符合指定條件的所有元素
。
例子:
var array = [1,6,5,9,7,16,18];
//查找偶數
function callback(elem){
return elem % 2 === 0;
}
var oushu = array.filter(callback);
console.log(oushu);// [6,16,18];
該方法返回的是一個集合,即數組
如果找不到,返回空數組[]。
例子:
var array = [1,6,5,9,7,16,18];
//查找大於20的數
function callback(elem){
return elem > 20;
}
var dayu20 = array.filter(callback);
console.log(dayu20);// [];
結語
這三個方法,都是對數組元素的查找,find
返回第一個符合的元素的值,findIndex
返回第一個符合的元素的下標,filter
返回符合的元素的集合。
這三個方法都不會改變原數組的值,具有很大的相同點,所以在這裏統一介紹。
相關鏈接 MDN web docs -- Array