JavaScript數(shù)組常用方法find、findIndex、filter、map、flatMap及some詳解
更新時(shí)間：2025年07月16日 12:01:20 作者：浩宇軟件開(kāi)發(fā)
在JavaScript中數(shù)組是一種非常常見(jiàn)且功能強(qiáng)大的數(shù)據(jù)結(jié)構(gòu),這篇文章主要介紹了JavaScript數(shù)組常用方法find、findIndex、filter、map、flatMap及some的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
前言
這些數(shù)組方法都是ES6引入的，它們?yōu)樘幚頂?shù)組提供了更簡(jiǎn)潔、更函數(shù)式的方式。下面我將詳細(xì)介紹每個(gè)方法的用法和使用場(chǎng)景，并提供示例。
1. find()
作用：返回?cái)?shù)組中滿足提供的測(cè)試函數(shù)的第一個(gè)元素的值。如果沒(méi)有找到則返回undefined。
使用場(chǎng)景：當(dāng)你需要從數(shù)組中查找第一個(gè)符合條件的元素時(shí)。
const users = [
{ id: 1, name: 'Alice', age: 25 },
{ id: 2, name: 'Bob', age: 30 },
{ id: 3, name: 'Charlie', age: 35 }
];
// 查找第一個(gè)年齡大于30的用戶
const user = users.find(user => user.age > 30);
console.log(user); // { id: 3, name: 'Charlie', age: 35 }
// 查找不存在的用戶
const notFound = users.find(user => user.age > 40);
console.log(notFound); // undefined
2. findIndex()
作用：返回?cái)?shù)組中滿足提供的測(cè)試函數(shù)的第一個(gè)元素的索引。若沒(méi)有找到則返回-1。
使用場(chǎng)景：當(dāng)你需要知道某個(gè)元素在數(shù)組中的位置時(shí)。
const numbers = [10, 20, 30, 40, 50]; // 查找第一個(gè)大于25的元素的索引 const index = numbers.findIndex(num => num > 25); console.log(index); // 2 // 查找不存在的元素的索引 const notFoundIndex = numbers.findIndex(num => num > 100); console.log(notFoundIndex); // -1
3. filter()
作用：創(chuàng)建一個(gè)新數(shù)組，包含通過(guò)所提供函數(shù)實(shí)現(xiàn)的測(cè)試的所有元素。
使用場(chǎng)景：當(dāng)你需要從數(shù)組中篩選出符合條件的多個(gè)元素時(shí)。
const products = [
{ id: 1, name: 'Laptop', price: 999, inStock: true },
{ id: 2, name: 'Phone', price: 699, inStock: false },
{ id: 3, name: 'Tablet', price: 499, inStock: true }
];
// 篩選有庫(kù)存的產(chǎn)品
const availableProducts = products.filter(product => product.inStock);
console.log(availableProducts);
// [
// { id: 1, name: 'Laptop', price: 999, inStock: true },
// { id: 3, name: 'Tablet', price: 499, inStock: true }
// ]
// 篩選價(jià)格低于500的產(chǎn)品
const cheapProducts = products.filter(product => product.price < 500);
console.log(cheapProducts);
// [{ id: 3, name: 'Tablet', price: 499, inStock: true }]
4. map()
作用：創(chuàng)建一個(gè)新數(shù)組，其結(jié)果是該數(shù)組中的每個(gè)元素都調(diào)用一個(gè)提供的函數(shù)后的返回值。
使用場(chǎng)景：當(dāng)你需要對(duì)數(shù)組中的每個(gè)元素進(jìn)行轉(zhuǎn)換時(shí)。
const numbers = [1, 2, 3, 4];
// 將每個(gè)數(shù)字平方
const squares = numbers.map(num => num * num);
console.log(squares); // [1, 4, 9, 16]
// 從對(duì)象數(shù)組中提取特定屬性
const names = users.map(user => user.name);
console.log(names); // ['Alice', 'Bob', 'Charlie']
// 添加新屬性
const usersWithStatus = users.map(user => ({
...user,
status: user.age > 30 ? 'Senior' : 'Junior'
}));
console.log(usersWithStatus);
// [
// { id: 1, name: 'Alice', age: 25, status: 'Junior' },
// { id: 2, name: 'Bob', age: 30, status: 'Junior' },
// { id: 3, name: 'Charlie', age: 35, status: 'Senior' }
// ]
5. flatMap()
作用：首先使用映射函數(shù)映射每個(gè)元素，然后將結(jié)果壓縮成一個(gè)新數(shù)組。相當(dāng)于先map()再flat(1)。
使用場(chǎng)景：當(dāng)你需要先映射然后扁平化結(jié)果時(shí)。
const sentences = ["Hello world", "Good morning", "Have a nice day"];
// 將句子拆分為單詞并扁平化
const words = sentences.flatMap(sentence => sentence.split(' '));
console.log(words);
// ['Hello', 'world', 'Good', 'morning', 'Have', 'a', 'nice', 'day']
// 傳統(tǒng)方式需要先map再flat
const wordsOldWay = sentences.map(sentence => sentence.split(' ')).flat();
console.log(wordsOldWay); // 同上
// 處理嵌套數(shù)組
const data = [[1], [2, 3], [4]];
const flattened = data.flatMap(arr => arr.map(x => x * 2));
console.log(flattened); // [2, 4, 6, 8]
6. some()
作用：測(cè)試數(shù)組中是否至少有一個(gè)元素通過(guò)了提供的函數(shù)的測(cè)試。返回布爾值。
使用場(chǎng)景：當(dāng)你需要檢查數(shù)組中是否有元素滿足某個(gè)條件時(shí)。
const numbers = [1, 2, 3, 4, 5];
// 檢查是否有偶數(shù)
const hasEven = numbers.some(num => num % 2 === 0);
console.log(hasEven); // true
// 檢查是否有大于10的數(shù)
const hasLargeNumber = numbers.some(num => num > 10);
console.log(hasLargeNumber); // false
// 檢查用戶列表中是否有管理員
const users = [
{ id: 1, name: 'Alice', isAdmin: false },
{ id: 2, name: 'Bob', isAdmin: true },
{ id: 3, name: 'Charlie', isAdmin: false }
];
const hasAdmin = users.some(user => user.isAdmin);
console.log(hasAdmin); // true
一、查詢類方法
1.includes()
檢查數(shù)組是否包含某個(gè)值，返回布爾值
[1, 2, 3].includes(2); // true
['a', 'b', 'c'].includes('d'); // false
2.indexOf() / lastIndexOf()
返回元素在數(shù)組中的第一個(gè)/最后一個(gè)索引，找不到返回-1
['a', 'b', 'c', 'b'].indexOf('b'); // 1
['a', 'b', 'c', 'b'].lastIndexOf('b'); // 3
3.every()
檢查是否所有元素都滿足條件
[12, 5, 8, 130, 44].every(x => x >= 10); // false [12, 54, 18, 130, 44].every(x => x >= 10); // true
二、操作類方法
1.concat()
合并兩個(gè)或多個(gè)數(shù)組
[1, 2].concat([3, 4], [5, 6]); // [1, 2, 3, 4, 5, 6]
2.slice()
返回?cái)?shù)組的淺拷貝部分
['a', 'b', 'c', 'd'].slice(1, 3); // ['b', 'c']
3.splice()
修改數(shù)組內(nèi)容（添加/刪除元素）
const arr = [1, 2, 3, 4]; arr.splice(1, 2, 'a', 'b'); // 返回 [2, 3] console.log(arr); // [1, 'a', 'b', 4]
三、轉(zhuǎn)換類方法
1.join()
將數(shù)組元素連接成字符串
['Fire', 'Air', 'Water'].join(); // "Fire,Air,Water"
['Fire', 'Air', 'Water'].join('-'); // "Fire-Air-Water"
2. reduce() / reduceRight()
對(duì)數(shù)組元素執(zhí)行累加器函數(shù)
[1, 2, 3, 4].reduce((acc, val) => acc + val); // 10 [1, 2, 3, 4].reduce((acc, val) => acc + val, 5); // 15 (帶初始值)
四、排序類方法
1.sort()
對(duì)數(shù)組元素進(jìn)行排序（原地修改）
const fruits = ['banana', 'apple', 'pear']; fruits.sort(); // ['apple', 'banana', 'pear'] const numbers = [4, 2, 5, 1, 3]; numbers.sort((a, b) => a - b); // [1, 2, 3, 4, 5]
2. reverse()
反轉(zhuǎn)數(shù)組順序（原地修改）
['a', 'b', 'c'].reverse(); // ['c', 'b', 'a']
五、迭代類方法
1. forEach()
對(duì)每個(gè)數(shù)組元素執(zhí)行函數(shù)
['a', 'b', 'c'].forEach((item, index) => {
console.log(`${index}: ${item}`);
});
// 0: a
// 1: b
// 2: c
六、新增元素方法
1.push() / pop()
在數(shù)組末尾添加/刪除元素
const arr = [1, 2]; arr.push(3); // 返回新長(zhǎng)度3，arr變?yōu)閇1, 2, 3] arr.pop(); // 返回3，arr變回[1, 2]
2.unshift() / shift()
在數(shù)組開(kāi)頭添加/刪除元素
const arr = [1, 2]; arr.unshift(0); // 返回新長(zhǎng)度3，arr變?yōu)閇0, 1, 2] arr.shift(); // 返回0，arr變回[1, 2]
七、ES6+新增方法
1. flat()
將嵌套數(shù)組扁平化
[1, 2, [3, 4]].flat(); // [1, 2, 3, 4] [1, 2, [3, [4, 5]]].flat(2); // [1, 2, 3, 4, 5]
2. fill()
用固定值填充數(shù)組
[1, 2, 3].fill(0); // [0, 0, 0] [1, 2, 3, 4].fill(5, 1, 3); // [1, 5, 5, 4]
3. Array.from()
從類數(shù)組對(duì)象創(chuàng)建新數(shù)組
Array.from('foo'); // ['f', 'o', 'o']
Array.from([1, 2, 3], x => x + x); // [2, 4, 6]
總結(jié)對(duì)比
| 方法 | 返回值 | 是否修改原數(shù)組 | 使用場(chǎng)景 |
|---|---|---|---|
| concat() | 新數(shù)組 | 否 | 合并數(shù)組 |
| every() | 布爾值 | 否 | 檢查所有元素是否滿足條件 |
| fill() | 修改后的數(shù)組 | 是 | 填充數(shù)組元素 |
| filter() | 新數(shù)組 | 否 | 篩選元素 |
| find() | 第一個(gè)匹配元素或undefined | 否 | 查找單個(gè)元素 |
| findIndex() | 索引或-1 | 否 | 查找元素位置 |
| flat() | 新數(shù)組 | 否 | 扁平化嵌套數(shù)組 |
| flatMap() | 新數(shù)組 | 否 | 映射后扁平化 |
| forEach() | undefined | 否 | 遍歷數(shù)組 |
| includes() | 布爾值 | 否 | 檢查是否包含值 |
| indexOf() | 索引或-1 | 否 | 查找元素首次出現(xiàn)位置 |
| join() | 字符串 | 否 | 連接數(shù)組為字符串 |
| map() | 新數(shù)組 | 否 | 轉(zhuǎn)換每個(gè)元素 |
| pop() | 刪除的元素 | 是 | 移除最后一個(gè)元素 |
| push() | 新長(zhǎng)度 | 是 | 末尾添加元素 |
| reduce() | 累加結(jié)果 | 否 | 累加計(jì)算 |
| reverse() | 反轉(zhuǎn)后的數(shù)組 | 是 | 反轉(zhuǎn)數(shù)組順序 |
| shift() | 刪除的元素 | 是 | 移除第一個(gè)元素 |
| slice() | 新數(shù)組 | 否 | 截取數(shù)組部分 |
| some() | 布爾值 | 否 | 檢查是否有元素滿足條件 |
| sort() | 排序后的數(shù)組 | 是 | 數(shù)組排序 |
| splice() | 刪除的元素?cái)?shù)組 | 是 | 添加/刪除元素 |
| unshift() | 新長(zhǎng)度 | 是 | 開(kāi)頭添加元素 |
這些方法都遵循函數(shù)式編程的原則，不會(huì)修改原數(shù)組，而是返回新數(shù)組或值。它們可以鏈?zhǔn)秸{(diào)用，使得代碼更加簡(jiǎn)潔和可讀。
到此這篇關(guān)于JavaScript數(shù)組常用方法find、findIndex、filter、map、flatMap及some的文章就介紹到這了,更多相關(guān)JS數(shù)組常用方法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
- JS中filter( )數(shù)組過(guò)濾器的使用
- JavaScript遍歷數(shù)組的三種方法map、forEach與filter實(shí)例詳解
- JavaScript 數(shù)組some()和filter()的用法及區(qū)別
- JavaScript中find()、findIndex()、filter()、indexOf()處理數(shù)組方法的具體區(qū)別詳解
- js 數(shù)組 find,some,filter,reduce區(qū)別詳解
- JS中的常見(jiàn)數(shù)組遍歷案例詳解(forEach,?map,?filter,?sort,?reduce,?every)
- JavaScript 數(shù)組的常用方法find 和 filter詳解及區(qū)別介紹
- JavaScript數(shù)組方法push()、forEach()、filter()、sort()實(shí)戰(zhàn)教程
相關(guān)文章
通常的解決辦法是把“答案”當(dāng)作整個(gè)問(wèn)題容器的子元素，然后點(diǎn)擊父元素上的按鈕后展開(kāi)對(duì)應(yīng)的子元素。通過(guò)父子元素的對(duì)應(yīng)關(guān)系來(lái)匹配標(biāo)題和答案。2008-09-09
JavaScript中的await函數(shù)使用小結(jié)
async 函數(shù)是 AsyncFunction 構(gòu)造函數(shù)的實(shí)例,并且其中允許使用 await 關(guān)鍵字,async 和 await 關(guān)鍵字讓我們可以用一種更簡(jiǎn)潔的方式寫(xiě)出基于 Promise 的異步行為,而無(wú)需刻意地鏈?zhǔn)秸{(diào)用 promise,這篇文章主要介紹了JavaScript中的await,需要的朋友可以參考下2024-01-01
javascript 循環(huán)調(diào)用示例介紹
循環(huán)調(diào)用,如果已經(jīng)獲取到了結(jié)果,則退出循環(huán)，下面有個(gè)不錯(cuò)的示例，感興趣的朋友可以嘗試操作下2013-11-11
JS中的form.submit()不能提交表單的錯(cuò)誤原因
這篇文章主要介紹了JS中的form.submit()不能提交表單的錯(cuò)誤原因,本文最后得出結(jié)論是按鈕的ID、名稱不要使用submit,需要的朋友可以參考下2014-10-10
之前做項(xiàng)目的時(shí)候在實(shí)現(xiàn)表單中file類型input選擇多圖片時(shí)有很多種實(shí)現(xiàn)方法，今天小編給大家分享基于php實(shí)現(xiàn)一種多文件上傳的方法，需要的朋友參考下吧2017-09-09
JavaScript如何實(shí)現(xiàn)數(shù)組內(nèi)的值累加
我們會(huì)經(jīng)常在開(kāi)發(fā)過(guò)程中,需要獲取數(shù)組中的值累加,所以下面這篇文章主要給大家介紹了關(guān)于JavaScript如何實(shí)現(xiàn)數(shù)組內(nèi)的值累加的相關(guān)資料,文中給出了詳細(xì)的代碼示例,需要的朋友可以參考下2023-11-11
IndexedAccessTypes在TypeScript中用于通過(guò)索引訪問(wèn)和獲取其他類型中的屬性,本文就來(lái)詳細(xì)的介紹一下TypeScript索引訪問(wèn)類型,感興趣的可以了解一下2025-10-10
這篇文章主要為大家詳細(xì)的介紹了Bootstrap中Carousel的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-06-06
這篇文章主要介紹了使用js獲取身份證年齡的示例代碼，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下2020-12-12
在JavaScript中，和JAVA類似，也提供了對(duì)于基本數(shù)據(jù)類型的包裝類型。例如Number、Boolean、String類型。下面我們就來(lái)詳細(xì)探討下吧。2015-06-06