JavaScript數(shù)組與對(duì)象過濾方法的完全指南
更新時(shí)間：2026年04月17日 08:46:14 作者：花歸去
本文系統(tǒng)介紹了JavaScript中的數(shù)組和對(duì)象過濾方法,數(shù)組過濾包括filter()、find()、findIndex()等常用方法,以及every()和some()等條件檢測方法；對(duì)象過濾涵蓋鍵值過濾、深度過濾等技巧,文章還提供了高級(jí)過濾技巧,需要的朋友可以參考下
一、數(shù)組過濾方法
1.filter()— 最常用過濾方法
創(chuàng)建一個(gè)新數(shù)組，包含通過測試的所有元素。
const numbers = [1, 2, 3, 4, 5, 6];
// 基礎(chǔ)用法：過濾偶數(shù)
const evens = numbers.filter(num => num % 2 === 0);
// 結(jié)果: [2, 4, 6]
// 復(fù)雜條件：過濾大于3且是偶數(shù)的數(shù)
const result = numbers.filter(num => num > 3 && num % 2 === 0);
// 結(jié)果: [4, 6]
// 對(duì)象數(shù)組過濾
const users = [
{ name: '張三', age: 25, active: true },
{ name: '李四', age: 30, active: false },
{ name: '王五', age: 28, active: true }
];
const activeUsers = users.filter(user => user.active);
// 結(jié)果: [{ name: '張三', age: 25... }, { name: '王五', age: 28... }]
const adults = users.filter(user => user.age >= 28);
// 結(jié)果: [{ name: '李四', age: 30... }, { name: '王五', age: 28... }]參數(shù)說明：
array.filter((element, index, array) => {
// 返回 true 保留元素，false 則過濾掉
});| 參數(shù) | 說明 |
|---|---|
element | 當(dāng)前處理的元素（必需） |
index | 當(dāng)前元素的索引（可選） |
array | 調(diào)用 filter 的數(shù)組本身（可選） |
2.find()— 查找單個(gè)元素
返回第一個(gè)滿足條件的元素，找不到返回 undefined。
const users = [
{ id: 1, name: '張三' },
{ id: 2, name: '李四' },
{ id: 3, name: '王五' }
];
// 查找特定ID的用戶
const user = users.find(u => u.id === 2);
// 結(jié)果: { id: 2, name: '李四' }
// 查找不存在的返回 undefined
const notFound = users.find(u => u.id === 999);
// 結(jié)果: undefined3.findIndex()— 查找索引
返回第一個(gè)滿足條件的元素的索引，找不到返回 -1。
const numbers = [10, 20, 30, 40];
const index = numbers.findIndex(num => num > 25);
// 結(jié)果: 2 (即30的索引)
// 常用于刪除特定元素
const users = [{ id: 1 }, { id: 2 }, { id: 3 }];
const idx = users.findIndex(u => u.id === 2);
if (idx !== -1) users.splice(idx, 1);4.every()— 全部滿足
測試是否所有元素都通過測試，返回布爾值。
const scores = [85, 90, 88, 92]; // 是否全部及格（>=60） const allPassed = scores.every(score => score >= 60); // 結(jié)果: true const allExcellent = scores.every(score => score >= 90); // 結(jié)果: false
5.some()— 部分滿足
測試是否有至少一個(gè)元素通過測試，返回布爾值。
const users = [
{ name: '張三', role: 'admin' },
{ name: '李四', role: 'user' }
];
// 是否存在管理員
const hasAdmin = users.some(u => u.role === 'admin');
// 結(jié)果: true
// 是否有未成年人
const ages = [25, 30, 16, 28];
const hasMinor = ages.some(age => age < 18);
// 結(jié)果: true二、對(duì)象過濾方法
1. 根據(jù)鍵值過濾對(duì)象屬性
const user = {
id: 1,
name: '張三',
password: 'secret123',
email: 'zhangsan@example.com',
createdAt: '2024-01-01',
token: 'abc123'
};
// 方法1：解構(gòu) + 剩余參數(shù)（排除特定字段）
const { password, token, ...safeUser } = user;
console.log(safeUser);
// { id: 1, name: '張三', email: '...', createdAt: '...' }
// 方法2：動(dòng)態(tài)過濾（保留指定字段）
const pick = (obj, keys) =>
Object.fromEntries(
Object.entries(obj).filter(([key]) => keys.includes(key))
);
const publicFields = pick(user, ['id', 'name', 'email']);
// { id: 1, name: '張三', email: '...' }
// 方法3：動(dòng)態(tài)過濾（排除指定字段）
const omit = (obj, keys) =>
Object.fromEntries(
Object.entries(obj).filter(([key]) => !keys.includes(key))
);
const safeData = omit(user, ['password', 'token']);
// { id: 1, name: '張三', email: '...', createdAt: '...' }2. 深度過濾對(duì)象（遞歸）
// 遞歸移除所有 null/undefined/空字符串
const cleanObject = (obj) => {
if (Array.isArray(obj)) {
return obj.map(cleanObject).filter(item => item != null);
}
if (typeof obj === 'object' && obj !== null) {
return Object.fromEntries(
Object.entries(obj)
.filter(([_, v]) => v != null && v !== '')
.map(([k, v]) => [k, cleanObject(v)])
);
}
return obj;
};
const dirty = {
a: 1,
b: null,
c: '',
d: { e: 2, f: undefined, g: { h: '', i: 3 } }
};
cleanObject(dirty);
// { a: 1, d: { e: 2, g: { i: 3 } } }3. 根據(jù)值的條件過濾對(duì)象
const products = {
apple: { price: 5, stock: 100 },
banana: { price: 3, stock: 0 },
orange: { price: 4, stock: 50 }
};
// 過濾出有庫存的商品
const inStock = Object.fromEntries(
Object.entries(products).filter(([_, product]) => product.stock > 0)
);
// { apple: { price: 5, stock: 100 }, orange: { price: 4, stock: 50 } }
// 過濾出價(jià)格低于5的商品
const affordable = Object.fromEntries(
Object.entries(products).filter(([_, p]) => p.price < 5)
);
// { banana: { price: 3, stock: 0 }, orange: { price: 4, stock: 50 } }三、高級(jí)過濾技巧
1. 多條件組合過濾
const products = [
{ name: 'iPhone', category: '手機(jī)', price: 5999, brand: 'Apple' },
{ name: 'iPad', category: '平板', price: 3999, brand: 'Apple' },
{ name: 'Mate60', category: '手機(jī)', price: 6999, brand: 'Huawei' },
{ name: 'MatePad', category: '平板', price: 2999, brand: 'Huawei' }
];
// 鏈?zhǔn)竭^濾：先按類別，再按品牌，最后按價(jià)格
const result = products
.filter(p => p.category === '手機(jī)')
.filter(p => p.brand === 'Apple')
.filter(p => p.price < 7000);
// 結(jié)果: [{ name: 'iPhone', ... }]
// 或使用單一復(fù)雜條件（性能更好）
const result2 = products.filter(p =>
p.category === '手機(jī)' &&
p.brand === 'Apple' &&
p.price < 7000
);2. 模糊搜索/文本過濾
const users = [
{ name: '張三', email: 'zhangsan@test.com' },
{ name: '張三豐', email: 'zhangsanfeng@test.com' },
{ name: '李四', email: 'lisi@test.com' }
];
const searchTerm = 'zhang';
// 不區(qū)分大小寫的多字段搜索
const filtered = users.filter(user =>
Object.values(user).some(value =>
String(value).toLowerCase().includes(searchTerm.toLowerCase())
)
);
// 結(jié)果: 張三 和 張三豐3. 去重過濾
const numbers = [1, 2, 2, 3, 3, 3, 4];
// 方法1：使用 Set（最簡單）
const unique1 = [...new Set(numbers)];
// [1, 2, 3, 4]
// 方法2：根據(jù)對(duì)象屬性去重
const users = [
{ id: 1, name: '張三' },
{ id: 2, name: '李四' },
{ id: 1, name: '張三（重復(fù)）' }
];
const uniqueById = users.filter((user, index, self) =>
index === self.findIndex(u => u.id === user.id)
);
// 結(jié)果: [{ id: 1, name: '張三' }, { id: 2, name: '李四' }]4. 分頁過濾
const allData = Array.from({ length: 100 }, (_, i) => ({ id: i + 1 }));
const paginate = (data, page, pageSize) => {
const start = (page - 1) * pageSize;
return data.slice(start, start + pageSize);
};
const page1 = paginate(allData, 1, 10); // 第1頁，每頁10條
const page2 = paginate(allData, 2, 10); // 第2頁5. 鏈?zhǔn)竭^濾 vs 管道函數(shù)
// 創(chuàng)建可復(fù)用的過濾管道
const pipe = (...filters) => {
return (data) => filters.reduce((acc, filter) => acc.filter(filter), data);
};
// 定義過濾函數(shù)
const isActive = user => user.active;
const isAdult = user => user.age >= 18;
const isFromCity = city => user => user.city === city;
const users = [
{ name: '張三', age: 25, city: '北京', active: true },
{ name: '李四', age: 30, city: '上海', active: false },
{ name: '王五', age: 17, city: '北京', active: true },
{ name: '趙六', age: 28, city: '北京', active: true }
];
// 組合過濾條件
const activeAdultsInBeijing = pipe(isActive, isAdult, isFromCity('北京'));
const result = activeAdultsInBeijing(users);
// 結(jié)果: [{ name: '張三', ... }, { name: '趙六', ... }]四、性能優(yōu)化建議
| 場景 | 推薦方法 | 時(shí)間復(fù)雜度 | 說明 |
|---|---|---|---|
| 簡單過濾 | filter() | O(n) | 代碼清晰，性能良好 |
| 大數(shù)據(jù)量（>10萬） | for 循環(huán) | O(n) | 比 filter() 快 20-30% |
| 提前終止 | find() / some() | O(k) | 找到即停，k ≤ n |
| 多次過濾 | 單一復(fù)雜條件 | O(n) | 減少遍歷次數(shù) |
| 去重 | Set | O(n) | 最優(yōu)方案 |
| 對(duì)象屬性去重 | Map | O(n) | 優(yōu)于 findIndex 的 O(n²) |
性能優(yōu)化示例
// 大數(shù)據(jù)量優(yōu)化示例
const bigArray = new Array(1000000).fill(0).map((_, i) => i);
// 較慢：filter 鏈
const slow = bigArray.filter(n => n > 100).filter(n => n % 2 === 0);
// 較快：單一 filter
const fast = bigArray.filter(n => n > 100 && n % 2 === 0);
// 最快：for 循環(huán)
const fastest = [];
for (let i = 0; i < bigArray.length; i++) {
const n = bigArray[i];
if (n > 100 && n % 2 === 0) fastest.push(n);
}內(nèi)存優(yōu)化建議
// 避免在循環(huán)中創(chuàng)建不必要的中間數(shù)組
const users = [/* 大量數(shù)據(jù) */];
// ? 不好：創(chuàng)建多個(gè)中間數(shù)組
const result = users
.filter(u => u.active)
.map(u => ({ ...u, fullName: `${u.firstName} ${u.lastName}` }))
.filter(u => u.age >= 18);
// ? 更好：使用 reduce 一次完成
const result = users.reduce((acc, user) => {
if (user.active && user.age >= 18) {
acc.push({
...user,
fullName: `${user.firstName} ${user.lastName}`
});
}
return acc;
}, []);五、常用工具函數(shù)封裝
// 通用過濾工具庫
const FilterUtils = {
// 多條件過濾
multiFilter: (data, conditions) =>
data.filter(item => conditions.every(cond => cond(item))),
// 模糊搜索
fuzzySearch: (data, fields, keyword) =>
data.filter(item =>
fields.some(field =>
String(item[field]).toLowerCase()
.includes(keyword.toLowerCase())
)
),
// 范圍過濾
inRange: (data, field, min, max) =>
data.filter(item => item[field] >= min && item[field] <= max),
// 對(duì)象數(shù)組去重
uniqueBy: (data, key) =>
data.filter((item, index, self) =>
index === self.findIndex(t => t[key] === item[key])
),
// 清理空值
compact: (data) =>
data.filter(Boolean) // 移除 falsy 值
};
// 使用示例
const users = [
{ name: '張三', age: 25, city: '北京' },
{ name: '李四', age: 30, city: '上海' },
{ name: '王五', age: 28, city: '北京' }
];
// 多條件：北京的成年人
const result = FilterUtils.multiFilter(users, [
u => u.city === '北京',
u => u.age >= 18
]);總結(jié)對(duì)比表
| 方法 | 返回類型 | 用途 | 是否改變?cè)瓟?shù)組 | 短路特性 | 適用場景 |
|---|---|---|---|---|---|
filter() | 新數(shù)組 | 保留符合條件的元素 | ? | ? | 需要多個(gè)結(jié)果 |
find() | 元素/undefined | 查找第一個(gè)匹配項(xiàng) | ? | ? | 查找單個(gè)元素 |
findIndex() | 數(shù)字索引 | 查找第一個(gè)匹配項(xiàng)的索引 | ? | ? | 需要索引進(jìn)行操作 |
findLast() | 元素/undefined | 查找最后一個(gè)匹配項(xiàng) | ? | ? | 從后向前查找 |
findLastIndex() | 數(shù)字索引 | 查找最后一個(gè)匹配項(xiàng)的索引 | ? | ? | 從后向前找索引 |
every() | Boolean | 是否全部滿足 | ? | ? | 驗(yàn)證所有元素 |
some() | Boolean | 是否部分滿足 | ? | ? | 驗(yàn)證存在性 |
map() | 新數(shù)組 | 轉(zhuǎn)換每個(gè)元素 | ? | ? | 數(shù)據(jù)轉(zhuǎn)換 |
reduce() | 任意值 | 聚合計(jì)算 | ? | ? | 累加、分組等 |
flatMap() | 新數(shù)組 | 映射后展平一層 | ? | ? | 一對(duì)多轉(zhuǎn)換 |
ES2023 新增方法
// findLast 和 findLastIndex（從后向前查找） const numbers = [5, 12, 8, 130, 44]; const lastLarge = numbers.findLast(n => n > 10); // 結(jié)果: 44（從后向前第一個(gè)大于10的數(shù)） const lastLargeIndex = numbers.findLastIndex(n => n > 10); // 結(jié)果: 4（44的索引） // toReversed、toSorted、toSpliced、with（不改變?cè)瓟?shù)組的版本） const original = [1, 2, 3]; const reversed = original.toReversed(); // original 仍然是 [1, 2, 3]，reversed 是 [3, 2, 1]
常見問題與注意事項(xiàng)
1. 空值處理
// filter 會(huì)自動(dòng)跳過空槽位（稀疏數(shù)組） const sparse = [1, , , 4]; const filtered = sparse.filter(x => x > 0); // 結(jié)果: [1, 4]（空槽位被忽略） // 但需要注意 undefined 和 null 的區(qū)別 const withUndefined = [1, undefined, null, 4]; const cleaned = withUndefined.filter(x => x != null); // 結(jié)果: [1, 4]（保留了數(shù)值，移除了 undefined 和 null）
2. 異步過濾
// 異步過濾需要配合 Promise.all 和 map
const asyncFilter = async (arr, predicate) => {
const results = await Promise.all(arr.map(predicate));
return arr.filter((_, index) => results[index]);
};
// 使用示例
const numbers = [1, 2, 3, 4, 5];
const isEvenAsync = async (num) => {
await new Promise(resolve => setTimeout(resolve, 10));
return num % 2 === 0;
};
const evens = await asyncFilter(numbers, isEvenAsync);
// 結(jié)果: [2, 4]（異步版本）3. 類型守衛(wèi)與 TypeScript
// TypeScript 類型守衛(wèi)示例
interface User {
id: number;
name: string;
email?: string;
}
// 使用類型謂詞進(jìn)行類型收窄
function hasEmail(user: User): user is User & { email: string } {
return user.email !== undefined;
}
const users: User[] = [
{ id: 1, name: '張三', email: 'zhang@test.com' },
{ id: 2, name: '李四' }
];
const usersWithEmail = users.filter(hasEmail);
// usersWithEmail 類型自動(dòng)推斷為 (User & { email: string })[]通過以上方法，你可以在各種場景下高效、優(yōu)雅地處理 JavaScript 中的數(shù)組和對(duì)象過濾需求。根據(jù)具體場景選擇合適的方法，既能保證代碼可讀性，又能兼顧性能表現(xiàn)。
以上就是JavaScript數(shù)組與對(duì)象過濾方法的完全指南的詳細(xì)內(nèi)容，更多關(guān)于JavaScript數(shù)組與對(duì)象過濾的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
根據(jù)身份證號(hào)自動(dòng)輸出相關(guān)信息(籍貫,出身日期,性別)
為了減少客戶的在頁面的輸入，做了這個(gè)效果，他可以根據(jù)用戶輸入的身份證號(hào)輸出籍貫、出身日期、性別的相關(guān)信息，需要的朋友可以參考下2013-11-11
使用Javascript開發(fā)sliding-nav帶滑動(dòng)條效果的導(dǎo)航插件
這篇文章主要介紹了使用Javascript開發(fā)sliding-nav帶滑動(dòng)條效果的導(dǎo)航插件,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-03-03
JavaScript動(dòng)態(tài)添加css樣式和script標(biāo)簽
這篇文章主要介紹了JavaScript動(dòng)態(tài)添加css樣式和script標(biāo)簽的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-07-07
本文介紹在表單提交之前修改提交的值的方法，希望給需要的朋友一些幫助。2016-04-04
JavaScript 讀URL參數(shù)增強(qiáng)改進(jìn)版版
網(wǎng)上有不少JavaScript 讀 URL 參數(shù)的函數(shù)，但沒考慮到 URL 中帶 # 符的情況，我的可以處理這種情況，并使用了點(diǎn)對(duì)象寫法，優(yōu)化了些性能。2008-10-10
如何用threejs實(shí)現(xiàn)實(shí)時(shí)多邊形折射
這篇文章主要介紹了如何用threejs實(shí)現(xiàn)實(shí)時(shí)多邊形折射，對(duì)three.js庫感興趣的同學(xué)，可以參考下2021-05-05
用js取得鼠標(biāo)所在位置的對(duì)象...2007-01-01
禁止js文件緩存問題是我一直遇到的大問題，終于找到了一個(gè)比較好的辦法2010-04-04
JS函數(shù)式編程之純函數(shù)、柯里化以及組合函數(shù)
這篇文章主要介紹了JS函數(shù)式編程之純函數(shù)、柯里化以及組合函數(shù)，文章對(duì)三個(gè)函數(shù)進(jìn)行分析講解，內(nèi)容也很容易理解，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-01-01
深入聊聊Array的sort方法的使用技巧.詳細(xì)點(diǎn)評(píng)protype.js中的sortBy方法
深入聊聊Array的sort方法的使用技巧.詳細(xì)點(diǎn)評(píng)protype.js中的sortBy方法...2007-04-04