數組方法find、filter、findIndex簡介

前言

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