腳本之家服務器常用軟件

快捷導航

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

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

map()和filter()都是 JavaScript數(shù)組的高階函數(shù),本文主要介紹了JavaScript中map()和filter()的使用區(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] (空位被跳過)

關鍵區(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]

組合使用示例

兩者常結合使用實現(xiàn)復雜邏輯：

// 獲取所有活躍用戶的名字
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() 也總會遍歷所有元素

當鏈式調(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]

總結選擇指南

需要轉(zhuǎn)換每個元素 → 用 map()
需要基于條件篩選元素 → 用 filter()
需要既篩選又轉(zhuǎn)換 → 組合使用（通常先filter后map）
需要保持數(shù)組長度 → 只能用 map()
需要移除特定元素 → 用 filter()

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

您可能感興趣的文章:

簡述JS中forEach()、map()、every()、some()和filter()的用法

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片