乐趣区

关于javascript:数组方法findfilterfindIndex简介

jiezi

前言

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

退出移动版