一次性讓大家搞懂JavaScript數(shù)組方法reduce、every、some
更新時間：2025年07月05日 09:31:36 作者：漠月瑾
在JavaScript的數(shù)組工具庫中,every()和some()是處理邏輯判斷的黃金組合,下面這篇文章主要介紹了JavaScript數(shù)組方法reduce、every、some的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
前言
在 JavaScript 開發(fā)中，reduce、every 和 some 是三個高頻使用的數(shù)組高階方法，但它們的用途和區(qū)別常常令人混淆。本文將用 原理剖析 + 場景對比 + 手寫實現(xiàn) 幫你徹底理解它們，從此告別死記硬背！
一、reduce：數(shù)組的「熔爐」
1.1 核心特性
- 核心作用：將數(shù)組元素「熔煉」成一個值（任意類型）
- 回調(diào)參數(shù)：
(accumulator, current, index, array) - 返回值：最終的累積結果（
accumulator） - 初始值：可選的第二個參數(shù)
initialValue（不傳時默認用首元素）
1.2 使用場景
- 數(shù)學計算（求和/求積）
- 結構轉(zhuǎn)換（數(shù)組→對象、扁平化數(shù)組）
- 數(shù)據(jù)聚合（統(tǒng)計詞頻）
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 原理實現(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（至少一個失?。?/li> - 短路特性：遇到第一個失敗項立即停止
2.2 使用場景
- 單全必填驗證
- 權限全檢查
- 數(shù)據(jù)格式統(tǒng)一校驗
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 原理實現(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 核心特性
- 核心作用：檢測是否 至少有一個元素 通過測試
- 回調(diào)參數(shù)：(
element,index,array) - 返回值：
true（至少一個通過） /false（全部失?。?/li> - 短路特性：遇到第一個成功項立即停止
3.2 使用場景
- 搜索是否存在目標元素
- 錯誤快速檢測
- 功能可用性檢查
3.3 示例代碼
// 是否存在負數(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 原理實現(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>
| 方法 | 返回值 | 短路特性 | 核心思想 | 類比邏輯運算符 |
|---|---|---|---|---|
reduce | 任意類型 | 無 | 累積熔煉 | – |
every | 布爾值 | 有 | 全真才為真 | && |
some | 布爾值 | 有 | 一真即為真 | 或 |
五、記憶心法
reduce 聯(lián)想：
- 想象把數(shù)組元素扔進熔爐，煉成一坨金屬錠（單一值）
every & some 對比：
every→ 全員大會（必須所有人同意）some→ 小組提案（只要一人支持即可）- 互斥關系：
arr.every(cond)===!arr.some(!cond)
六、實戰(zhàn)訓練
1. 用 reduce 實現(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 檢查素數(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是素數(shù)）
總結
理解這三個方法的關鍵在于抓住它們的 數(shù)據(jù)流向 和 設計目的：
reduce關注 累積過程，適合數(shù)據(jù)聚合every/some關注 布爾決策，適合條件驗證
下次忘記用法時，只需問自己：
- 我需要把數(shù)組變成另一個值嗎？→ reduce
- 我要檢查所有元素嗎？→ every
- 我要檢查至少一個元素嗎？→ some
到此這篇關于JavaScript數(shù)組方法reduce、every、some的文章就介紹到這了,更多相關JS數(shù)組方法reduce、every、some內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
用iframe做系統(tǒng)框架，相信很多朋友都有這樣的經(jīng)歷吧，接下來將為你詳細介紹下JS中Iframe之間傳值應用，感興趣的你可以參考下哈，希望可以幫助到你2013-03-03
JavaScript中利用Array filter() 方法壓縮稀疏數(shù)組
Array filter() 方法會跳過稀疏數(shù)組中缺少的元素，它的返回數(shù)組總是稠密的。這篇文章給大家介紹了JavaScript中利用Array filter() 方法壓縮稀疏數(shù)組的相關知識，需要的朋友參考下2018-02-02
這篇文章主要為大家介紹了iframe一次下載多個文件實現(xiàn)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
Bootstrap 中的導航組件都依賴同一個 .nav 類和ul，狀態(tài)類也是共用的。改變修飾類可以改變樣式。接下來通過本文給大家介紹bootstrap 導航組件使用方法，一起看看吧2017-01-01
這篇文章主要介紹了js簡單實現(xiàn)點擊左右運動的方法,實例分析了javascript實現(xiàn)左右運動的相關要點與技巧,非常具有實用價值,需要的朋友可以參考下2015-04-04
這篇文章主要介紹了ES6中的箭頭函數(shù),結合實例形式詳細分析了ES6中箭頭函數(shù)的基本語法、特性、使用方法與相關注意事項,需要的朋友可以參考下2017-04-04
這篇文章主要介紹了JavaScript文本特效,結合3個實例分析了javascript基于定時器的文字動態(tài)操作特效相關實現(xiàn)技巧,需要的朋友可以參考下2018-12-12
下面小編就為大家?guī)硪黄獪\談JS正則表達式的RegExp對象和括號的使用。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
javascript實現(xiàn)點擊按鈕讓DIV層彈性移動的方法
這篇文章主要介紹了javascript實現(xiàn)點擊按鈕讓DIV層彈性移動的方法,實例分析了javascript操作div層的操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
這篇文章主要介紹了小程序設置緩存并且不覆蓋原有數(shù)據(jù)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04