8种在JavaScript数组中查指定元素的⽅法
前⾔
有时候我们想以某种条件来查⼀个数组中是否有满⾜改条件的元素,然后返回该元素,或者该元素的索引值。
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。
indexof的用法javascriptvar 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
⽅法名参数描述返回值
本⽂完~
学习更多技能
请点击下⽅

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。