数组方法find、filter、findIndex简介

Yangder 发布于2019-08-23 16:48 / 414人阅读

摘要：方法，意思为过滤，同样接收一个回调函数，该方法的使用场景是查找数组内符合指定条件的所有元素。

前言

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

GPU云服务器云服务器 filter()方法 findIndex 数组方法数组操作方法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103306.html

生动形象解释forEach、filter、map、some、every、find、findIndex

摘要：前言从最开始学的循环遍历方法，到后来层出不穷的各种遍历方法，其实最大的区别就是应用场景的不同。我们最需要记住的就是，什么情况下用哪一种方法比较合适。前言从最开始学的for循环遍历方法，到后来层出不穷的各种遍历方法，其实最大的区别就是应用场景的不同。我们最需要记住的就是，什么情况下用哪一种方法比较合适。从挑土豆开始 showImg(https://segmentfault.com/...

Luosunce 2019-08-23 16:51 评论0 收藏0
forEach、map、filter、find、sort、some等易错点整理

摘要：最近手头上做了一个很大的后台管理项目，前端对复杂数据的处理要求颇高，也确实让自己发现了很多之前被忽视的细节。鸣人佐助卡卡西佐助佐助佐助但是很遗憾及更早版本也不支持。最近手头上做了一个很大的后台管理项目，前端对复杂数据的处理要求颇高，也确实让自己发现了很多之前被忽视的细节。在此特整理出来，希望不熟悉的朋友们们以后可以绕开我踩的这些坑。本文初衷在于帮助大家梳理一些数组操作上的重点和易...

AJie 2019-08-23 16:50 评论0 收藏0
JavaScript数组迭代（遍历）方法

摘要：正文和中新增的的数组迭代方法如下其中，是新增的，其余都是新增的。指数组后，返回过滤后的新数组。它的参数跟方法是一样的所有数组成员依次执行回调函数，直到找出第一个返回值为的成员，然后返回该成员。前言 ES5和ES6中新增了不少东西，对于数组而言，新增了不少迭代方法，让我们可以抛弃for循环，更方便的写JS代码。正文 ES5和ES6中新增的的数组迭代方法如下： forEach map...

light 2019-08-20 17:34 评论0 收藏0
JavaScript30秒，从入门到放弃之Array（五）

摘要：原文地址秒，从入门到放弃之五博客地址秒，从入门到放弃之五水平有限，欢迎批评指正从给定的数组中随机选出指定个数的数组元素。否则判断数组元素是否大于或者等于指定元素，寻找过程与前边类似。原文地址：JavaScript30秒，从入门到放弃之Array（五）博客地址：JavaScript30秒，从入门到放弃之Array（五）水平有限，欢迎批评指正 sampleSize Gets n...

dunizb 2019-08-26 11:41 评论0 收藏0
[翻译]map和reduce，处理数据结构的利器

摘要：一个简单的实践返回数组或类似结构中满足条件的第一个元素。这个翻译项目才开始，以后会翻译越来越多的作品。原文地址：https://codeburst.io/writing-javascript-with-map-reduce-980602ff2f2f 作者：Shivek Khurana 简介：本文是一份编写优雅、简洁和函数式ES6代码的快捷清单。现如今JavaScript有许多问...

233jl 2019-08-26 11:35 评论0 收藏0