前言

這篇文章基于我在公司內部分享會整理而成。歡迎探討補充。

補充一：看來很多人沒看完文章就評論了。我在文章末尾說了，是不寫 for 循環，不是不用 for 循環。簡單陳述不寫 for 循環的理由：for 循環易讀性差，而且鼓勵寫指令式代碼和執行副作用。更多參考這篇文章

補充二：回應大家的一些反對意見。本來準備專門寫文章回應的，但是沒時間，就簡短回復，直接扔鏈接了。

1、for 循環性能最好。回應：微觀層面的代碼性能優化，不是你應該關注的。我在文章中演示了，對百萬級數據的操作，reduce 只比 for 循環慢 8 ms，可忽略不計。如果你要操作更大的數據，要考慮下換語言了。

2、不用 for 循環不能 break。回應：用遞歸。我在這篇文章里有解釋怎樣解決遞歸爆棧。

3、框架都用 for 循環！回應：框架考慮的場景和你不一樣。React 和 Vue 還用 class 來創建對象呢。你該跟著學嗎？事實上你應該用工廠函數。Class vs Factory function: exploring the way forward

一，用好 filter，map，和其它 ES6 新增的高階遍歷函數

問題一：

將數組中的空值去除

const arrContainsEmptyVal = [3, 4, 5, 2, 3, undefined, null, 0, ""];

答案：

const compact = arr => arr.filter(Boolean);

問題二：

將數組中的 VIP 用戶余額加 10

const VIPUsers = [ { username: "Kelly", isVIP: true, balance: 20 }, { username: "Tom", isVIP: false, balance: 19 }, { username: "Stephanie", isVIP: true, balance: 30 }];

答案：

VIPUsers.map( user => (user.isVIP ? { ...user, balance: user.balance + 10 } : user));

問題三：

判斷字符串中是否含有元音字母

const randomStr = "hdjrwqpi";

答案：

const isVowel = char => ["a", "e", "o", "i", "u"].includes(char);const containsVowel = str => [...str].some(isVowel); containsVowel(randomStr);

問題四：

判斷用戶是否全部是成年人

const users = [ { name: "Jim", age: 23 }, { name: "Lily", age: 17 }, { name: "Will", age: 25 }];

答案：

users.every(user => user.age >= 18);

問題五：

找出上面用戶中的未成年人

答案：

const findTeen = users => users.find(user => user.age < 18);findTeen(users);

問題六：

將數組中重復項清除

const dupArr = [1, 2, 3, 3, 3, 3, 6, 7];