紅寶書第八講：箭頭函數(shù)與高階函數(shù)：廚房工具與智能菜譜的對比
資料取自《JavaScript高級程序設(shè)計（第5版）》。
查看所有教程：紅寶書學習大綱
一、箭頭函數(shù)：快捷操作的切片刀
1. 基礎(chǔ)語法特點
箭頭函數(shù)是簡潔版的函數(shù)表達式，特別適合簡單操作，如切菜工具：
-
省略 function 關(guān)鍵字：使用
=>代替 - 單行時省略 return：自動返回結(jié)果
代碼對比：
// 傳統(tǒng)函數(shù)表達式 (切菜刀)
const 切菜刀 = function(菜) { return 菜.slice(); };
// 箭頭函數(shù) (多功能切片器)
const 切片器 = (菜) => 菜.slice();
適用場景：
-
過濾菜譜（配合高階函數(shù)）
const 食材 = ["西蘭花", "胡蘿卜"]; const 切好的 = 食材.map(菜 => 菜 + "片"); // ["西蘭花片", "胡蘿卜片"]
注意限制：
- 沒有自己的
this→ 繼承父級上下文（如按鈕點擊處理需謹慎）
二、高階函數(shù)：智能菜譜加工機
核心定義：接收/返回函數(shù)的函數(shù)，像自動處理食材的機器：
典型例子（資料6所示）[1]：
-
篩選合格食材（filter）：
const 菜品 = [120, 80, 150]; const 高價菜 = 菜品.filter(價格 => 價格 > 100); // [120, 150] -
檢查食材達標（every）：
const 是否全合格 = 菜品.every(價格 => 價格 > 50); // true（全部>50） -
轉(zhuǎn)換處理步驟（map）：
const 漲價后 = 菜品.map(價格 => 價格 * 1.1); // [132, 88, 165]
三、經(jīng)典組合：箭頭+高階函數(shù)
實戰(zhàn)：優(yōu)化訂單處理
const 訂單 = [
{ 菜品: "牛排", 價格: 200 },
{ 菜品: "沙拉", 價格: 40 }
];
// 步驟1：過濾高價菜品（filter）
const 高價菜品 = 訂單.filter(item => item.價格 > 100);
// [{牛排:200}]
// 步驟2：計算總價（reduce）
const 總價 = 訂單.reduce((總和, item) => 總和 + item.價格, 0);
// 240
四、避坑指南
箭頭函數(shù)陷阱：
-
錯誤用法：對象方法中（丟失this）
const 廚房 = { 溫度: 180℃, 預熱: () => console.log(this.溫度) // ? 輸出undefined（this指向全局） }; 廚房.預熱(); // 正確：用傳統(tǒng)函數(shù)[^1] 預熱() { console.log(this.溫度); }
高階函數(shù)注意：
-
回調(diào)函數(shù)參數(shù)順序 → (元素, 索引, 原數(shù)組)
[1,2,3].filter((num, index) => index % 2 === 0); // [1,3]（保留偶數(shù)索引項）
常用高階函數(shù)詳解：幫你處理數(shù)據(jù)的智能工具
1. filter()：智能篩選器
作用：從數(shù)組中過濾出符合條件的元素，像過濾雜質(zhì)一樣
參數(shù)解釋：每個元素傳給回調(diào)函數(shù)，返回 true 則保留
代碼示例（資料3）[2]：
const 數(shù)字組 = [1, 2, 3, 4, 5];
const 大于二 = 數(shù)字組.filter((當前數(shù)字) => 當前數(shù)字 > 2);
console.log(大于二); // [3, 4, 5]
比喻：像挑出水果籃中成熟的蘋果
const 蘋果 = ["青蘋果", "爛蘋果", "紅蘋果"];
const 好蘋果 = 蘋果.filter(蘋果 => 蘋果.includes("紅")); // ["紅蘋果"]
2. map()：流水線加工器
作用：將數(shù)組中每個元素轉(zhuǎn)換處理后生成新數(shù)組，像工廠加工
參數(shù)解釋：回調(diào)函數(shù)返回新值，組成新數(shù)組
代碼示例（資料3）[2]：
const 原數(shù)組 = [1, 2, 3];
const 加倍數(shù)組 = 原數(shù)組.map(數(shù)字 => 數(shù)字 * 2);
console.log(加倍數(shù)組); // [2, 4, 6]
比喻：將蔬菜切成片
const 蔬菜 = ["黃瓜", "胡蘿卜"];
const 切好的 = 蔬菜.map(菜 => 菜 + "片"); // ["黃瓜片", "胡蘿卜片"]
3. every()：全員安檢員
作用：檢查數(shù)組中所有元素是否都滿足條件，否則返回 false
參數(shù)解釋：全部返回 true 則整體為 true
代碼示例（資料3）[2]：
const 成績單 = [85, 90, 78];
const 全及格嗎 = 成績單.every(分數(shù) => 分數(shù) >= 60);
console.log(全及格嗎); // true（都≥60分）
比喻：檢查班級所有學生是否都交作業(yè)
const 作業(yè)狀態(tài) = [true, true, false];
console.log(作業(yè)狀態(tài).every(已交 => 已交)); // false（有人未交）
4. some()：火眼偵察兵
作用：檢查數(shù)組中是否至少有一個元素滿足條件，遇到 true 就停止
參數(shù)解釋：只要有一個返回 true，整體即為 true
代碼示例（資料3）[2]：
const 溫度記錄 = [22, 25, 18];
const 是否有高溫 = 溫度記錄.some(溫度 => 溫度 > 29);
console.log(是否有高溫); // false（沒超過29度）
比喻：檢查衣柜里是否有夏季衣服
const 衣服 = ["毛衣", "牛仔褲", "短袖"];
console.log(衣服.some(衣服 => 衣服 === "短袖")); // true
綜合實戰(zhàn)：訂單處理
const 訂單列表 = [
{ 商品: "手機", 價格: 2999 },
{ 商品: "耳機", 價格: 199 },
{ 商品: "充電寶", 價格: 150 }
];
// Step1：篩選高價商品（filter）
const 高價商品 = 訂單列表.filter(訂單 => 訂單.價格 > 1000);
// [{ 手機: 2999 }]
// Step2：提取商品名稱（map）
const 名稱列表 = 訂單列表.map(訂單 => 訂單.商品);
// ["手機", "耳機", "充電寶"]
// Step3：是否所有商品價格≥100（every）
const 全低價嗎 = 訂單列表.every(訂單 => 訂單.價格 < 100);
// false
// Step4：是否有商品價格超過2000（some）
const 有奢侈品嗎 = 訂單列表.some(訂單 => 訂單.價格 > 2000);
// true
注意事項：
-
回調(diào)函數(shù)參數(shù)順序：
(當前元素, 索引, 原數(shù)組)[10, 20, 30].map((元素, 索引) => 元素 + 索引); // 返回 [10+0, 20+1, 30+2] → [10, 21, 32] - 不會修改原數(shù)組：返回新數(shù)組，原數(shù)據(jù)保持不變[2]
練習：用
filter選出訂單中價格在100-200元之間的商品。const 適中商品 = 訂單列表.filter(訂單 => 訂單.價格 >= 100 && 訂單.價格 <= 200);
reduce函數(shù)詳解：數(shù)據(jù)匯總計算器
reduce的作用
reduce() 是數(shù)組處理中最靈活的高階函數(shù)，可將數(shù)組元素累積計算成一個最終值。比如累加訂單總價、連接字符串等。
核心概念：
- 遍歷數(shù)組：逐個處理元素
- 累積結(jié)果：每一步的返回值作為下一次的初始值
基礎(chǔ)語法
數(shù)組.reduce((累積器, 當前元素) => {
return 新累積值;
}, 初始值);
具體示例
1. 計算數(shù)組總和（初始累積器為0）
const 價格 = [100, 200, 300];
const 總價 = 價格.reduce((總和, 當前價格) => 總和 + 當前價格, 0);
// 總價 → 600
運算步驟：
- 初始值：0
- 第一次：0 + 100 → 100
- 第二次：100 + 200 → 300
- 第三次：300 + 300 → 600
2. 展平二維數(shù)組
const 二維數(shù)組 = [[1, 2], [3, 4], [5]];
const 展平后 = 二維數(shù)組.reduce((結(jié)果, 子數(shù)組) => 結(jié)果.concat(子數(shù)組), []);
// 展平后 → [1, 2, 3, 4, 5]
3. 統(tǒng)計詞頻
const 詞語 = ["蘋果", "香蕉", "蘋果"];
const 統(tǒng)計 = 詞語.reduce((詞表, 詞) => {
詞表[詞] = (詞表[詞] || 0) + 1;
return 詞表;
}, {});
// 統(tǒng)計 → {蘋果:2, 香蕉:1}
注意事項
必須提供初始值的情況：
- 數(shù)組為空時避免報錯
- 累積類型不同時（如對象、數(shù)組）
示例：不提供初始值的陷阱
[1, 2, 3].reduce((sum, num) => sum + num);
// sum第一次是1，結(jié)果為6（可能預期不符時需顯式初始）
綜合實戰(zhàn)：DOM內(nèi)容合并（模擬參考中的文檔碎片操作）
若需合并多個節(jié)點的文本：
const 節(jié)點列表 = document.querySelectorAll(".text-node");
const 合并文本 = Array.from(節(jié)點列表).reduce(
(文本, 節(jié)點) => 文本 + 節(jié)點.textContent,
""
);
總結(jié)
reduce如同數(shù)學中的Σ符號，將每一步計算累積成結(jié)果。靈活用于求和、統(tǒng)計、轉(zhuǎn)換等場景。
總結(jié)與練習
-
箭頭函數(shù)：短小精悍，但小心
this陷阱。 - 高階函數(shù)：靈活處理數(shù)組，如工廠流水線。
練習：用
map將所有菜品名稱轉(zhuǎn)為大寫。const 大寫菜單 = 訂單.map(item => item.菜品.toUpperCase());
目錄：總目錄
上篇文章：紅寶書第七講：this綁定與強制類型轉(zhuǎn)換詳解（小白指南）
-
高階函數(shù)filter、map的具體用法示例，《JavaScript高級程序設(shè)計（第5版）》 第6章 ?
-
高階函數(shù) filter、map、every、some 的具體用法示例，詳見《JavaScript高級程序設(shè)計（第5版）》 中的 Array 相關(guān)章節(jié) ? ? ? ? ?
