技术频道导航
HTML/CSS
.NET技术
IIS技术
PHP技术
Js/JQuery
Photoshop
Fireworks
服务器技术
操作系统
网站运营

赞助商

分类目录

赞助商

最新文章

搜索

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)

demodownload

查找元素: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

thisArgcallback内部用作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是正在处理的当前元素的索引。
  • arrayfindIndex()调用的数组。

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对数组添加的新方法。

相关文章

标签: indexOf  findIndex  find方法  
x
  • 站长推荐
/* 左侧显示文章内容目录 */