共计 1767 个字符，预计需要花费 5 分钟才能阅读完成。
前言
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
