快捷導(dǎo)航

JavaScript中map()和filter()的使用區(qū)別

更新時(shí)間：2025年05月08日 10:24:44 作者：胡歌1

map()和filter()都是 JavaScript數(shù)組的高階函數(shù),本文主要介紹了JavaScript中map()和filter()的使用區(qū)別,具有一定的參考價(jià)值,感興趣的可以了解一下

核心區(qū)別對(duì)比表

特性	map()	filter()
用途	轉(zhuǎn)換數(shù)組元素	篩選數(shù)組元素
返回值	新數(shù)組（與原數(shù)組長度相同）	新數(shù)組（長度≤原數(shù)組）
回調(diào)返回要求	返回轉(zhuǎn)換后的元素	返回布爾值（決定是否保留元素）
空位處理	保留空位（返回undefined）	跳過空位
是否修改原數(shù)組	不修改原數(shù)組（純函數(shù)）	不修改原數(shù)組（純函數(shù)）

代碼示例對(duì)比

示例數(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() 示例

// 將每個(gè)數(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 })); // 返回對(duì)象數(shù)組:  [{value:1}, {value:2}]

filter() 回調(diào)必須返回布爾值

[1, 2].filter(x => x % 2 === 0); // 必須返回true/false // [2]

組合使用示例

兩者常結(jié)合使用實(shí)現(xiàn)復(fù)雜邏輯：

// 獲取所有活躍用戶的名字
const activeNames = users
  .filter(user => user.active)    // 先篩選
  .map(user => user.name);        // 再轉(zhuǎn)換
console.log(activeNames);         // ['Alice', 'Charlie']

// 計(jì)算所有正數(shù)的平方根
const numbers = [4, -1, 9, -5, 16];
const positiveRoots = numbers
  .filter(n => n > 0)            // 篩選正數(shù)
  .map(n => Math.sqrt(n));       // 計(jì)算平方根
console.log(positiveRoots );     // [2, 3, 4]

性能注意事項(xiàng)

map() 總會(huì)遍歷所有元素

filter() 也總會(huì)遍歷所有元素

當(dāng)鏈?zhǔn)秸{(diào)用時(shí)，考慮順序優(yōu)化：

// 更高效的寫法：先篩選再轉(zhuǎn)換（減少map操作次數(shù)）
bigArray.filter(x => x > 10).map(x => x * 2);

// 低效寫法（會(huì)先對(duì)所有元素執(zhí)行轉(zhuǎn)換）
bigArray.map(x => x * 2).filter(x => x > 20);

特殊場(chǎng)景處理

處理稀疏數(shù)組

const sparse = [1, , , 4];

// map會(huì)保留空位
const mapSparse = sparse.map(x => x * 2); 
console.log(mapSparse); // [2, , , 8]

// filter會(huì)跳過空位
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)換每個(gè)元素 → 用 map()
需要基于條件篩選元素 → 用 filter()
需要既篩選又轉(zhuǎn)換 → 組合使用（通常先filter后map）
需要保持?jǐn)?shù)組長度 → 只能用 map()
需要移除特定元素 → 用 filter()

到此這篇關(guān)于JavaScript中map()和filter()的使用區(qū)別的文章就介紹到這了,更多相關(guān)JavaScript map()和filter()內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: