JavaScript中map()和filter()的使用區(qū)別
更新時間：2025年05月08日 10:24:44 作者：胡歌1
map()和filter()都是 JavaScript數(shù)組的高階函數(shù),本文主要介紹了JavaScript中map()和filter()的使用區(qū)別,具有一定的參考價值,感興趣的可以了解一下
map() 和 filter() 都是 JavaScript 數(shù)組的高階函數(shù)，但它們的用途和行為有本質(zhì)區(qū)別：
核心區(qū)別對比表
| 特性 | map() | filter() |
|---|---|---|
| 用途 | 轉(zhuǎn)換數(shù)組元素 | 篩選數(shù)組元素 |
| 返回值 | 新數(shù)組（與原數(shù)組長度相同） | 新數(shù)組（長度≤原數(shù)組） |
| 回調(diào)返回要求 | 返回轉(zhuǎn)換后的元素 | 返回布爾值（決定是否保留元素） |
| 空位處理 | 保留空位（返回undefined） | 跳過空位 |
| 是否修改原數(shù)組 | 不修改原數(shù)組（純函數(shù)） | 不修改原數(shù)組（純函數(shù)） |
代碼示例對比
示例數(shù)組
const numbers = [1, 2, 3, 4, 5];
const users = [
{ id: 1, name: 'Alice', active: true },
{ id: 2, name: 'Bob', active: false },
{ id: 3, name: 'Charlie', active: true }
];map() 示例
// 將每個數(shù)字平方 const squares = numbers.map(n => n * n); console.log(squares); // [1, 4, 9, 16, 25] // 提取用戶名數(shù)組 const names = users.map(user => user.name); console.log(names); // ['Alice', 'Bob', 'Charlie'] // 處理空位 const sparse = [1, , 3]; const mapped = sparse.map(x => x * 2); console.log(mapped); // [2, , 6]
filter() 示例
// 篩選偶數(shù)
const evens = numbers.filter(n => n % 2 === 0);
console.log(evens); // [2, 4]
// 篩選活躍用戶
const activeUsers = users.filter(user => user.active);
console.log(activeUsers);
// [{id:1,name:'Alice',active:true}, {id:3,name:'Charlie',active:true}]
// 處理空位
const sparse = [1, , 3];
const filtered = sparse.filter(x => true);
console.log(filtered); // [1, 3] (空位被跳過)關(guān)鍵區(qū)別詳解
1. 用途不同
map() 用于 轉(zhuǎn)換/映射 數(shù)組元素
// 將溫度從攝氏度轉(zhuǎn)換為華氏度 const celsius = [0, 10, 20]; const fahrenheit = celsius.map(c => c * 9/5 + 32); console.log(fahrenheit); // [32,50,68]
filter() 用于 篩選 數(shù)組元素
// 篩選正數(shù) const temps = [-2, 5, -10, 15]; const positiveTemps = temps.filter(t => t > 0); console.log(positiveTemps); //[5,15]
2. 返回值不同
map() 總是返回 等長數(shù)組
[1, 2, 3].map(x => x * 2); // [2, 4, 6] (長度保持3)
filter() 返回 可能更短的數(shù)組
[1, 2, 3].filter(x => x > 1); // [2, 3] (長度變?yōu)?)
3. 回調(diào)函數(shù)要求不同
map() 回調(diào)返回 任意類型值
[1, 2].map(x => ({ value: x })); // 返回對象數(shù)組: [{value:1}, {value:2}]filter() 回調(diào)必須返回 布爾值
[1, 2].filter(x => x % 2 === 0); // 必須返回true/false // [2]
組合使用示例
兩者常結(jié)合使用實現(xiàn)復(fù)雜邏輯：
// 獲取所有活躍用戶的名字 const activeNames = users .filter(user => user.active) // 先篩選 .map(user => user.name); // 再轉(zhuǎn)換 console.log(activeNames); // ['Alice', 'Charlie'] // 計算所有正數(shù)的平方根 const numbers = [4, -1, 9, -5, 16]; const positiveRoots = numbers .filter(n => n > 0) // 篩選正數(shù) .map(n => Math.sqrt(n)); // 計算平方根 console.log(positiveRoots ); // [2, 3, 4]
性能注意事項
map() 總會遍歷所有元素
filter() 也總會遍歷所有元素
當(dāng)鏈?zhǔn)秸{(diào)用時，考慮順序優(yōu)化：
// 更高效的寫法：先篩選再轉(zhuǎn)換（減少map操作次數(shù)） bigArray.filter(x => x > 10).map(x => x * 2); // 低效寫法（會先對所有元素執(zhí)行轉(zhuǎn)換） bigArray.map(x => x * 2).filter(x => x > 20);
特殊場景處理
處理稀疏數(shù)組
const sparse = [1, , , 4]; // map會保留空位 const mapSparse = sparse.map(x => x * 2); console.log(mapSparse); // [2, , , 8] // filter會跳過空位 const filterSparse =sparse.filter(x => true); console.log(filterSparse); // [1, 4]
處理數(shù)組中的假值
const mixed = [0, 1, false, 2, '', 3]; // filter可以用于移除假值 const truths = mixed.filter(Boolean); // [1, 2, 3]
總結(jié)選擇指南
需要 轉(zhuǎn)換每個元素 → 用
map()需要 基于條件篩選元素 → 用
filter()需要 既篩選又轉(zhuǎn)換 → 組合使用（通常先filter后map）
需要 保持?jǐn)?shù)組長度 → 只能用
map()需要 移除特定元素 → 用
filter()
到此這篇關(guān)于JavaScript中map()和filter()的使用區(qū)別的文章就介紹到這了,更多相關(guān)JavaScript map()和filter()內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了微信小程序開發(fā)常用功能,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-02-02
基于JavaScript實現(xiàn)熔巖燈效果導(dǎo)航菜單
這篇文章主要介紹了基于JavaScript實現(xiàn)熔巖燈效果導(dǎo)航菜單，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
JSON （JavaScript Object Notation）一種簡單的數(shù)據(jù)格式，比xml更輕巧，下面通過本文給大家介紹JS中Eval解析JSON字符串的一個小問題，需要的朋友參考下吧2016-02-02
這篇文章主要介紹了JS實現(xiàn)側(cè)懸浮浮動實例代碼，有需要的朋友可以參考一下2013-11-11
這篇文章主要介紹了JS回調(diào)函數(shù)簡單用法,結(jié)合實例形式分析了js回調(diào)函數(shù)的定義與簡單使用方法,具有一定參考借鑒價值,需要的朋友可以參考下2017-02-02
這篇文章主要介紹了js判斷iframe中元素是否存在的實現(xiàn)代碼,需要的朋友可以參考下2016-12-12
如何使用HTML+JavaScript實現(xiàn)滑動驗證碼
這篇文章主要介紹了如何使用HTML+JavaScript實現(xiàn)滑動驗證碼的相關(guān)資料,通過示例代碼詳細(xì)描述了系統(tǒng)的功能實現(xiàn)、代碼結(jié)構(gòu)及擴(kuò)展建議,需要的朋友可以參考下2026-01-01
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)搜索功能,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-03-03
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)tab更換頁面效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了淺談webpack4.x 入門(一篇足矣)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09