[TOC ] >[success] # 了解函數式編程需要知道的 ~~~ 1.函數是一等公民 2.高階函數 3.閉包 ~~~ >[info] ## 函數是一等公民在js中 [mdn講解](https://developer.mozilla.org/zh-CN/docs/Glossary/First-class_Function) ~~~ 1.'函數可以存儲在變量中':即使你的函數有自己的函數名稱，你仍然可以用這個變量名去調用它。 給函數命名只會方便你調試，但不會影響我們調用它。 2.'函數作為參數':我們把一個函數作為參數傳遞給另外一個函數，那么我們就稱這個函數為回調函數 3.'函數作為返回值':一個返回另外一個函數的函數被稱為高階函數 4.在 JavaScript 中函數就是一個普通的對象 (可以通過 new Function() )，我們可以把函數存儲到變量 數組中，它還可以作為另一個函數的參數和返回值，甚至我們可以在程序運行的時候通過 new Function('alert(1)') 來構造一個新的函數 ~~~ >[danger] ##### 把函數賦值給變量 ~~~ // 把函數賦值給變量 let fn = function () { console.log('Hello First-class Function') } fn() ~~~ * 案例二 ~~~ 1.一個函數包裹另一個函數，并且形式也相同的時候，可以認為是一樣的函數 2.下面為例BlogController.index(post) 和 Views.show(post)。調用后傳參的形式都是一樣， 這里可以認為兩個是一個函數，利用可以把函數賦值的這一個特性，可以吧View.index 賦值 給'BlogController'對象的index 上，注意賦值的是'View.index' 不是它的調用 ~~~ ~~~ const BlogController = { index (posts) { return Views.index(posts) }, show (post) { return Views.show(post) }, create (attrs) { return Db.create(attrs) }, update (post, attrs) { return Db.update(post, attrs) }, destroy (post) { return Db.destroy(post) } } // 優化 const BlogController = { index: Views.index, show: Views.show, create: Db.create, update: Db.update, destroy: Db.destroy } ~~~ >[danger] ##### 高階函數 ~~~ 1.高階函數就是利用js 函數是一等公民的中的兩點 1.1.可以把函數作為參數傳遞給另一個函數 1.2.可以把函數作為另一個函數的返回結果 2.高階函數的意義 2.1.抽象可以幫我們屏蔽細節，只需要關注我們的目標 2.2.高階函數是用來抽象通用的問題 ~~~ * 函數作為參數的例子 * 第一印象寫法 ~~~ // 實現一個類似fittler 功能 // 最初的代碼思路 function fittler1(array,rules){ const result = [] for(let item of array){ if(rules){ result.push(item) } } result } // 使用過濾出所有 大于5的數 上面封裝的代碼根本不能用 // 要不就是在if邏輯哪里寫死后續不能擴展 ~~~ * 正確做法 ~~~ 1.以filter 方法為例，要做的是過濾數組一件事，將這個事抽象出一個通用的解決問題的函數，在使用的 時候我們就不在關心封裝的內部，只要關心調用這個方法即可，并且通過調用的名字一目了然知道做什么 用 ~~~ ~~~ 作為返回值 // forEach function forEach (array, fn) { for (let i = 0; i < array.length; i++) { fn(array[i]) } } // filter function filter (array, fn) { let results = [] for (let i = 0; i < array.length; i++) { if (fn(array[i])) { results.push(array[i]) } } return results } // 使用 filter([5,1,8,2],(item)=>item>5) ~~~ * 函數作為返回值 ~~~ 1.有個函數只執行一次，場景用戶秒殺只能秒殺一次，多次執行也只能執行一次 ~~~ * 這種需求我的第一印象做法 ~~~ 1.下面的代碼針對性質太強，可服用性質也不好 ~~~ ~~~ // 這種需求我的第一印象 的寫法 let flag = false // 做一個開關 function once1() { if (!flag) { flag = true // .... 各種處理的邏輯寫死 console.log('1') } } // 調用 once1() once1() // 不會打印 1的 ~~~ * 另一種思路 推薦 ~~~ 1.這里套用高階函數的意義來分析，將只調用一次的個處理抽象出來一個通用問，在使用的時候 不關心內部，只關心調用的once使用不關心內部實現 ~~~ ~~~ // once 只執行一次，場景用戶秒殺只能秒殺一次，多次執行也只能執行一次 function once(fn) { let done = false return function () { if (!done) { done = true // 要考慮回調的函數如果有返回值怎么辦 return fn.apply(this, arguments) } } } let callback = once(() => { console.log(12) }) callback() // 執行了一次 callback() ~~~ >[info] ## js 中常見的高階函數 ~~~ forEach map filter every some find/findIndex reduce sort …… ~~~ >[danger] ##### 實現一個和數組map同功能的方法 ~~~ // map 方法會給原數組中的每個元素都按順序調用一次 // callback 函數。callback 每次執行后的返回值（包括 undefined）組合起來形成一個新數組 const list = [1, 5, 6, 7, 8] let newList = list.map(item => item * 2) console.log(newList) // [ 2, 10, 12, 14, 16 ] function map(array, fn) { // 返回的是新數組 const newArray = [] for (let item of array) { // 每一個項進入回調后的返回值，回調的參數是每一項 newArray.push(fn(item)) } return newArray } newList = map(list, (item) => item * 2) console.log(newList) // [ 2, 10, 12, 14, 16 ] ~~~ >[danger] ##### 實現一個和數組same同功能的方法 ~~~ // 方法測試數組中是不是至少有1個元素通過了被提供的函數測試。 // 它返回的是一個Boolean類型的值。 const list = [1, 5, 6, 7, 8] let flag = list.some(item => item === 1) console.log(flag) // true function some(array, fn) { let flag = false for (let item of array) { flag = fn(item) if (flag) { break } } return flag } flag = some(list, (item) => item === 1) console.log(flag) // true ~~~ >[danger] ##### 實現一個和數組every同功能的方法 ~~~ // 方法測試數組中每個元素通過了被提供的函數測試。 // 它返回的是一個Boolean類型的值。 const list = [1, 5, 6, 7, 8] let flag = list.every(item => item === 1) console.log(flag) // false function every(array, fn) { let flag = false for (let item of array) { flag = fn(item) if (!flag) { break } } return flag } flag = every(list, (item) => item === 1) console.log(flag) // false ~~~