一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第24天,点击查看活动详情。
在项目开发中数组的查找、检查和过滤等操作是我们常用的一种场景。如果我们采用普通的for循环或者map循环等进行这些操作写起来就复杂了,并且增加代码量,Array数组对象它给我们提供了实现这些场景的方法,当然普通的for循环也可以做,就是麻烦而已。 我们以如下data来体验一下所有的方法。
const data = [
{ name: 'a', value: 1 },
{ name: 'b', value: 2 },
{ name: 'c', value: 1 },
{ name: 'd', value: 3 },
];
查找
在数组中查找我们一般想要的结果大概两种,一种是返回想要查找到的数据,一种是查找到数据的索引位置。Array数组对象提供两个方法find和findIndex。
find: find方法接收一个函数,函数参数为数组项和对应的索引,返回值要求返回布尔值,它从第一项开始查找,找到返回值为true(满足条件)时查找结束,find返回查到的数组项结果,是数组中第一个满足条件的项,如下返回的是第1条而不是第3条,因为它索引靠后。
const ele = data.find((element, index) => element.value === 1);
console.log(ele) // { name: 'a', value: 1 }
findInex: 顾名思义和find使用方式一样,只是返回的是第一个满足条件的项所在的索引。
const eleIndex = data.findIndex((element, index) => element.value === 1);
console.log(eleIndex) // 0
indexOf: 方法接收一个数据项,查找该数据项在数组中的第一个索引位置,如果不存在,则返回-1,字符串String中也有这个方法。但是此方法是根据内存中的位置进行判断的,如果数组项都是基本数据类型数据,此方法非常方便,如果是引用类型就要考虑内存中的位置是否一样了。因此很少使用indexOf查找包含引用类型的数组。
data.indexOf({ name: 'b', value: 2 }); // -1 没有查找到返回-1
data.indexOf(data[3]); // 3 内存位置是一样的
const list = [1, 2, 3, 4];
list.indexOf(2); // 1
findLast、findLastIndex和lastIndexOf:它们和上面三种方法区别只是从数组最后一项开始查找不是从第一项查找,使用方式等都一样
data.findLast((element, index) => element.value === 1); // { name: 'c', value: 1 }
data.findLastIndex((element, index) => element.value === 1); // 2
const list = [3, 2, 3, 3, 4];
list.indexOf(3); // 3
检查
数组检查一般我们是对数组项进行检查,检查是否满足我们定义的条件或者检查所有项是否都满足我们的条件。Array给我们提供了some、every和includes3个方法,都是返回true或false。
some: 从数组第一项开始遍历查找,看是否有满足条件的数组项,发现有满足条件的返回true, 遍历结束,如果都不满足则返回false, some接收一个函数和上面的find一样返回布尔值。当然也可以用find类似的检查。
data.some((element, index) => element.value === 9) // false
data.some(element => element.value === 1) // true
every: 从数组第一项开始遍历查找,检查数组中每一项是否都满足条件,如果有一项不满足停止遍历返回false, 否则返回true, 和some使用方式一样,只是语义不一样而已。
data.every((element, index) => element.value > 2) // false
data.every(element => element.value > 0) // true
includes:检查数组中是否包含某一项,包含返回true,否则返回false,和上面的indexOf一样都是通过内存中的位置进行判断的。
const list = [3, 2, 3, 3, 4];
list.includes(2); // true
data.includes({ name: 'a', value: 1 }); // false
过滤
向我们对列表进行搜索操作就是对数组的过滤,就是将数组满是条件的项返回出来组成一个数组,Array对象提供filter方法。
filter: 遍历数组的每一项,对每一项进行判断,判断是否满足条件,会将满足条件的所有项组成一个数组(不是新的,如果数组中的项是引用类型)。它接收一个函数,参数是数组项和索引,返回一个布尔值,当然filter将不满足条件的返回出来,返回的布尔值转换一下就可以了。
data.filter((element, index) => element.value > 2); // [{ name: 'd', value: 3 }]
总结
当我们项目开发中遇到数组的查找、检查或者过滤时,能用这些方法就用这些方法,毕竟写法简单,语义清晰,性能我们不用考虑,底层提供的肯定有保证,比自己写循环实现这些方便简单。