一次性讓大家搞懂JavaScript數(shù)組方法reduce、every、some
前言
在 JavaScript 開發(fā)中,reduce、every 和 some 是三個(gè)高頻使用的數(shù)組高階方法,但它們的用途和區(qū)別常常令人混淆。本文將用 原理剖析 + 場景對比 + 手寫實(shí)現(xiàn) 幫你徹底理解它們,從此告別死記硬背!

一、reduce:數(shù)組的「熔爐」
1.1 核心特性
- 核心作用:將數(shù)組元素「熔煉」成一個(gè)值(任意類型)
- 回調(diào)參數(shù):
(accumulator, current, index, array) - 返回值:最終的累積結(jié)果(
accumulator) - 初始值:可選的第二個(gè)參數(shù)
initialValue(不傳時(shí)默認(rèn)用首元素)
1.2 使用場景
- 數(shù)學(xué)計(jì)算(求和/求積)
- 結(jié)構(gòu)轉(zhuǎn)換(數(shù)組→對象、扁平化數(shù)組)
- 數(shù)據(jù)聚合(統(tǒng)計(jì)詞頻)
1.3 示例代碼
// 求數(shù)組元素乘積
const nums = [2, 3, 4];
const product = nums.reduce((acc, num) => acc * num, 1); // 24
// 數(shù)組轉(zhuǎn)對象映射
const users = ['Alice', 'Bob'];
const map = users.reduce((acc, user) => {
acc[user] = true;
return acc;
}, {}); // { Alice: true, Bob: true }
1.4 原理實(shí)現(xiàn)
function myReduce(arr, callback, initialValue) {
let acc = initialValue ?? arr[0];
let start = initialValue === undefined ? 1 : 0;
for (let i = start; i < arr.length; i++) {
acc = callback(acc, arr[i], i, arr);
}
return acc;
}
二、every:數(shù)組的「質(zhì)檢員」
2.1 核心特性
- 核心作用:檢測是否 所有元素 都通過測試
- *回調(diào)參數(shù):(
element,index,array) - 返回值:
true(全部通過) /false(至少一個(gè)失?。?/li> - 短路特性:遇到第一個(gè)失敗項(xiàng)立即停止
2.2 使用場景
- 單全必填驗(yàn)證
- 權(quán)限全檢查
- 數(shù)據(jù)格式統(tǒng)一校驗(yàn)
2.3 示例代碼
// 是否全為偶數(shù)
const nums = [2, 4, 6, 7];
const allEven = nums.every(num => num % 2 === 0); // false
// 是否全為有效用戶
const users = [{age: 18}, {age: 20}];
const allValid = users.every(user => user.age >= 18); // true
2.4 原理實(shí)現(xiàn)
function myEvery(arr, callback) {
for (let i = 0; i < arr.length; i++) {
if (!callback(arr[i], i, arr)) return false;
}
return true;
}
三、some:數(shù)組的「探測器」
3.1 核心特性
- 核心作用:檢測是否 至少有一個(gè)元素 通過測試
- 回調(diào)參數(shù):(
element,index,array) - 返回值:
true(至少一個(gè)通過) /false(全部失?。?/li> - 短路特性:遇到第一個(gè)成功項(xiàng)立即停止
3.2 使用場景
- 搜索是否存在目標(biāo)元素
- 錯(cuò)誤快速檢測
- 功能可用性檢查
3.3 示例代碼
// 是否存在負(fù)數(shù)
const nums = [3, -1, 5];
const hasNegative = nums.some(num => num < 0); // true
// 是否有管理員用戶
const users = [{role: 'user'}, {role: 'admin'}];
const hasAdmin = users.some(user => user.role === 'admin'); // true
3.4 原理實(shí)現(xiàn)
function mySome(arr, callback) {
for (let i = 0; i < arr.length; i++) {
if (callback(arr[i], i, arr)) return true;
}
return false;
}
四、橫向?qū)Ρ缺?/h2>
| 方法 | 返回值 | 短路特性 | 核心思想 | 類比邏輯運(yùn)算符 |
|---|---|---|---|---|
reduce | 任意類型 | 無 | 累積熔煉 | – |
every | 布爾值 | 有 | 全真才為真 | && |
some | 布爾值 | 有 | 一真即為真 | 或 |
五、記憶心法
reduce 聯(lián)想:
- 想象把數(shù)組元素扔進(jìn)熔爐,煉成一坨金屬錠(單一值)
every & some 對比:
every→ 全員大會(huì)(必須所有人同意)some→ 小組提案(只要一人支持即可)- 互斥關(guān)系:
arr.every(cond)===!arr.some(!cond)
六、實(shí)戰(zhàn)訓(xùn)練
1. 用 reduce 實(shí)現(xiàn)數(shù)組去重
const arr = [1, 2, 2, 3]; const unique = arr.reduce((acc, num) => acc.includes(num) ? acc : [...acc, num], [] );
2. 用 every 檢測全大寫字符串
const words = ['HELLO', 'WORLD']; const isAllUpper = words.every(word => word === word.toUpperCase() ); // true
3. 用 some 檢查素?cái)?shù)存在性
const nums = [4, 6, 8, 11];
const hasPrime = nums.some(num => {
for (let i = 2; i <= Math.sqrt(num); i++) {
if (num % i === 0) return false;
}
return num > 1;
}); // true(11是素?cái)?shù))
總結(jié)
理解這三個(gè)方法的關(guān)鍵在于抓住它們的 數(shù)據(jù)流向 和 設(shè)計(jì)目的:
reduce關(guān)注 累積過程,適合數(shù)據(jù)聚合every/some關(guān)注 布爾決策,適合條件驗(yàn)證
下次忘記用法時(shí),只需問自己:
- 我需要把數(shù)組變成另一個(gè)值嗎?→ reduce
- 我要檢查所有元素嗎?→ every
- 我要檢查至少一個(gè)元素嗎?→ some
到此這篇關(guān)于JavaScript數(shù)組方法reduce、every、some的文章就介紹到這了,更多相關(guān)JS數(shù)組方法reduce、every、some內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript運(yùn)行機(jī)制實(shí)例分析
這篇文章主要介紹了JavaScript運(yùn)行機(jī)制,結(jié)合實(shí)例形式分析JavaScript運(yùn)行機(jī)制相關(guān)原理、使用方法及操作注意事項(xiàng),需要的朋友可以參考下2020-04-04
window.onbeforeunload方法在IE下無法正常工作的解決辦法
下面的代碼可以做到不管用戶是點(diǎn)擊了關(guān)閉,或者是在任務(wù)欄關(guān)閉、點(diǎn)擊后退、刷新、按F5鍵,都可以檢測到用戶即將離開的消息。2010-01-01
如何用JavaScript動(dòng)態(tài)呼叫函數(shù)(兩種方式)
下面介紹一下動(dòng)態(tài)呼叫函數(shù)目前應(yīng)該有下面兩種方式,它們之間的使用及對比,感興趣的朋友可以研究下,希望可以幫助到你2013-05-05
Javascript生成全局唯一標(biāo)識(shí)符(GUID,UUID)的方法
本文給大家匯總介紹了5種使用javascript實(shí)現(xiàn)全局唯一標(biāo)識(shí)符(GUID,UUID)的方法,非常的全面,有需要的小伙伴可以來參考下2016-02-02
IE6下JS動(dòng)態(tài)設(shè)置圖片src地址問題
解決IE6下JS動(dòng)態(tài)設(shè)置圖片IMG的SRC時(shí)圖片無法加載錯(cuò)誤的方法2010-01-01
溫習(xí)Javascript基礎(chǔ)語法之詞法結(jié)構(gòu)
javascript是一門簡單的語言,也是一門復(fù)雜的語言。這篇文章主要介紹了溫習(xí)Javascript基礎(chǔ)語法之詞法結(jié)構(gòu)的相關(guān)資料,需要的朋友可以參考下2016-05-05

