補充一:看來不少人沒看完文章就評論了。我在文章末尾說了,是不寫 for 循環,不是不用 for 循環。簡單陳述不寫 for 循環的理由:for 循環易讀性差,並且鼓勵寫指令式代碼和執行反作用。更多參考這篇文章javascript
補充二:迴應你們的一些反對意見。原本準備專門寫文章回應的,可是沒時間,就簡短回覆,直接扔連接了。java
-
for 循環性能最好。迴應:微觀層面的代碼性能優化,不是你應該關注的。我在文章中演示了,對百萬級數據的操做,reduce 只比 for 循環慢 8 ms,可忽略不計。若是你要操做更大的數據,要考慮下換語言了。git
-
不用 for 循環不能 break。迴應:我把文章第三部分標題改了一下,專用來解決用遞歸提早 break。擔憂遞歸爆棧?我在這篇文章裏有解釋怎樣解決遞歸爆棧。github
-
框架都用 for 循環!迴應:框架考慮的場景和你不同。React 和 Vue 還用 class 來建立對象呢。你該跟着學嗎?事實上你應該用工廠函數。Class vs Factory function: exploring the way forward編程
補充三:文中的代碼都是我邊講邊寫的,都是現場運行演示過的,因此不會存在錯誤。若是你運行出問題,有兩個緣由:1. 你粘錯代碼了。2. 你的運行環境不支持 ES6/7。 還有,我採用了函數式編程實踐,全部操做都是根據舊值返回符合條件的新值。若是你嘗試打印原數據,確定是沒效果的。若是你習慣了每次運算都改變原數據,那你應該改變習慣了,那樣寫是寫不出好代碼的。數組
補充四:(最後一次了,否則太長了……)我不是提倡在語言層面上消滅 for 循環,我還沒到那個級別。個人側重點在於,函數式編程的訓練,會讓你在過程抽象上更熟練。有可能你寫了不少 for 循環都沒有發現一個高階的過程抽象 pattern,可是若是你有函數式訓練的話,你能夠把這個過程抽象成一個函數,這樣就不用反覆寫了。遞歸和 reduce 寫法可能確實理解門檻過高,可是大多數狀況下,只用寫一次。最後,我建議你們看《你不知道的 JS》系列書。個人大部分編程技巧,都是跟做者學的。性能優化
一,用好 filter,map,和其它 ES6 新增的高階遍歷函數
問題一: 將數組中的 falsy 值去除框架
const arrContainsEmptyVal = [3, 4, 5, 2, 3, undefined, null, 0, ""]; 複製代碼
答案:dom
const compact = arr => arr.filter(Boolean); 複製代碼
問題二: 將數組中的 VIP 用戶餘額加 10async
const users = [ { username: "Kelly", isVIP: true, balance: 20 }, { username: "Tom", isVIP: false, balance: 19 }, { username: "Stephanie", isVIP: true, balance: 30 } ]; 複製代碼
答案:
users.map(
user => (user.isVIP ? { ...user, balance: user.balance + 10 } : user) ); 複製代碼
補充:有人說很明顯這裏該用 forEach
,你爲了舉例而舉例!我比較無語。forEach
是用來執行反作用的好嗎?你把原數據都改了。個人習慣是使用 Immutable 數據。你要改數據的話,開心就好。
問題三: 判斷字符串中是否含有元音字母
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]; 複製代碼
答案:
const uniq = arr => [...new Set(arr)]; uniq(dupArr); 複製代碼
問題七: 生成由隨機整數組成的數組,數組長度和元素大小可自定義
答案:
const genNumArr = (length, limit) => Array.from({ length }, _ => Math.floor(Math.random() * limit)); genNumArr(10, 100); 複製代碼
二,理解和熟練使用 reduce
問題八: 不借助原生高階函數,定義 reduce
答案:
const reduce = (f, acc, arr) => { if (arr.length === 0) return acc; const [head, ...tail] = arr; return reduce(f, f(head, acc), tail); }; 複製代碼
問題九: 將多層數組轉換成一層數組
const nestedArr = [1, 2, [3, 4, [5, 6]]]; 複製代碼
答案:
const flatten = arr => arr.reduce( (flat, next) => flat.concat(Array.isArray(next) ? flatten(next) : next), [] ); 複製代碼
問題十: 將下面數組轉成對象,key/value 對應裏層數組的兩個值
const objLikeArr = [["name", "Jim"], ["age", 18], ["single", true]]; 複製代碼
答案:
const fromPairs = pairs => pairs.reduce((res, pair) => ((res[pair[0]] = pair[1]), res), {}); fromPairs(objLikeArr); 複製代碼
問題十一: 取出對象中的深層屬性
const deepAttr = { a: { b: { c: 15 } } }; 複製代碼
答案:
const pluckDeep = path => obj => path.split(".").reduce((val, attr) => val[attr], obj); pluckDeep("a.b.c")(deepAttr); 複製代碼
問題十二: 將用戶中的男性和女性分別放到不一樣的數組裏:
const users = [ { name: "Adam", age: 30, sex: "male" }, { name: "Helen", age: 27, sex: "female" }, { name: "Amy", age: 25, sex: "female" }, { name: "Anthony", age: 23, sex: "male" }, ]; 複製代碼
答案:
const partition = (arr, isValid) => arr.reduce( ([pass, fail], elem) => isValid(elem) ? [[...pass, elem], fail] : [pass, [...fail, elem]], [[], []], ); const isMale = person => person.sex === "male"; const [maleUser, femaleUser] = partition(users, isMale); 複製代碼
問題十三: reduce 的計算過程,在範疇論裏面叫 catamorphism,即一種鏈接的變形。和它相反的變形叫 anamorphism。如今咱們定義一個和 reduce 計算過程相反的函數 unfold(注:reduce 在 Haskell 裏面叫 fold,對應 unfold)
const unfold = (f, seed) => { const go = (f, seed, acc) => { const res = f(seed); return res ? go(f, res[1], acc.concat(res[0])) : acc; }; return go(f, seed, []); }; 複製代碼
根據這個 unfold 函數,定義一個 Python 裏面的 range 函數。
答案:
const range = (min, max, step = 1) => unfold(x => x < max && [x, x + step], min); 複製代碼
三,用遞歸代替循環(能夠break!)
問題十四: 將兩個數組每一個元素一一對應相加。注意,第二個數組比第一個多出兩個,不要把第二個數組遍歷完。
const num1 = [3, 4, 5, 6, 7]; const num2 = [43, 23, 5, 67, 87, 3, 6]; 複製代碼
答案:
const zipWith = f => xs => ys => { if (xs.length === 0 || ys.length === 0) return []; const [xHead, ...xTail] = xs; const [yHead, ...yTail] = ys; return [f(xHead)(yHead), ...zipWith(f)(xTail)(yTail)]; }; const add = x => y => x + y; zipWith(add)(num1)(num2); 複製代碼
問題十五: 將 Stark 家族成員提取出來。注意,目標數據在數組前面,使用 filter 方法遍歷整個數組是浪費。
const houses = [ "Eddard Stark", "Catelyn Stark", "Rickard Stark", "Brandon Stark", "Rob Stark", "Sansa Stark", "Arya Stark", "Bran Stark", "Rickon Stark", "Lyanna Stark", "Tywin Lannister", "Cersei Lannister", "Jaime Lannister", "Tyrion Lannister", "Joffrey Baratheon" ]; 複製代碼
答案:
const takeWhile = f => ([head, ...tail]) => f(head) ? [head, ...takeWhile(f)(tail)] : []; const isStark = name => name.toLowerCase().includes("stark"); takeWhile(isStark)(houses); 複製代碼
問題十六: 找出數組中的奇數,而後取出前4個:
const numList = [1, 3, 11, 4, 2, 5, 6, 7]; 複製代碼
答案:
const takeFirst = (limit, f, arr) => { if (limit === 0 || arr.length === 0) return []; const [head, ...tail] = arr; return f(head) ? [head, ...takeFirst(limit - 1, f, tail)] : takeFirst(limit, f, tail); }; const isOdd = n => n % 2 === 1; takeFirst(4, isOdd, numList); 複製代碼
四,使用高階函數遍歷數組時可能遇到的陷阱
問題十七: 從長度爲 100 萬的隨機整數組成的數組中取出偶數,再把全部數字乘以 3
// 用咱們剛剛定義的輔助函數來生成符合要求的數組 const bigArr = genNumArr(1e6, 100); 複製代碼
能運行的答案:
const isEven = num => num % 2 === 0; const triple = num => num * 3; bigArr.filter(isEven).map(triple); 複製代碼
注意,上面的解決方案將數組遍歷了兩次,無疑是浪費。若是寫 for 循環,只用遍歷一次:
const results = []; for (let i = 0; i < bigArr.length; i++) { if (isEven(bigArr[i])) { results.push(triple(bigArr[i])); } } 複製代碼
在個人電腦上測試,先 filter 再 map 的方法耗時 105.024 ms,而採用 for 循環的方法耗時僅 25.598 ms!那是否說明遇到此類狀況必須用 for 循環解決呢? No!
五,死磕到底,Transduce!
咱們先用 reduce 來定義 filter 和 map,至於爲何這樣作等下再解釋。
const filter = (f, arr) => arr.reduce((acc, val) => (f(val) && acc.push(val), acc), []); const map = (f, arr) => arr.reduce((acc, val) => (acc.push(f(val)), acc), []); 複製代碼
從新定義的 filter 和 map 有共有的邏輯。咱們把這部分共有的邏輯叫作 reducer。有了共有的邏輯後,咱們能夠進一步地抽象,把 reducer 抽離出來,而後傳入 filter 和 map:
const filter = f => reducer => (acc, value) => { if (f(value)) return reducer(acc, value); return acc; }; const map = f => reducer => (acc, value) => reducer(acc, f(value)); 複製代碼
如今 filter 和 map 的函數 signature 同樣,咱們就能夠進行函數組合(function composition)了。
const pushReducer = (acc, value) => (acc.push(value), acc); bigNum.reduce(map(triple)(filter(isEven)(pushReducer)), []); 複製代碼
可是這樣嵌套寫法易讀性太差,很容易出錯。咱們能夠寫一個工具函數來輔助函數組合:
const pipe = (...fns) => (...args) => fns.reduce((fx, fy) => fy(fx), ...args); 複製代碼
而後咱們就能夠優雅地組合函數了:
bigNum.reduce(
pipe(
filter(isEven),
map(triple)
)(pushReducer),
[]
);
複製代碼
通過測試(用 console.time()/console.timeEnd()
),上面的寫法耗時 33.898 ms,僅比 for 循環慢 8 ms。爲了代碼的易維護性和易讀性,這點性能上的微小犧牲,我認爲是能夠接受的。
這種寫法叫 transduce。有不少工具庫提供了 transducer 函數。好比 transducers-js。除了用 transducer 來遍歷數組,還能用它來遍歷對象和其它數據集。功能至關強大。
六,for 循環和 for ... of 循環的區別
for ... of 循環是在 ES6 引入 Iterator 後,爲了遍歷 Iterable 數據類型才產生的。EcmaScript 的 Iterable 數據類型有數組,字符串,Set 和 Map。for ... of 循環屬於重型的操做(具體細節我也沒了解過),若是用 AirBNB 的 ESLint 規則,在代碼中使用 for ... of 來遍歷數組是會被禁止的。
那麼,for ... of 循環應該在哪些場景使用呢?目前我發現的合理使用場景是遍歷自定義的 Iterable。來看這個題目:
問題十八: 將 Stark 家族成員名字遍歷,每次遍歷暫停一秒,而後將當前遍歷的名字打印來,遍歷完後回到第一個元素再從新開始,無限循環。
const starks = [ "Eddard Stark", "Catelyn Stark", "Rickard Stark", "Brandon Stark", "Rob Stark", "Sansa Stark", "Arya Stark", "Bran Stark", "Rickon Stark", "Lyanna Stark" ]; 複製代碼
答案:
function* repeatedArr(arr) { let i = 0; while (true) { yield arr[i++ % arr.length]; } } const infiniteNameList = repeatedArr(starks); const wait = ms => new Promise(resolve => { setTimeout(() => { resolve(); }, ms); }); (async () => { for (const name of infiniteNameList) { await wait(1000); console.log(name); } })(); 複製代碼
七,放棄倔強,實在須要用 for 循環了
前面講到的問題基本覆蓋了大部分須要使用 for 循環的場景。那是否咱們能夠保證永遠不用 for 循環呢?其實不是。我講了這麼多,實際上是在鼓勵你們不要寫 for 循環,而不是不用 for 循環。咱們經常使用的數組原型鏈上的 map,filter 等高階函數,底層實際上是用 for 循環實現的。在須要寫一些底層代碼的時候,仍是須要寫 for 循環的。來看這個例子:
Number.prototype[Symbol.iterator] = function*() { for (let i = 0; i <= this; i++) { yield i; } }; [...6]; // [0, 1, 2, 3, 4, 5, 6] 複製代碼
注意,這個例子只是爲了好玩。生產環境中不要直接修改 JS 內置數據類型的原型鏈。緣由是 V8 引擎有一個原型鏈快速推測機制,修改原型鏈會破壞這個機制,形成性能問題。