快捷導(dǎo)航

JavaScript中find()、findIndex()、filter()、indexOf()處理數(shù)組方法的具體區(qū)別詳解

更新時(shí)間：2025年04月08日 08:44:07 作者：碳烤小咸魚(yú)

在JavaScript中數(shù)組是一種非常常見(jiàn)且功能強(qiáng)大的數(shù)據(jù)結(jié)構(gòu),這篇文章主要介紹了JavaScript中find()、findIndex()、filter()、indexOf()處理數(shù)組方法具體區(qū)別的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下

一、find()方法：

功能：返回第一個(gè)滿足條件的元素，無(wú)符合項(xiàng)時(shí)返回 undefined。

const numbers = [10, 20, 30, 40];
const result = numbers.find((num) => num > 25); 
console.log(result); 
//結(jié)果：30，因?yàn)?0是數(shù)組numbers中第一個(gè)大于25的元素。

參數(shù)：

callback(element, index, array)：接收當(dāng)前元素、索引和原數(shù)組作為參數(shù)，需返回布爾值。

thisArg（可選）：指定回調(diào)函數(shù)中的 this 上下文。

特點(diǎn)：

短路操作：找到第一個(gè)匹配項(xiàng)后立即停止遍歷。

適用場(chǎng)景：查找對(duì)象數(shù)組中符合條件的對(duì)象。

const users = [
  {id: 1, name: 'Alice'},
  {id: 2, name: 'Bob'}
];
const user = users.find(u => u.id === 2); // {id: 2, name: 'Bob'}

稀疏數(shù)組：會(huì)跳過(guò)空位（如 [1, ,3] 中的空元素不會(huì)被處理）。

二、findIndex()方法：

功能：返回第一個(gè)滿足條件的元素的索引，無(wú)符合項(xiàng)時(shí)返回 -1。

const fruits = ['apple', 'banana', 'cherry', 'date'];
const index = fruits.findIndex((fruit) => fruit === 'cherry'); 
console.log(index); 
//結(jié)果：2，因?yàn)閏herry在數(shù)組fruits中的索引是2。

參數(shù)：同 find()。

特點(diǎn)：

與 indexOf 對(duì)比：indexOf 直接比較值，findIndex 支持復(fù)雜條件。

示例：查找對(duì)象數(shù)組中屬性匹配的索引。

const users = [
  {id: 1, name: 'Alice'},
  {id: 2, name: 'Bob'}
];
const index = users.findIndex(u => u.name.startsWith('B')); // 1

三、filter()方法：

功能：返回包含所有滿足條件元素的新數(shù)組，原數(shù)組不變。

const scores = [75, 80, 60, 90];
const passingScores = scores.filter((score) => score >= 70); 
console.log(passingScores); 
//結(jié)果：[75, 80, 90]，新數(shù)組passingScores包含了原數(shù)組scores中所有大于等于70的分?jǐn)?shù)。

參數(shù)：同 find()。

特點(diǎn)：

數(shù)據(jù)篩選：常用于數(shù)據(jù)過(guò)濾，如刪除無(wú)效項(xiàng)。

const data = [15, null, 30, undefined, 45];
const validData = data.filter(item => item != null); // [15, 30, 45]

鏈?zhǔn)秸{(diào)用：可與其他方法組合，如 map()、reduce()。
```
const doubledEven = [1, 2, 3].filter(n => n % 2 === 0).map(n => n * 2); // [4]
```
稀疏數(shù)組：返回的數(shù)組中不會(huì)包含空位。

四、indexOf()方法：

功能：返回指定元素首次出現(xiàn)的索引，無(wú)匹配時(shí)返回 -1。

const colors = ['red', 'blue', 'green', 'blue'];
const blueIndex = colors.indexOf('blue'); 
console.log(blueIndex); 
//結(jié)果：1，因?yàn)閎lue在數(shù)組colors中第一次出現(xiàn)的索引是1。

參數(shù)：

searchElement：待查找的元素。
fromIndex（可選）：起始搜索位置，默認(rèn)為 0。

特點(diǎn)：

嚴(yán)格相等：使用 === 比較，類(lèi)型不匹配時(shí)返回 -1。

const arr = [1, '2', 3];
console.log(arr.indexOf('2')); // 1
console.log(arr.indexOf(2));   // -1（類(lèi)型不匹配）

負(fù)數(shù)索引：fromIndex 為負(fù)數(shù)時(shí)，從數(shù)組末尾向前計(jì)算位置。
```
const arr = [10, 20, 30, 20];
console.log(arr.indexOf(20, -2)); // 3（從索引2開(kāi)始向后查找）
```
性能優(yōu)化：適合簡(jiǎn)單值的快速查找，比 findIndex 更高效。

五、方法對(duì)比與總結(jié)：

方法	返回值	使用場(chǎng)景	是否遍歷全部元素
`find()`	元素	復(fù)雜條件查找首個(gè)匹配項(xiàng)	否（短路）
`findIndex()`	索引	復(fù)雜條件查找首個(gè)匹配索引	否（短路）
`filter()`	新數(shù)組	篩選多個(gè)符合條件元素	是
`indexOf()`	索引	簡(jiǎn)單值查找首個(gè)匹配索引	否（可指定起點(diǎn)）

六、兼容性：

ES6+ 方法：find(), findIndex(), filter() 是 ES6 新增，需環(huán)境支持（現(xiàn)代瀏覽器/Node.js）。
替代方案：在不支持 ES6 的環(huán)境中，可用 for 循環(huán)或 Array.prototype.some() 模擬類(lèi)似功能。
性能考慮：大數(shù)據(jù)量時(shí)，優(yōu)先使用 indexOf（簡(jiǎn)單值）或 find（復(fù)雜條件），避免不必要的全遍歷。

總結(jié)

到此這篇關(guān)于JavaScript中find()、findIndex()、filter()、indexOf()處理數(shù)組方法具體區(qū)別的文章就介紹到這了,更多相關(guān)JS find()、findIndex()、filter()、indexOf()處理數(shù)組內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: