Js在数组中查找指定元素

更新日期: 2022-01-12阅读: 860标签: 数组

前言

有时候我们想以某种条件来查找一个数组中是否有满足改条件的元素,然后返回该元素,或者该元素的索引值。Javascript 给我们提供了多种方法,主要分为按值查找和某种条件查找,下面开始介绍这些方法。

1. Array.prototype.includes()

includes() 方法用来判断一个数组是否包含一个指定的值,如果包含则返回 true,否则返回 false。

该方法支持两个参数valueToFind,fromIndex(可选),第一个参数是‘需要查找的元素值’,第二个参数是‘从哪个索引处开始查找’,第二个参数如果为负数,则会按升序从 array.length + fromIndex 的索引开始查找(即使从末尾开始往前跳 fromIndex 的绝对值个索引,然后往后搜寻)。

var a = [1,2,3,4,5,6]

a.includes(2)  // true
a.includes(2,3)  // false
a.includes(5,-2)  // true
a.includes(5,-1)  // false

2. Array.prototype.indexOf()

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

该方法支持两个参数searchElement,fromIndex (可选),第一个参数是‘要查找的元素’,第二个参数是‘开始查找的索引位置’,如果该索引值大于或等于数组长度,意味着不会在数组里查找,返回-1。如果参数中提供的索引值是一个负值,则将其作为数组末尾的一个抵消,即-1表示从最后一个元素开始查找,-2表示从倒数第二个元素开始查找 ,以此类推。 注意:如果参数中提供的索引值是一个负值,并不改变其查找顺序,查找顺序仍然是从前向后查询数组。如果抵消后的索引值仍小于0,则整个数组都将会被查询。其默认值为0。

var array = [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

3. Array.prototype.lastIndexOf()

lastIndexOf() 方法返回指定元素在数组中的最后一个的索引,如果不存在则返回 -1。从数组的后面向前查找,从 fromIndex 处开始。

该方法支持两个参数 searchElement,fromIndex(可选),第一个参数是‘被查找的元素’。第二个参数是‘从此位置开始逆向查找’,默认为数组的长度减 1(arr.length - 1),即整个数组都被查找。如果该值大于或等于数组的长度,则整个数组会被查找。如果为负值,将其视为从数组末尾向前的偏移。即使该值为负,数组仍然会被从后向前查找。如果该值为负时,其绝对值大于数组长度,则方法返回 -1,即数组不会被查找。

var array = [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

4. Array.prototype.some()

some() 方法测试数组中是不是至少有1个元素通过了被提供的函数测试。它返回的是一个 Boolean 类型的值。

语法:arr.some(callback(element[, index[, array]])[, thisArg])

「参数」:

callback:用来测试每个元素的函数,接受三个参数:

  • element 数组中正在处理的元素。
  • index 可选,数组中正在处理的元素的索引值。
  • array 可选,被遍历的数组本身。

thisArg: 可选,执行 callback 时使用的 this 值。

下面的例子检测在数组中是否有元素大于 10。

function isBiggerThan10(element, index, array) {
  return element > 10;
}

[2, 5, 8, 1, 4].some(isBiggerThan10);  // false
[12, 5, 8, 1, 4].some(isBiggerThan10); // true

还可以使用箭头函数实现相同的效果。

[2, 5, 8, 1, 4].some(x => x > 10);  // false
[12, 5, 8, 1, 4].some(x => x > 10); // true

5. Array.prototype.every()

every() 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。

该方法的参数与 Array.prototype.some() 方法一样,这里就不再介绍了。它们两不同的是,some()只要数组中有一个元素满足条件就为真,every()要全部满足条件才为真。

检测数组中的所有元素是否都大于 10。

function isBigEnough(element, index, array) {
  return element >= 10;
}
[12, 5, 8, 130, 44].every(isBigEnough);   // false
[12, 54, 18, 130, 44].every(isBigEnough); // true

6. Array.prototype.filter()

filter() 方法创建一个新数组, 包含通过所提供函数实现的测试的所有元素。

该方法的参数与 some(),every()相同,callback 用来测试数组的每个元素的函数。返回 true 表示该元素通过测试,保留该元素,false 则不保留。

下例使用 filter 创建了一个新数组,该数组的元素由原数组中值大于 10 的元素组成。

function isBigEnough(element) {
  return element >= 10;
}

var filtered = [12, 5, 8, 130, 35].filter(isBigEnough);
// filtered is [12, 130, 35] 

7. Array.prototype.find()

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

该方法的参数与 some(),every(),filter()相同。

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

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

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

console.log(inventory.find(findOrange));
// { name: 'orange', quantity: 5 }

8. Array.prototype.findIndex()

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

该方法参数与 find() 相同,只是一个返回该元素,一个返回该元素在数组中的索引值。

查找 name 为 orange 的对象在数组中的的索引。

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

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

console.log(inventory.findIndex(findOrange));
// { name: 'orange', quantity: 5 }

总结

为了方便查找和记忆,我将这些方法总结成了一张表格

方法名 参数 描述 返回值
includes searchElement,fromIndex 判断数组中是否包含指定的值 布尔值
indexOf searchElement,fromIndex 查找元素在数组中首次出现的索引值 索引值,或者-1
lastIndexOf searchElement,fromIndex 查找元素在数组中最后一次出现的索引值 索引值,或者-1
some callback[, thisArg] 判断数组中是否有符合条件的元素 布尔值
every callback[, thisArg] 判断数组中是否每个元素都符合条件 布尔值
filter callback[, thisArg] 返回符合条件的所有元素组成的数组 数组
find callback[, thisArg] 返回数组中符合条件的第一个元素 数组中的元素,或者undefined
findIndex callback[, thisArg] 返回符合条件的第一个元素的索引 索引值,或者-1

链接: https://fly63.com/article/detial/11025

探索JavaScript数组奥秘

avaScript数组同后端语言一样,具有它自己的数据结构,归根结底,这种数据结构,本质就是一种集合。在后端语言中(如java,.net等),数组是这样定义的:数组是用来存储相同数据类型的集合

js使用数组+循环+条件实现数字转换为汉字的简单方法。

单个数字转汉字的解决方法:利用数组存储0-9的汉字、 ary.length和str.length不用多说,这是指ary数组和str字符串的长度。这里我们需要注意的是str.charAt(j)和ary[i],分别指在str这个字符串中索引为j的元素,在ary中索引为i的元素。

[译]async-await 数组循环的几个坑

在 Javascript 循环中使用 async/ await 循环遍历数组似乎很简单,但是在将两者结合使用时需要注意一些非直观的行为。让我们看看三个不同的例子,看看你应该注意什么,以及哪个循环最适合特定用例。

数组、字符串去重

今天说的数组和字符串去重呢,主要用到es6新的数据结构 Set,它类似于数组,但是成员的值都是唯一的,没有重复的值,所以活用Set来进行数组和字符串的去重。

JavaScript 数组方法

数组方法:1、Array.join([param]) 方法:将数组中所有的元素都转换为字符串并连接起来,通过字符 param 连接,默认使用逗号,返回最后生成的字符串2、Array.reverse() 方法:将数组中的元素颠倒顺序(在原数组中重新排列它们),返回逆序数组

如何删除JavaScript 数组中的虚值

falsy(虚值)是在 Boolean 上下文中已认定可转换为‘假‘的值.JavaScript 在需要用到布尔类型值的上下文中使用强制类型转换(Type Conversion )将值转换为布尔值,比如:在条件语句或者循环语句中。

JavaScript中十种一步拷贝数组的方法

JavaScript中我们经常会遇到拷贝数组的场景,但是都有哪些方式能够来实现呢,我们不妨来梳理一下。扩展运算符(浅拷贝)自从ES6出现以来,这已经成为最流行的方法。

JS数组的几个经典api

本文主要来讲数组api的一些操作,如简单实现扁平化n维数组、数组去重、求数组最大值、数组求和、排序、对象和数组的转化等。扁平化嵌套数组/展平和阵列孔——flat()

关于Vue不能监听(watch)数组变化

vue无法监听数组变化的情况,但是数组在下面两种情况下无法监听:利用索引直接设置数组项时,例如arr[indexofitem]=newValue;修改数组的长度时,例如arr.length=newLength

JS计算两个数组的交集、差集、并集、补集(多种实现方式)

使用 ES5 语法来实现虽然会麻烦些,但兼容性最好,不用考虑浏览器 JavaScript 版本,使用 ES5 语法来实现虽然会麻烦些,但兼容性最好,不用考虑浏览器 JavaScript 版本。也不用引入其他第三方库。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!