Lodash筆記
Lodash
Lodash介紹
Lodash是一個一致性、模組化、高效能的 JavaScript 實用工具庫。
Lodash 通過降低 array、number、objects、string 等等的使用難度從而讓 JavaScript 變得更簡單。
Lodash 的模組化方法 非常適用於:
1.遍歷 array、object 和 string 。
2.對值進行操作和檢測 。
3.建立符合功能的函式
Lodash環境搭建
新建一個demo資料夾
安裝lodash
npm init -y
初始化一個package.json
npm i lodash
執行
node 20200921-curry.js
演示lodash
//first /last /toUpper/reverse/each/includes/find/findIndex
const _ = require('lodash')
const arr = ['hello', 'world', 'data']
console.log(_.first(arr))
console.log(_.last(arr))
console.log(_.toUpper(arr))
console.log(_.toUpper(_.first(arr)))
console.log(arr.reverse())
console.log(_.reverse(arr))
//第一個引數是陣列,第二個是回撥函式
const r = _.each(arr, (item, idx) => {
console.log(item, idx)
})
console.log(r)
純函式的好處
//純函式的好處
//可快取,因為純函式對相同的輸入有相同的輸出,所以可以把純函式的結果快取起來
const _ = require('lodash')
//計算圓的面積,r是半徑
function getArea(r) {
console.log(r)
return Math.PI*r*r
}
//執行多次結果人仍然一樣
//獲取返回結果
// let getAreaWidthData = _.memoize(getArea)
// console.log(getAreaWidthData(3))
// console.log(getAreaWidthData(3))
// console.log(getAreaWidthData(3))
// console.log(getAreaWidthData(3))
//模擬memoize的實現
//需要接收一個引數,引數是一個方法
function memoize (fun) {
//定義一個物件
let cache = {}
//判斷是否
return function () {
let key = JSON.stringify(arguments)
cache[key] = cache[key] || fun.apply(fun,arguments)
return cache[key]
}
}
let getAreaWidthData = memoize(getArea)
console.log(getAreaWidthData(3))
console.log(getAreaWidthData(3))
console.log(getAreaWidthData(3))
//可測試
//可以讓測試更方便
//並行處理
//多執行緒並行操作共享記憶體可能會出現意外的情況
//純函式不需要訪問共享的記憶體資料,所以在並行的環境可以任意執行純函式
//純函式對於相同的輸入永遠會得到相同的輸出,而且沒有可觀察的副作用
//如果一個函式依賴於外部的狀態無法保證輸出相同,就會導致函式的不純
//類似於外部的全域性變數
//配置檔案,資料庫。獲取使用者的輸入
//所有的外部互動都有可能帶來副作用,但是副作用不能完全禁止,儘可能控制在可控範圍內
柯里化演示
//柯里化演示
//解決硬編碼的問題
// function checkAge () {
// let min = 18
// return age >= min
// }
//普通的純函式
// function checkAge(min, age) {
// return age >= min
// }
// console.log(checkAge(18, 20))
// console.log(checkAge(18, 24))
// console.log(checkAge(22, 21))
//函式的柯里化, 當函式有多個引數時,可以對這個函式進行改造,可以呼叫一個函式只傳入部分引數,(這部分引數以後永遠都不會發生變化)
//並讓這個函式返回一個新的函式,新的函式傳入剩餘的引數,並且返回結果
// function checkAge (min) {
// return function (age) {
// return min >= age
// }
// }
let checkAge = min => (age => min >= age)
let checkAge18 = checkAge(18)
let checkAge20 = checkAge(20)
console.log(checkAge18(20))
console.log(checkAge18(24))
console.log(checkAge20(20))
console.log(checkAge20(24))
lodash中的通用的柯里化方法curry方法
//lodash中的通用的柯里化方法curry方法
// _.curry(fun)
// 功能:建立一個函式,
// 該函式接收一個或者多個fun引數,
// 如果fun所需要的引數都被提供則執行fun並返回執行的結果,
// 否則繼續返回該函式並等待接收剩餘的引數
// 引數:需要柯里化的函式
// 返回值:柯里化後的函式
//將任意多元函式轉換成一元函式
const _ = require('lodash')
function getSum (a, b, c) {
return a + b + c
}
const curried = _.curry(getSum)
console.log(curried(1, 2, 3))
console.log(curried(1)(2, 3))
console.log(curried(1, 2)(3))
柯里化案例
//柯里化案例
const _ = require('lodash')
//判斷字串是否含有空格
// function match(reg, str) {
// return str.match(reg)
// }
const match = _.curry(function(reg, str) {
return str.match(reg)
})
const hasSpace = match(/\s+/g)
const hasNum = match(/\d+/g)
console.log(hasSpace('hello world'))
console.log(hasNum('123abc'))
console.log(hasNum('abc'))
let arrayData = ['find space', 'find_data']
// const filter = _.curry(function(fun, arr) {
// return arr.filter(fun)
// })
const filter = _.curry((fun, arr) => arr.filter(fun))
const findSpace = filter(hasSpace)
console.log(filter(hasSpace,arrayData))
console.log(findSpace(arrayData))
柯里化原理模擬
//柯里化原理
//const _ = require('lodash')
//形參
function getSum (a, b, c) {
return a + b + c
}
const curried = curry(getSum)
console.log(curried(1, 2, 3))
console.log(curried(1)(2, 3))
console.log(curried(1, 2)(3))
function curry(fun) {
//實參
return function curriedFn(...args) {
//判斷實參和形參的長度
if(args.length < fun.length) {
return function() {
return curriedFn(...args.concat(Array.from(arguments)))
}
}
return fun(...args)
}
}
lodash柯里化總結
//函式的柯里化可以讓我們給一個函式傳遞較少的引數得到一個已經記住了某些固定引數的新引數
//這是一種對函式的快取
//讓函式變得更靈活,讓函式的粒度變得更小
//可以把多元函式變成一元函式,可以組合使用函式產生更大的功能
相關文章
- webpack 學習筆記:使用 lodashWeb筆記
- lodash入門
- vue 中使用lodashVue
- Lodash前端開發利器前端
- lodash常用工具
- Lodash學習--Array篇
- Lodash學習-Collection篇
- Lodash.js的庫JS
- 聊聊lodash的debounce實現
- lodash原始碼分析之isArguments原始碼
- lodash原始碼分析之isObjectLike原始碼Object
- 硬剛 lodash 原始碼之路,_.chunk原始碼
- 惰性求值——lodash原始碼解讀原始碼
- Lodash原始碼分析-hasIn.js原始碼JS
- lodash原始碼分析(create.js)原始碼JS
- Lodash原始碼分析-fromPairs.js原始碼AIJS
- Lodash原始碼分析-drop.js原始碼JS
- Lodash原始碼分析-castArray.js原始碼ASTJS
- Lodash原始碼分析-escape.js原始碼JS
- Lodash原始碼分析-delay.js原始碼JS
- 印象筆記 --- 方法分享筆記筆記
- 筆記筆記
- 每日原始碼分析 – lodash(clamp.js)原始碼LAMPJS
- lodash原始碼分析之List快取原始碼快取
- 每日原始碼分析 – lodash(slice.js)原始碼JS
- 每日原始碼分析 – lodash(after.js)原始碼JS
- 用JavaScript中lodash編寫雙色球JavaScript
- 每日原始碼分析 - Lodash(remove.js)原始碼REMJS
- 每日原始碼分析 - lodash(slice.js)原始碼JS
- Lodash原始碼分析-compact.js原始碼JS
- 每日原始碼分析-Lodash(uniq.js)原始碼JS
- 每日原始碼分析 - lodash(clamp.js)原始碼LAMPJS
- 每日原始碼分析 - lodash(chunk.js)原始碼JS
- 每日原始碼分析 - lodash(after.js)原始碼JS
- lodash原始碼分析之Hash快取原始碼快取
- CUUG筆記 ORACLE索引學習筆記筆記Oracle索引
- 主動筆記與被動筆記筆記
- 淘寶記錄筆記筆記