全国咨询/投诉热线:400-618-4000

JavaScript中如何搜索数组元素?

更新时间:2020年07月27日12时06分 来源:传智播客 浏览次数:

在实际开发当中,我们经常会遇到类似诸如下面的需求:

·获取满足特定条件的数组中的所有项目

·要检查是否满足条件?

·检查数组中是否有特定值?

·在数组中找到指定值的索引?

在本本文中,我们将讨论JavaScript中四种可用于搜索数组中项目的方法。这些方法是:

1.filter

2·find

3·includes

4·indexOf

接下来,我们就一起来看一下这四种方式

JavaScript 搜索数组元素

Array.filter()

我们可以使用 Array.filter() 方法在数组中查找满足特定条件的元素。

例如,如果我们要获取大于10的数字数组中的所有项目,则可以执行以下操作:

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

使用 array.filter() 方法的语法如下:

let newArray = array.filter(callback);

着这里:

·newArray是返回的新数组

·array 是我们要进行查找的数组本身

·callback 是应用于数组每个元素的回调函数

如果数组中没有项目符合条件,则返回一个空数组。

有时,我们不需要满足特定条件的所有元素。我们只需要一个符合条件的元素。在这种情况下,需要使用find()方法。

Array.find()

使用 Array.find()方法查找满足特定条件的第一个元素。就像 filter 方法一样,它以回调为参数,并返回满足回调条件的第一个元素。

我们尝试一下在上面的示例中对数组使用 find 方法。

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

array.find() 的语法为

let element = array.find(callback);

callback 是在数组中的每个值上执行的函数,带有三个参数:

·element -当前被遍历的元素(必填)

·index -当前遍历的元素的索引/位置(可选)

·array- 当前数组(可选)

但是请注意,如果数组中没有项目符合条件,则返回 undefined。

但是,如果想检查某个元素是否在数组中怎么办?

Array.includes()

includes() 方法确定数组是否包含某个值,并在适当时返回 true 或 false。

因此,在上面的示例中,如果我们要检查20是否为数组中的元素之一,则可以执行以下操作:

const array = [10, 11, 3, 20, 5]; ​
const includesTwenty = array.includes(20); ​
console.log(includesTwenty)//true

你会注意到此方法与其他方法之间的区别。此方法接受值而不是回调作为参数。这是 include 方法的语法:

const includesValue = array.includes(valueToFind, fromIndex)

·valueToFind 是要在数组中检查的值(必填)

·fromIndex 是要开始从中搜索元素的数组中的索引或位置(可选)

要了解索引的概念,让我们再次使用上面的示例。

如果要检查数组是否在第一个元素之外的其他位置包含10个,可以执行如下操作:

const array = [10, 11, 3, 20, 5]; ​
const includesTenTwice = array.includes(10, 1); ​
console.log(includesTenTwice)//false

Array.indexOf()

indexOf() 方法返回可以在数组中找到给定元素的第一个索引。如果数组中不存在该元素,则返回 -1。

回到例子。让我们找到数组中 3 的索引。

const array = [10, 11, 3, 20, 5]; ​
const indexOfThree = array.indexOf(3); ​
console.log(indexOfThree)//2

其语法类似于该 includes 方法的语法。

const indexOfElement = array.indexOf(element, fromIndex)

element 是要在数组中检查的元素(必填),并且

fromIndex 是要从数组中搜索元素的启始索引或位置(可选)

请务必注意,includes 和 indexOf 方法都使用严格的相等性('===')搜索数组。如果值的类型不同(例如4和'4'),它们将分别返回 false 和 -1。

总结

使用这些数组方法,无需使用 for 循环即可搜索数组。根据您的需求,您可以决定哪种方法最适合您的用例。

以下是何时使用每种方法的摘要:

·如果你想找到在符合特定条件的阵列中的所有项目,使用 filter。

·如果你想检查是否至少有一个项目符合特定的条件,请使用 find。

·如果你想检查一个数组包含一个特定的值,请使用 includes。

·如果要在数组中查找特定项目的索引,请使用indexOf 。

猜你喜欢

HTML5什么优势有哪些? 

什么是HTML,什么是H5?

JavaScript是什么?可以做什么? 

javaee

python

web

ui

cloud

test

c

netmarket

pm

Linux

movies

robot

uids

北京校区

    14天免费试学

    基础班入门课程限时免费

    申请试学名额

    15天免费试学

    基础班入门课程限时免费

    申请试学名额

    15天免费试学

    基础班入门课程限时免费

    申请试学名额

    15天免费试学

    基础班入门课程限时免费

    申请试学名额

    20天免费试学

    基础班入门课程限时免费

    申请试学名额

    8天免费试学

    基础班入门课程限时免费

    申请试学名额

    20天免费试学

    基础班入门课程限时免费

    申请试学名额

    5天免费试学

    基础班入门课程限时免费

    申请试学名额

    0天免费试学

    基础班入门课程限时免费

    申请试学名额

    12天免费试学

    基础班入门课程限时免费

    申请试学名额

    5天免费试学

    基础班入门课程限时免费

    申请试学名额

    5天免费试学

    基础班入门课程限时免费

    申请试学名额

    10天免费试学

    基础班入门课程限时免费

    申请试学名额