>[success] # 函數柯里化
1. **柯里化**也是屬于**函數式編**程里面一個**概念**
2. **js 設計模式與開發實踐書中的解釋**:currying又稱部分求值。一個currying的函數首先會接受一些參數,接受了這些參數之后,該函數并不會立即求值,而是繼續返回另外一個函數, 剛才傳入的參數在函數形成的閉包中被保存起來。待到函數被真正需要求值的時候, 之前傳入的所有參數都會被一次性用于求值。
3. **js高級程序語言設計**與函數綁定緊密相關的主題是函數柯里化,它用于創建已經設置好了一個或多個參數的函數。 函數柯里化的基本方法和函數綁定是一樣的:使用一個閉包返回一個函數。兩者的區別在于,當函數被調用時,返回的函數還需要設置一些傳入的參數
* 總結:當一個函數有多個參數的時候先傳遞一部分參數調用它(**這部分參數以后永遠不變**),然后返回一個新的函數接收剩余的參數,返回結果
**柯理化函數思想**:預先存儲(預處理),利用閉包的“保存機制”,我們把一些值事先存儲起來,供其下級上下文中后期用
* **舉個例子**柯里化是一種函數的轉換,將一個函數從可調用的**f(a, b, c)** 轉換為可調用的 **f(a)(b)(c)**,柯里化不會調用函數。它只是對函數進行轉換。
~~~
// 基于console.log或者alert輸出一個函數,會默認先把函數轉化為字符串「Symbol.toPrimitive -> valueOf -> toString」
const curring = function curring() {
let params = []; // 利用閉包
const add = (...args) => {
params = params.concat(args); // 將每一次調用參數都存儲在閉包外部作用域函數的參數中
return add;
};
add[Symbol.toPrimitive] = () => params.reduce((result, item) => result + item);
return add;
};
let add = curring();
let res = add(1)(2)(3);
console.log(res); //->6
add = curring();
res = add(1, 2, 3)(4);
console.log(res); //->10
add = curring();
res = add(1)(2)(3)(4)(5);
console.log(res); //->15
~~~
>[info] ## 柯里化優勢
1. **函數的職責單一**,實際編程中望一個函數處理的問題盡可能的單一,而不是將一大堆的處理過程交給一個函數來處理
2. **函數的參數服用**,某些情況下可以復用參數邏輯
>[danger] ##### 參數復用案例
~~~
function checkAag(age) {
let min = 18
return age >= min
}
// 上面定義的min 參數讓整個函數變得局限只能針對18來做來做判斷
// 現在思路升級定義兩個參數,讓整個方法更加靈活
function checkAag(min, age) {
return age >= min
}
// 都是18的基準值被反復傳參
checkAge(18, 24)
checkAge(18, 20)
checkAge(20, 30)
// ---------------------------柯里化解決---------------------------
// 柯里化是閉包的應用場景之一,他利用了閉包延長作用域的這個特性
// 將 把接受多個參數的函數變換成接受一個單一參數的函數,并且返回接受余下的參數且返回結果的新函數
// 以上面的案例來分析 我們會先傳min 這參數,他會返回一個新的函數,這個新的函數會接受age參數返回我們想要的結果
const {
log
} = console
function checkAge(min) {
return function (age) {
return age >= min
}
}
// 解決了剛才同一個基準值反復 傳參的問題
let checkAge18 = checkAge(18)
let checkAge20 = checkAge(20)
log(checkAge20(19)) // false
log(checkAge18(16)) // false
// ES6 寫法
let checkAge = min => (age => age >= min)
~~~
>[info] ## 柯里化推到
>[danger] ##### 拓展思維逐步柯里化(一)
~~~
// 計算每天花銷的錢(最傳統的寫法)
let monthlyCost = 0
var cost = function (money) {
monthlyCost += money
}
cost(100)
cost(200) // 300
console.log(monthlyCost)
~~~
~~~
1.現在雖然用了閉包,比剛才的效果更好,并且已經形成了一個函數式的編程,準確的說已經形成一個
純函數,因為此時已經不存在副作用
2.按照柯里化的概念來說,我們可以控制真正想要結果的時機,但是現在明顯不可以,每次執行都會
得到一個結果,當前需求實際只想要七天的總和而不是中間步驟每一次結果
~~~
~~~
// 利用閉包 把 monthlyCost 作用域限制在函數內
var cost = (function () {
let monthlyCost = 0
return function () {
monthlyCost += [].shift.apply(arguments)
return monthlyCost
}
})()
cost(100)
console.log(cost(200)) // 300
~~~
>[danger] ##### 拓展思維逐步柯里化(二)
~~~
1.上面兩個雖然都滿足就算每個禮拜的價格花銷,要做的只是不停的調用
七次,如果讓計算平均值,計算一個月呢?
2.在看一下函數柯里化的概念,先傳遞一部分參數,但是不會返回結果而是一個函數,
當想要的剩余參數全部都接受完了,此時才會返回想要的結果,下面案例是有點特殊,是
不傳參數時候才會返回結果,形成的整理思路還是一樣,只有想要執行結果的時候才會觸發
~~~
* 做到第一步我們只關心結果不關心過程值
~~~
var cost = (function () {
let args = []
return function () {
if(arguments.length === 0){
return args.reduce((accumulator, currentValue) => accumulator+currentValue)
}else{
[].push.apply(args,arguments)
}
}
})()
cost(100)
console.log(cost(200))
console.log(cost()) // 300
~~~
>[danger] ##### 最終柯里化寫法
~~~
1.這種最終寫法完成符合柯里化函數的定義
~~~
~~~
var currying = function (fn) {
let args = []
return function () {
if(arguments.length === 0){
return fn.apply(this,args) // 你想給一個方法傳入多個參數用apply 小技巧當然es6用展開操運算'...'
}else{
// 如果不是想執行計算的時候就返回代碼本身
[].push.apply(args,arguments)
return arguments.callee
}
}
}
// 通過計算總和的函數,如果不需要總和就寫對應條件的函數即可
var cost = function () {
return [].reduce.call(arguments,(accumulator, currentValue) => accumulator+currentValue)
}
var cost = currying(cost)
// 因為返回的是本身所以可以這么寫
//cost(100)(200)
// 也可以下面這么寫一直調用
cost(100)
cost(200)
console.log(cost()) // 300
~~~
>[info] ## lodash 中的柯里化函數
~~~
1.lodash 利用的就是函數式編程的思想,其中提供的'curry'方法可以將函數轉成柯里化函數,關于lodash
這個方法使用的講解:
功能:創建一個函數,該函數接收一個或多個 func 的參數,如果 func 所需要的參數都被提
供則執行 func 并返回執行的結果。否則繼續返回該函數并等待接收剩余的參數。
參數:需要柯里化的函數
返回值:柯里化后的函數
~~~
>[danger] ##### 使用 一
~~~
// 引入lodash
const _ = require('lodash')
// 創建一個函數
function getSum(a, b, c) {
return a + b + c
}
// 使用curry 將getSum 轉換成柯里化函數
let curried = _.curry(getSum)
// 把接受多個參數的函數變換成接受一個單一參數的函數,并且返回接受余下的參數且返回結果的新函數
curried(1, 2, 3) // 直接執行
curried(1)(2)(3) // (1) 和 (2) 都沒有直接返回結果 只有形成個數和實參一直時執行符合柯里化
// 利用柯里化將函數轉成了一元函數,原本是要傳三個參數,在(1,2)返回的新的函數只要傳一個參數
curried(1, 2)(3)
~~~
>[danger] ##### 使用二
~~~
1.現在要對一個每一項是字符串組成的數組進行過濾找到,不包含空字符串的字符項
~~~
~~~
const _ = require('lodash')
// 先柯里化 查找規則的函數
const match = _.curry(function (reg, str) {
return str.match(reg)
})
// 使用柯里化定義規則
const haveSpace = match(/\s+/g)
// 使用柯里化創建一個數組過濾方法
const filter = _.curry(function (func, array) {
return array.filter(func)
})
// 使用柯里化并將比價規則的柯里化函數作為回調傳入
const findSpace = filter(haveSpace)
// ------------執行-------------
console.log(filter(haveSpace, ['John Connor', 'John_Donne']))
console.log(findSpace(['John Connor', 'John_Donne']))
~~~
>[danger] ##### 實現一個curry 函數
~~~
1.拋開lodash這種現成封裝好的函數庫,自己如何實現一個柯里化轉換函數,主要的思路就是
要知道形參和實參是否在長度上已經相等,不相等就不會返回結果,相等則會返回對應結果內容
~~~
[關于函數形參長度](http://www.hmoore.net/cyyspring/more/1441815)
~~~
// 將函數柯里化
function curry(func) {
return function curriedFn(...args) {
// 如果實參小于形參那么就是返回回調函數
if (args.length < func.length) {
// 返回函數
return function () {
// 將之前函數的參數拼接回來
return curriedFn(...args.concat(Array.from(arguments)))
}
}
// 如果相等返回實際結果
return func(...args)
}
}
function getSum(a, b, c) {
return a + b + c
}
const curried = curry(getSum)
console.log(curried(1, 2, 3)) //6
console.log(curried(1)(2, 3)) //6
console.log(curried(1, 2)(3)) // 6
~~~
>[info] ## 對柯里化的總結
~~~
1.柯里化可以讓我們給一個函數傳遞較少的參數得到一個已經記住了某些固定參數的新函數
2.這是一種對函數參數的'緩存' 本質上就是利用閉包
3.讓函數變的更靈活,讓函數的粒度更小
4.可以把多元函數轉換成一元函數
~~~
- HTTP -- 初始
- HTTP -- 什么是HTTP
- HTTP -- 相關技術
- HTTP -- 相關的協議
- Emmet -- 語法
- HTML -- 補充
- iframe -- 補充
- checkbox 和 radio 細節
- form -- 補充
- html -- html5
- html -- 視頻音頻
- html -- html5 data-* 全局屬性
- css -- 重學
- css -- 單位
- css 知識補充 -- 導入
- css -- 顏色補充
- css --繼承性
- css - 元素隱藏
- 標簽元素--塊/行內/行內塊
- css -- 盒子陰影 – 在線查看
- css -邊框圖形
- css -- Web字體
- css -- 精靈圖
- css -- 屬性補充
- text-align -- 內容
- line-height -- 行高
- 文字換行
- overflow-溢出
- css -- 選擇器
- css -- 偽元素
- css -- 偽類選擇器
- 設置高度寬度 和 盒子模型
- css -- 文字溢出
- css -- white-space / text-overflow
- css -- 定位
- css -- 浮動
- 浮動 -- 案例
- flex -- 布局
- flex -- 解決等距布局
- flex -- 內容居中
- flex -- 導航欄
- Grid -- 布局
- css -- transform 形變
- css -- 垂直水平居中
- css -- transition 動畫
- css -- Animation 動畫
- css -- vertical-align
- css -- 函數
- css -- 媒體查詢
- 重學案例
- 重新 -- 鼠標常見樣式
- 重學 -- 透明邊框background-clip
- 重學 -- 多重邊框box-shadow
- css -- 預處理器
- 移動端適配
- 前端結構目錄說明
- 瀏覽器 加載過程
- 回流和重繪
- 雜七雜八 -- 小工具方法
- npm包比較網站
- IP定位
- 通過useragent獲取手機品牌型號
- 自啟本地服務
- BOM -- 常用知識點記錄
- window -- 認識
- windows -- 大小滾動
- BOM -- Location
- BOM -- URLSearchParams
- BOM -- history
- BOM -- navigator 和 screen
- 前端存儲 -- Cookie、LocalStorage、IndexedDB
- DOM -- 知識總結
- DOM -- 獲取元素
- DOM -- 節點屬性
- DOM -- 元素屬性
- 獲取元素style的讀取 - getComputedStyle
- DOM -- 元素的操作
- DOM -- 元素大小和滾動
- DOM -- 小練習
- Event -- 事件
- event -- 事件對象
- event -- 案例
- event -- 做一個樹
- js -- ajax
- 封裝一個ajax
- ajax -- 文件上傳
- 倒計時搶購案例
- axios -- 封裝
- 跨域
- 前端 -- Fetch API
- js -- 基礎篇
- 數據類型
- 數據類型檢測
- 類型小知識
- 原始類型的包裝類
- 類型轉換
- delete -- 運算符
- Date -- 對象
- 函數參數傳遞
- 對象某個屬性不存時候判斷
- 操作符
- 函數變量傳值
- 訪問對象通過點和[]
- 和if等同的一些寫法
- for -- 執行順序
- JS -- 執行過程
- JS中的堆(Heap)棧(Stack)內存
- JS -- 執行上下文
- Js -- ES3 和 ES5+ 后
- let const var
- ES3 -- 案例思考
- 閉包概念
- 淺拷貝和深拷貝
- JS -- 嚴格模式
- js -- 數組篇
- Array -- 數組基礎
- Array -- 小常識檢測數組
- Array -- 小技巧將數組轉成字符串
- Array -- 自帶方法
- Array -- 數組插入總結
- Array -- every是否都符合巧用
- js--Function篇
- Function -- length 屬性
- Function -- arguments
- Function -- 也是對象
- Function -- new Function 創建方法
- Function -- 函數作為返回值
- Function -- callee
- 匿名函數
- Function -- 閉包
- 閉包內存查看
- 閉包 -- 使用的案例
- 閉包 -- 使用的案例
- 箭頭函數不適用場景
- js -- this、call、apply
- this -- 指向
- call、apply -- 講解
- 總結 -- this
- 思考題
- Object -- 數據屬性/訪問器屬性
- 新增關于對象方法
- js -- 面向對象
- 對象到底是什么
- 到底什么是js的對象
- js --prototype、__proto__與constructor 1
- JS es5繼承
- JS 中的原型繼承說明
- JS -- Object是所有類的父類
- 總結
- Object -- 函數構造函數
- Object -- 手動實現一個new
- js -- 函數式編程(目前只是了解后面需要更多時間深入)
- 了解 -- 高階函數
- 了解 -- 純函數
- 了解 -- 函數柯里化
- 柯里化 -- 知識點
- 了解 -- 函數組合
- 了解 -- 函子
- js--小知識點
- url -- 將get請求連接參數變成對象
- event -- 一個函數處理多個事件
- try -- 處理異常
- Error -- 前段報錯信息傳給后臺
- JSON -- 序列化
- return -- 返回true和false
- for -- 循環里初始化變量
- 命名 -- get和set怎么命名
- 鏈式調用
- 利用遞歸代替循環思路
- JS -- 技巧篇
- 技巧 -- 代碼規范
- 技巧 -- 惰性載入函數
- 技巧 -- 防抖函數
- 技巧 -- 節流函數
- 插入補充(防抖/節流)
- 技巧 -- 定時器的使用
- 技巧 -- 回調函數
- 技巧 -- 分時函數
- 技巧 -- 除了return 我怎么跳出多層循環
- 技巧 -- switch 還是 if-else?
- 技巧 -- 將字符串轉成對象
- 技巧 -- 函數轉換
- 技巧 -- 工作記錄數組對象中相同項
- JS -- 數組小文章總結
- 數組類型判斷
- includes 和 indexOf
- for ... in,for ... of和forEach之間有什么區別
- map、filter、reduce、find 四種方法
- 多種形式處理數組思考方式
- for...in 和 Object.keys
- 各種知識點集合文章
- 創建數組 -- 總結
- 數組去重 -- 總結
- 獲取數組中不重復的元素 -- 總結
- 比較兩個數組元素相同 -- 總結
- 出現頻率最高的元素 -- 總結
- 兩數組交集 -- 總結
- 兩數組差集 -- 總結
- 工具方法 - 總結
- 扁平化數組
- JS -- 數組技巧篇 30s
- 30s Array -- 創建數組篇(一)
- 30s Array --過濾(查詢)篇章(一)
- 30s Array --過濾篇章(二)
- 30s Array -- 新增篇(一)
- 30s Array--比較篇(一)
- 30s Array -- 分組篇(一)
- 30 Array -- 刪除篇(一)
- 30s Array-- 其他篇(一)
- 30s Array -- 個人感覺不常用篇章
- JS -- 對象技巧篇30s
- 30s Object -- 查(一)
- 30s Object -- 增(一)
- 30s Object -- 工具類型小方法
- 30s Object -- 跳過沒看系列
- ES -- 新特性
- 變量篇章
- 變量 -- let/const/var聲明
- 變量 -- 詞法聲明和變量聲明
- 變量 -- var x = y = 100
- 變量 -- a.x = a = {n:2}
- 帶標簽的模板字符串
- 函數篇章
- 函數 -- 參數篇章
- 函數 -- 只能通過new創建實例
- 函數 -- 箭頭函數
- 函數 -- 尾調優化
- 對象篇章
- 對象 -- 字面量寫法的優化/新增方法
- 賦值篇章
- 解構賦值 -- 簡單概念
- 解構賦值 -- 對象解構
- 解構賦值 -- 數組解構
- 解構賦值 -- 函數參數
- Symbol 屬性
- Set 和 Map
- Set -- 去重/交、并、差集
- Map -- 集合
- 類class篇章
- ES6 和 ES5 的寫法比較
- es6 -- mixin函數繼承
- es6 -- 創建一個接口
- ES5 VS ES6 -- class 編譯
- 數組新功能
- 創建/轉換 -- 數組
- 迭代器和生成器
- es6 -- 迭代器
- es6 -- 生成器
- for-of 循環的是什么
- 做一個異步執行器
- 代理和反射
- Proxy -- 使用
- Reflect -- 使用
- Proxy 和 Reflect 結合使用
- 運算符 -- 展開運算符
- ES7 -- 新特性
- ES8 -- 新特性
- ES9 -- 新特性
- ES10 -- 新特性
- ES11 -- 新特性
- ES12 -- 新特性
- ES13 -- 新特性
- ES6 和 ES8 的異步
- js -- 異步、同步、阻塞、非阻塞
- js -- 如何做到異步的
- js -- 引擎線程,GUI渲染線程,瀏覽器事件觸發線程
- js -- 如何通過事件循環運行異步
- js -- 誤區任務回調就是異步
- js -- 宏任務和微任務
- 參考文章推薦閱讀
- js -- callback 還是 promise
- js -- Promise 初識
- js -- 自己實現一個Promise
- js -- Promise 更多用法
- 再來看setTimeout 和for
- js -- ES8 異步 async await
- js -- 紅綠燈問題
- js -- 倒計時
- 異步圖片預加載
- 手動觸發異步
- 異步題
- JS -- 模塊化
- CommonJS -- 在node服務器端
- AMD 模塊化規范
- ES Modules
- ES Modules -- 使用特點
- import 和 export 使用
- export 和 import -- 執行
- 其他用法
- systemjs
- 對比區別
- 使用babel 或webpack進行模塊打包
- Jq -- 細節
- JS -- 性能優化
- 圖片預加載
- js -- 正則
- 設計原則和編程技巧
- 設計原則 -- 單一職責
- js -- 設計模式
- 設計模式 -- 簡單理解
- 一、鴨子類型
- 1.1 多態概念
- 1.2 小章節記錄 -- 封裝
- 1.3.多態和鴨子
- 設計模式 -- 單例模式(透明、惰性)
- 單例模式 -- js單例和惰性單例
- ES6 -- 寫單例模式
- 設計模式 -- 策略模式
- 策略模式 -- 表單驗證
- 策略模式 -- 表單驗證多規則
- 策略模式和多態區別
- 設計模式 -- 代理模式(代理被代理相同方法)
- 代理模式 -- 分類
- 代理模式 -- 總結
- 設計模式 -- 迭代器模式
- 設計模式 -- 觀察者(發布訂閱)模式
- 觀察者 和 發布訂閱區別
- 發布訂閱模式 -- 現在通用模型
- 發布訂閱模式 -- 書中實際案例
- 發布訂閱模式--全局發布訂閱對象
- 發布訂閱模式 -- vue
- 設計模式 -- 命令模式(對象方法拆分指令)
- 命令模式 -- js 自帶
- 命令模式 -- 撤銷和重做
- 命令模式 -- 命令和策略的區別
- 設計模式 -- 組合模式(樹)
- 組合模式 -- 拆分了解
- 組合模式 -- java角度
- 組合模式 -- 書中案例掃描文件夾
- 組合模式 -- 注意點
- 組合模式 -- 引用父對象(書中案例)
- 組合模式 -- 小的案例
- 組合模式 -- 總結
- 設計模式 -- 模板方法(抽象類繼承)
- 模板方法 -- 前端角度思考
- 模板方法 -- java 思考方式
- 模板方法 -- js沒有抽象類
- 模板方法 -- 鉤子方法
- 模板方法 -- 用js方式來實現
- 設計模式 -- 享元模式
- 享元、單例、對象池
- 享元模式 -- 前端角度思考
- 享元模式 -- 代碼案例
- 享元模式 -- 適用和內外部狀態
- 額外擴展 -- 對象池
- 設計模式 -- 職責鏈模式
- 職責鏈 -- 前端角度
- 職責鏈和策略
- 職責鏈 -- 異步的職責鏈
- 職責鏈 -- AOP
- 職責鏈 -- 改造迭代器模式的代碼
- 設計模式 -- 中介者模式
- 中介者模式 -- 前端角度(一)
- 中介者模式 -- 前端角度(二)
- 中介者模式 -- 前端角度(三)
- 中介者模式 -- 總結
- 設計模式 -- 裝飾者模式
- 裝飾者模式 -- es5 解決方案
- 裝飾器模式 -- 和代理模式區別
- 設計模式 -- 狀態模式
- 狀態模式 -- 前端思想
- 狀態模式 -- 文件上傳案例
- 狀態模式 -- 和策略模式的區別
- 設計模式 -- 適配器模式
- js -- 代碼重構
- 重構 -- 方法封裝
- 重構 -- 抽象函數
- 高階函數 -- 范式
- 狀態管理方案
- Node -- 學習篇
- Node -- 服務端運行的js
- node -- Global(全局成員)
- node -- Buffer緩沖器
- node -- 路徑操作
- node -- 文件的讀寫
- node -- 目錄操作
- node -- HTTP
- HTTP -- 響應頭常見類型
- HTTP -- 處理Get
- HTTP -- 處理Post
- HTTP -- 簡單的案例
- Express
- Express -- 中間件
- Express -- 處理post/get
- Express -- 模板引擎
- Express -- 簡單案例和目錄搭建
- Express -- 數據庫service.js
- Express -- json/url
- Express -- 配合數據庫
- 配合數據庫 -- 簡單的登錄
- npm -- js包管理
- npm -- 淘寶鏡像
- nrm -- 更多鏡像的選擇
- yarn -- 包管理
- yarn -- 清理緩存
- WebPack -- 模塊化開發
- webPack -- 安裝、使用、打包
- webPack -- 使用配置文件
- 延伸 -- base64圖片優劣
- webPack -- 完整配置