JavaScript工具庫Lodash的使用方法詳解
Lodash是什么:
Lodash 是一個一致性、模塊化、高性能的 JavaScript 實用工具庫。Lodash 通過降低 array、number、objects、string 等等的使用難度從而讓 JavaScript 變得更簡單。 Lodash 的模塊化方法 非常適用于:
- 遍歷 array、object 和 string
- 對值進行操作和檢測
- 創(chuàng)建符合功能的函數(shù)
Lodash的主要功能(用法請看使用示例):
數(shù)組操作(Array)
| 方法名 | 功能描述 |
|---|---|
_.chunk | 將數(shù)組拆分為指定大小的塊 |
_.compact | 移除數(shù)組中的所有假值(false, null, 0, "", undefined, NaN) |
_.concat | 連接多個數(shù)組/值 |
_.difference | 返回第一個數(shù)組中不包含在其他給定數(shù)組中的值 |
_.drop | 從數(shù)組開頭移除指定數(shù)量的元素 |
_.dropRight | 從數(shù)組末尾移除指定數(shù)量的元素 |
_.fill | 使用指定值填充數(shù)組的部分或全部元素 |
_.findIndex | 返回滿足條件的第一個元素的索引 |
_.flatten | 減少一級數(shù)組嵌套深度 |
_.flattenDeep | 遞歸將多維數(shù)組展平為一維數(shù)組 |
_.head | 獲取數(shù)組的第一個元素 |
_.indexOf | 獲取值在數(shù)組中的索引 |
_.intersection | 返回多個數(shù)組的交集元素 |
_.join | 將數(shù)組元素連接成字符串 |
_.last | 獲取數(shù)組的最后一個元素 |
_.pull | 移除數(shù)組中所有給定的值 |
_.reverse | 反轉(zhuǎn)數(shù)組 |
_.slice | 裁剪數(shù)組的一部分 |
_.sortedUniq | 對已排序數(shù)組進行去重 |
_.tail | 獲取除第一個元素外的所有元素 |
_.take | 從數(shù)組開頭獲取指定數(shù)量的元素 |
_.union | 返回多個數(shù)組的并集(去重) |
_.uniq | 數(shù)組去重 |
_.without | 創(chuàng)建排除指定值的新數(shù)組 |
_.zip | 將多個數(shù)組對應位置的值分組 |
集合操作(Collection)
| 方法名 | 功能描述 |
|---|---|
_.countBy | 根據(jù)轉(zhuǎn)換函數(shù)的結(jié)果統(tǒng)計元素數(shù)量 |
_.each | 遍歷集合中的每個元素(別名:_.forEach) |
_.every | 檢查集合中所有元素是否滿足條件 |
_.filter | 篩選滿足條件的元素 |
_.find | 查找滿足條件的第一個元素 |
_.groupBy | 根據(jù)轉(zhuǎn)換函數(shù)的結(jié)果對元素分組 |
_.includes | 檢查值是否在集合中存在 |
_.keyBy | 根據(jù)指定鍵值創(chuàng)建對象 |
_.map | 對集合中每個元素執(zhí)行轉(zhuǎn)換函數(shù) |
_.orderBy | 按指定屬性和排序方向?qū)吓判?/td> |
_.partition | 將集合分為滿足條件和不滿足條件兩組 |
_.reduce | 將集合縮減為單個值 |
_.sample | 隨機獲取集合中的一個元素 |
_.shuffle | 打亂集合的順序 |
_.size | 獲取集合的長度 |
_.some | 檢查集合中是否有元素滿足條件 |
_.sortBy | 按指定屬性升序排序 |
函數(shù)操作(Function)
| 方法名 | 功能描述 |
|---|---|
_.after | 創(chuàng)建調(diào)用指定次數(shù)后才執(zhí)行的函數(shù) |
_.bind | 綁定函數(shù)的this指向 |
_.curry | 創(chuàng)建柯里化函數(shù) |
_.debounce | 創(chuàng)建防抖函數(shù)(延遲執(zhí)行) |
_.delay | 延遲調(diào)用函數(shù) |
_.flip | 翻轉(zhuǎn)函數(shù)參數(shù)的順序 |
_.memoize | 創(chuàng)建帶緩存的函數(shù) |
_.once | 創(chuàng)建只能執(zhí)行一次的函數(shù) |
_.partial | 部分應用函數(shù)參數(shù) |
_.throttle | 創(chuàng)建節(jié)流函數(shù)(限制執(zhí)行頻率) |
_.unary | 創(chuàng)建只接受一個參數(shù)的函數(shù) |
對象操作(Object)
| 方法名 | 功能描述 |
|---|---|
_.assign | 復制源對象的可枚舉屬性到目標對象(別名:_.extend) |
_.at | 根據(jù)路徑獲取對象的值 |
_.clone | 淺拷貝對象 |
_.cloneDeep | 深拷貝對象 |
_.defaults | 為對象設置默認值 |
_.findKey | 查找滿足條件的第一個屬性鍵 |
_.forIn | 遍歷對象自身的和繼承的可枚舉屬性 |
_.forOwn | 遍歷對象自身的可枚舉屬性 |
_.get | 根據(jù)路徑安全獲取對象的值 |
_.has | 檢查對象是否有指定路徑的屬性 |
_.invert | 反轉(zhuǎn)對象的鍵值對 |
_.keys | 獲取對象自身的可枚舉屬性名 |
_.mapKeys | 通過函數(shù)映射對象的鍵名 |
_.mapValues | 通過函數(shù)映射對象的值 |
_.merge | 遞歸合并多個對象 |
_.omit | 排除對象中指定的屬性 |
_.pick | 選擇對象中指定的屬性 |
_.set | 根據(jù)路徑設置對象的值 |
_.toPairs | 將對象轉(zhuǎn)換為鍵值對數(shù)組(別名:_.entries) |
_.values | 獲取對象自身的可枚舉屬性值 |
實用工具(Util)
| 方法名 | 功能描述 |
|---|---|
_.times | 調(diào)用函數(shù)指定次數(shù)并返回結(jié)果 |
_.random | 生成指定范圍內(nèi)的隨機數(shù) |
_.range | 生成數(shù)字范圍數(shù)組 |
_.escape | 轉(zhuǎn)義字符串中的HTML特殊字符 |
_.noop | 空函數(shù)(返回undefined) |
_.uniqueId | 生成全局唯一ID |
_.camelCase | 將字符串轉(zhuǎn)換為駝峰式 |
_.capitalize | 將字符串首字母大寫 |
_.isEqual | 執(zhí)行深度比較判斷值是否相等 |
_.isFunction | 檢查值是否為函數(shù) |
_.isObject | 檢查值是否為對象 |
_.isArray | 檢查值是否為數(shù)組 |
_.isEmpty | 檢查值是否為空(對象/集合/映射) |
_.isString | 檢查值是否為字符串 |
_.isNumber | 檢查值是否為數(shù)字 |
_.isDate | 檢查值是否為Date對象 |
_.isError | 檢查值是否為Error對象 |
_.isNaN | 檢查值是否為NaN |
_.isNil | 檢查值是否為null或undefined |
_.isPlainObject | 檢查值是否為普通對象(通過{}或new Object創(chuàng)建) |
字符串操作(String)
| 方法名 | 功能描述 |
|---|---|
_.deburr | 去除字符串中的變音符號 |
_.endsWith | 檢查字符串是否以指定子串結(jié)尾 |
_.kebabCase | 將字符串轉(zhuǎn)換為短橫線分隔式 |
_.lowerCase | 將字符串轉(zhuǎn)換為空格分隔的小寫單詞 |
_.pad | 在字符串兩側(cè)填充字符到指定長度 |
_.repeat | 重復字符串指定次數(shù) |
_.replace | 替換字符串中匹配的子串 |
_.snakeCase | 將字符串轉(zhuǎn)換為下劃線分隔式 |
_.startCase | 將字符串轉(zhuǎn)換為每個單詞首字母大寫 |
_.startsWith | 檢查字符串是否以指定子串開頭 |
_.template | 創(chuàng)建模板字符串 |
_.toLower | 將字符串轉(zhuǎn)換為小寫 |
_.toUpper | 將字符串轉(zhuǎn)換為大寫 |
_.trim | 去除字符串兩端的空白字符 |
_.truncate | 截斷字符串并添加省略號 |
_.unescape | 反轉(zhuǎn)義HTML特殊字符 |
_.words | 將字符串拆分為單詞數(shù)組 |
數(shù)學計算(Math)
| 方法名 | 功能描述 |
|---|---|
_.add | 兩數(shù)相加 |
_.ceil | 向上取整 |
_.floor | 向下取整 |
_.max | 獲取數(shù)組中的最大值 |
_.mean | 計算數(shù)組的平均值 |
_.min | 獲取數(shù)組中的最小值 |
_.round | 四舍五入取整 |
_.sum | 計算數(shù)組值的總和 |
序列操作(Seq)
| 方法名 | 功能描述 |
|---|---|
_.chain | 創(chuàng)建鏈式操作序列 |
_.tap | 在鏈式操作中攔截值 |
_.thru | 在鏈式操作中修改值 |
_.prototype.value | 執(zhí)行鏈式操作并返回結(jié)果 |
Lodash的安裝與使用:
npm安裝:
$ npm i --save lodash
項目中引入(二選一):
const _ = require('lodash');
import _ from 'lodash';使用示例:
數(shù)組操作(Array)
// 分塊 _.chunk(['a', 'b', 'c', 'd'], 2); // => [['a','b'], ['c','d']] // 去假值 _.compact([0, 1, false, 2, '', 3]); // => [1, 2, 3] // 深度扁平化 _.flattenDeep([1, [2, [3, [4]], 5]); // => [1, 2, 3, 4, 5] // 差集 _.difference([2, 1], [2, 3]); // => [1] // 去重 _.uniq([2, 1, 2]); // => [2, 1] // 交集 _.intersection([2, 1], [2, 3]); // => [2]
集合操作(Collection)
const users = [
{ 'user': 'barney', 'age': 36 },
{ 'user': 'fred', 'age': 40 }
];
// 分組
_.groupBy(users, 'age'); // => { '36': [barney對象], '40': [fred對象] }
// 鍵值映射
_.keyBy(users, 'user'); // => { 'barney': barney對象, 'fred': fred對象 }
// 條件統(tǒng)計
_.countBy(users, user => user.age > 36); // => { 'false': 1, 'true': 1 }
// 多條件排序
_.orderBy(users, ['user', 'age'], ['asc', 'desc']);
// 隨機取樣
_.sample([1, 2, 3, 4]); // => 隨機一個元素函數(shù)操作(Function)
// 防抖(停止操作500ms后執(zhí)行)
const debounced = _.debounce(() => console.log('Resized!'), 500);
window.addEventListener('resize', debounced);
// 節(jié)流(每100ms最多執(zhí)行一次)
const throttled = _.throttle(() => console.log('Scrolling!'), 100);
window.addEventListener('scroll', throttled);
// 單次執(zhí)行
const init = _.once(() => console.log('Initialized!'));
init(); // => 'Initialized!'
init(); // 無效果
// 柯里化
const add = (a, b) => a + b;
const curried = _.curry(add);
curried(1)(2); // => 3對象操作(Object)
const obj = { 'a': 1, 'b': 2 };
const nested = { 'a': { 'b': { 'c': 3 } } };
// 安全取值
_.get(nested, 'a.b.c'); // => 3
_.get(nested, 'a.b.d', 'default'); // => 'default'
// 排除屬性
_.omit(obj, ['a']); // => { 'b': 2 }
// 選擇屬性
_.pick(obj, ['b']); // => { 'b': 2 }
// 深度合并
_.merge({ 'a': 1 }, { 'b': 2 }); // => { 'a': 1, 'b': 2 }
// 深度克隆
const cloned = _.cloneDeep(nested);實用工具(Util)
// 類型檢查
_.isArray([1, 2, 3]); // => true
_.isObject({}); // => true
_.isEmpty(null); // => true
// 范圍生成
_.range(4); // => [0, 1, 2, 3]
// 唯一ID
_.uniqueId('contact_'); // => 'contact_1'
// 深度比較
_.isEqual({ 'a': 1 }, { 'a': 1 }); // => true
// 執(zhí)行多次
_.times(3, () => console.log('Hello')); // 打印3次Hello字符串操作(String)
// 駝峰轉(zhuǎn)換
_.camelCase('Foo Bar'); // => 'fooBar'
// 短橫線命名
_.kebabCase('fooBar'); // => 'foo-bar'
// 截斷文本
_.truncate('hi-diddly-ho there', { 'length': 14 }); // => 'hi-diddly-ho...'
// 填充字符
_.pad('abc', 8, '_-'); // => '_-abc_-_'
// 首字母大寫
_.capitalize('FRED'); // => 'Fred'
數(shù)學計算(Math)
// 數(shù)組求和 _.sum([4, 2, 8, 6]); // => 20 // 最大值 _.max([4, 2, 8, 6]); // => 8 // 平均值 _.mean([4, 2, 8, 6]); // => 5 // 向上取整 _.ceil(4.006); // => 5 // 隨機數(shù) _.random(5, 10); // => 5到10之間的整數(shù)
序列操作(Seq)
// 鏈式調(diào)用 const result = _.chain([1, 2, 3]) .map(n => n * 2) .filter(n => n > 2) .value(); // => [4,6] // 鏈式中間操作 _.chain([1, 2, 3]) .tap(array => array.pop()) .value(); // => [1,2]
日期處理
// 日期比較(需安裝lodash-date) _.date.compare(new Date(2023, 0, 1), new Date(2023, 0, 2), 'day'); // => -1
總結(jié):
雖然現(xiàn)代JavaScript引入了許多新特性,但Lodash仍然具有不可替代的優(yōu)勢:
穩(wěn)定性與可靠性:超過10年的開發(fā)迭代,處理了各種邊界情況
性能優(yōu)化:針對大型數(shù)據(jù)集的操作進行了深度優(yōu)化
豐富功能:提供精心設計的實用函數(shù)
一致性API:所有函數(shù)保持一致的參數(shù)結(jié)構(gòu)和命名規(guī)范
無論是處理復雜的數(shù)據(jù)轉(zhuǎn)換、優(yōu)化應用性能,還是簡化日常開發(fā)任務,Lodash都能提供優(yōu)雅而高效的解決方案。
到此這篇關于JavaScript工具庫Lodash使用方法詳解的文章就介紹到這了,更多相關js工具庫Lodash使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
JavaScript實現(xiàn)元素滾動條到達一定位置循環(huán)追加內(nèi)容
下面小編就為大家分享一篇JavaScript實現(xiàn)元素滾動條到達一定位置循環(huán)追加內(nèi)容,具有很好的參考價值,希望對大家有所幫助2017-12-12
JavaScript獲取input輸入框內(nèi)容的常用方法
在 JavaScript 中,獲取 <input> 輸入框內(nèi)容是常見的操作,可以通過原生 JavaScript 或結(jié)合 jQuery 等庫實現(xiàn),以下是詳細的中文講解,介紹幾種常用的獲取 <input> 內(nèi)容的方法,包含代碼示例、使用場景和注意事項,需要的朋友可以參考下2025-12-12
JS控制圖片翻轉(zhuǎn)示例代碼(兼容firefox,ie,chrome)
本篇文章主要介紹了JS控制圖片翻轉(zhuǎn)示例代碼(兼容firefox,ie,chrome) 需要的朋友可以過來參考下,希望對大家有所幫助2013-12-12

