关于js如何在数组中查找某个元素教程

关于js如何在数组中查找某个元素教程

野牛哥
2021-09-02 / 0 评论 / 9 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2021年09月02日,已超过97天没有更新,若内容或图片失效,请留言反馈。

关于js如何在数组中查找某个元素教程

在日常前端开发中,会经常操作js,有时候想以某条件来查找一个数组中是否有满足条件的元素,然后返回该元素,或者该元素的索引值.javascript提供了多种方法,下面开始介绍几个常用的方法:

方法一、Array.includes()

includes()方法用来判断一个数组是否包含一个指定的值,如果包含则返回true,否则返回false;
该方法支持两个参数valueToFind,fromIndex(可选),第一个参数是需要查找的元素值,第二个参数是从哪个索引处开始查找,第二个参数如果为负数,则会按升序从array.length + fromIndex 的索引开始查找(即使从末尾开始往前跳fromIndex 的绝对值个索引,然后往后搜寻);

var array = [1,2,3,4,5,6]
array.includes(2)  // true
array.includes(2,3)  // false
array.includes(5,-2)  // true
array.includes(5,-1)  // false
方法二、Array.indexOf()

indexOf()方法返回指定元素在数组中的第一个索引,如果不存在返回-1。
该方法支持两个参数searchElement,fromIndex(可选);第一个参数是要查找的元素,第二个参数是开始查找的索引位置;

注意事项:

1、如果该索引值大于或等于数组长度,意味着不会在数组里查找,返回-1。
2、如果参数中提供的索引值是一个负值,则将其作为数组末尾的一个抵消,即-1表示从最后一个元素开始查找,-2表示从倒数第二个元素开始查找,以此类推;
3、如果参数中提供的索引值是一个负值,并不改变其查找顺序,查找顺序仍然是从前向后查询数组;
4、如果抵消后的索引值仍小于0,则整个数组都将会被查询,其默认值为0;

var array = [1, 2, 5, 9];
array.indexOf(2);     // 0
array.indexOf(7);     // -1
array.indexOf(9, 2);  // 2
array.indexOf(2, -1); // -1
array.indexOf(2, -3); // 0
方法三、Array.lastIndexOf()

lastIndexOf()方法返回指定元素在数组中的最后一个的索引,如果不存在回-1;从数组的后面向前查找;
该方法支持两个参数searchElement,fromIndex(可选),第一个参数是被查找的元素;第二个参数是从此位置开始逆向查找,默认为数组的长度减 1(arr.length - 1),即整个数组都被查找;

注意事项:

1、如果该值大于或等于数组的长度,则整个数组会被查找;
2、如果为负值,将其视为从数组末尾向前的偏移,即使该值为负,数组仍然会被从后向前查找;
3、如果该值为负时,其绝对值大于数组长度,则方法返回 -1,即数组不会被查找;

var array = [1, 2, 5, 9, 2];
array.lastIndexOf(2);      // 3
array.lastIndexOf(7);      // -1
array.lastIndexOf(2, 3);   // 3
array.lastIndexOf(2, 2);   // 0
array.lastIndexOf(2, -2);  // 0
array.lastIndexOf(2, -1);  // 3
方法四、Array.find()

find()方法返回数组中满足提供的测试函数的第一个元素的值,否则返回undefined;

用对象的属性查找数组里的对象。

var inventory = [
    {name: 'apples', quantity: 1},
    {name: 'bananas', quantity: 2},
    {name: 'orange', quantity: 3}
];

function findOranges(fruit) { 
    return fruit.name === 'bananas';
}

console.log(inventory.find(findOrange));// { name: 'bananas', quantity: 2 }
方法五、Array.findIndex()

findIndex() 方法返回数组中满足提供的测试函数的第一个元素的索引,若没有找到对应元素则返回-1;
查找 name 为 orange 的对象在数组中的的索引。

var inventory = [
    {name: 'apple', quantity: 1},
    {name: 'banana', quantity: 2},
    {name: 'orange', quantity: 3}
];

function findOrange(fruit) { 
    return fruit.name === 'orange';
}

console.log(inventory.findIndex(findOrange));// { name: 'orange', quantity: 3 }
将方法总结为表格
方法名参数描述返回值
includessearchElement(搜索值),fromIndex(可选参,搜索的下标)判断数组中是否包含指定的值布尔值
indexOfsearchElement(搜索值),fromIndex(可选参,搜索的下标)查找元素在数组中首次出现的索引值索引值,或者-1
lastIndexOfsearchElement(搜索值),fromIndex(可选参,搜索的下标)查找元素在数组中最后一次出现的索引值索引值,或者-1
findcallback[, thisArg]返回数组中符合条件的第一个元素数组中的元素,或者undefined
findIndexcallback[, thisArg]返回符合条件的第一个元素的索引索引值,或者-1

比较常用的可以使用indexOf()方法或者find()方法进行查找,赶紧动手练习一下吧!!!

本文共 911 个字数,平均阅读时长 ≈ 3分钟
1

打赏

评论 (0)

取消