JavaScript数组搜索与过滤：filter、find、includes和indexOf详解

1. 检索符合特定条件的数组内全部项目
2. 验证是否存在满足条件的项？
3. 确认数组内是否含有特定值？
4. 定位指定值在数组中的索引？

filter find includes indexOf

Array.filter()

在数组中检索符合特定条件的元素

let newArray = array.filter(callback);

• newArray为返回的新数组
• array为执行查找操作的源数组
• callback为应用于数组各元素的回调函数

若无符合条件的项目，则返回空数组。

例如，如果我们要获取大于10的数字数组中的所有项目，则可以执行以下操作：
const array = [10, 11, 3, 20, 5];
const greaterThanTen = array.filter(element => element > 10);
console.log(greaterThanTen) //[11, 20]

Array.find()

查找符合特定条件的首个元素

let element = array.find(callback);

• element -当前遍历的元素（必填）
• index -当前遍历元素的索引/位置（可选）
• array- 当前数组（可选）

但需注意，若无符合条件的项目，则返回 undefined。

const array = [10, 11, 3, 20, 5];
const greaterThanTen = array.find(element => element > 10);
console.log(greaterThanTen)//11

Array.includes（）

判定数组是否包含某值，适时返回 true 或 false

const includesValue = array.includes(valueToFind, fromIndex)

• valueToFind 为待检查的值（必填）
• fromIndex 为开始搜索的索引或位置（可选）

检查20是否为数组中的元素之一，则可以执行以下操作：
const array = [10, 11, 3, 20, 5];
const includesTwenty = array.includes(20);
console.log(includesTwenty)//true
如果要检查数组是否在第一个元素之外的其他位置包含10个，可以执行如下操作：
const array = [10, 11, 3, 20, 5];
const includesTenTwice = array.includes(10, 1);
console.log(includesTenTwice)//false

Array.indexOf（）

返回给定元素在数组中的首个索引。若不存在，则返回 -1

const indexOfElement = array.indexOf(element, fromIndex)

• element 为待检查的元素（必填），且
• fromIndex 为搜索的启始索引或位置（可选）

务必注意，includes 和 indexOf 方法均使用严格相等性（'==='）搜索。若类型不同（如4和'4'），分别返回 false 和 -1

让我们找到数组中 3 的索引。
const array = [10, 11, 3, 20, 5];
const indexOfThree = array.indexOf(3);
console.log(indexOfThree)//2

结语

无需使用 for 循环即可搜索数组

• 若需找到符合特定条件的阵列中所有项目，使用 filter。
• 若需检查是否至少有一个项目符合特定条件，请使用 find。
• 若需检查一个数组包含特定值，请使用 includes。
• 若需在数组中查找特定项目的索引，请使用indexOf

到此这篇关于JavaScript常用数组元素搜索或过滤的四种方法的文章就介绍到这了,更多相关js搜索数组元素内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！