JS数组元素定位方法使用区别：indexOf()、find()和findIndex()
作者:admin 时间:2022-7-11 16:41:47 浏览:本文主要讨论JavaScript中的数组元素定位和查找方法，indexOf()、find()、findIndex()，介绍这几种方法的使用区别。
定位元素：indexOf()
要查找数组中元素的位置，请使用indexOf()方法。此方法返回要查找的元素第一次出现的索引，如果未找到该元素，则返回 -1。
下面是indexOf()方法的语法。
Array.indexOf(searchElement, fromIndex)
indexOf()方法接受两个命名参数。
- searchElement 参数是要在数组中找到的元素。
- fromIndex 是函数开始搜索的数组索引。
fromIndex 参数可以是正整数或负整数。如果fromIndex 参数为负，则indexOf()方法从数组的长度加 fromIndex 开始搜索
如果省略 fromIndex 参数，indexOf()方法将从字符串的开头开始搜索。
示例
假设有一个由六个数字组成的数组scores，如下所示：
var scores = [10, 20, 30, 10, 40, 20];
以下示例使用indexOf()方法查找scores数组中的元素：
console.log(scores.indexOf(10)); // 0
console.log(scores.indexOf(30)); // 2
console.log(scores.indexOf(50)); // -1
console.log(scores.indexOf(20)); // 1
console.log(scores.indexOf(20,-1)); // 5 (fromIndex = 6+ (-1) = 5)
console.log(scores.indexOf(20,-5)); // 1 (fromIndex = 6+ (-5) = 1)
查找元素：find()
在 ES5 中，要在数组中查找元素，可以使用indexOf()或lastIndexOf()方法。但是，这些方法非常有限，因为它们只返回第一个匹配元素的索引。
ES6 引入了一种新方法，称为find()添加到Array.prototype对象。
该find()方法返回数组中满足所提供函数的第一个元素。
下面显示了该find()方法的语法：
find(callback(element[, index[, array]])[, thisArg])
参数
find()接受两个参数：一个callback和一个用于callback内部this的可选值。
1) callback
callback是在数组的每个元素上执行的回调函数。它需要三个参数：
element是当前元素。index当前元素的索引。array find()被调用的数组。
2) thisArg
thisArg是callback内部用作this的对象。
返回值
find()对数组中的每个元素执行callback函数，直到callback返回一个真值。
如果回调返回真值，则find()立即返回元素并停止搜索。否则，它返回undefined。
如果要查找找到的元素的索引，可以使用findIndex()方法。
find()示例
以下示例使用find()方法在数字数组中搜索第一个偶数：
let numbers = [1, 2, 3, 4, 5];
console.log(numbers.find(e => e % 2 == 0));
输出
2
假设我们有一个客户对象列表，其name属性credit如下：
let customers = [{
name: 'ABC Inc',
credit: 100
}, {
name: 'ACME Corp',
credit: 200
}, {
name: 'IoT AG',
credit: 300
}];以下代码使用find()方法查找信用大于 100 的第一个客户。
console.log(customers.find(c => c.credit > 100));
输出
{ name: 'ACME Corp', credit: 200 }
查找元素的索引：findIndex()
ES6 对Array.prototype添加了一个名为findIndex()的新方法，它允许你在数组中找到满足提供的测试功能的第一个元素。
findIndex()方法返回满足测试函数的元素的索引，如果没有元素通过测试，则返回 -1。
下面说明了findIndex()方法的语法：
findIndex(testFn(element[, index[, array]])[, thisArg])
findIndex()需要两个参数：
1) testFn
testFn是一个对数组中的每个元素执行的函数，直到该函数返回true，表示已找到该元素。
testFn需要三个参数：
element是正在处理的数组中的当前元素。index是正在处理的当前元素的索引。array是findIndex()调用的数组。
2) thisArg
thisArg是执行callback时使用this的可选对象。如果省略thisArg参数，则findIndex()函数使用undefined。
findIndex()对数组中的每个元素执行testFn ，直到找到testFn返回真值的元素，该值是强制转换为true的值。
一旦findIndex()找到这样的元素，它会立即返回元素的索引。
findIndex() 示例
一些使用 findIndex() 方法的例子。
1) 以下示例返回ranks数组中第一次出现数字 7 的索引：
let ranks = [1, 5, 7, 8, 10, 7];
let index = ranks.findIndex(rank => rank === 7);
console.log(index);
输出
2
2) 此示例使用 findIndex() 方法获取ranks数组中索引 2 之后第一次出现的数字 7 的索引：
let ranks = [1, 5, 7, 8, 10, 7];
let index = ranks.findIndex(
(rank, index) => rank === 7 && index > 2
);
console.log(index);
输出
5
3) 以下示例使用 findIndex()方法查找价格大于 1000 的第一个产品的索引：
const products = [
{ name: 'Phone', price: 999 },
{ name: 'Computer', price: 1999 },
{ name: 'Tablet', price: 995 },
];
const index = products.findIndex(product => product.price > 1000);
console.log(index); // 1
总结
本文介绍了JS数组元素定位方法：indexOf()、find()和findIndex()，介绍了这几种方法的使用区别。indexOf()是ES5开始对数组添加的方法，而find()和findIndex()是ES6对数组添加的新方法。
相关文章
- 站长推荐
