前言
在 JavaScript 的開發中,資料處理與函式操作經常需要處理陣列、物件、字串的轉換、搜尋與過濾等需求。儘管 ES6+ 提供了不少內建函式(如 map
、filter
、reduce
等),但仍有許多情境需要進階或更簡潔的處理方式。
這時候,Lodash 就是一個非常實用的工具庫。它是一個提供大量實用函式的 JavaScript 函式庫,能幫助開發者更方便地進行資料操作、提升開發效率與可讀性。
重點摘要
Lodash 是什麼:
- 一個現代 JavaScript 實用工具庫,專注於資料處理、陣列與物件操作。
- 模組化設計,可依照需求引入特定函式,減少最終 bundle 大小。
使用方式:
安裝方式:
npm install lodash
引入方式(使用 ES6 模組):
import _ from 'lodash';
常用函式分類:
- 陣列操作:
chunk
、compact
、difference
、uniq
、flatten
等 - 物件操作:
get
、set
、merge
、pick
、omit
- 函式處理:
debounce
、throttle
、once
- 數學與邏輯判斷:
isEmpty
、isEqual
、clamp
- 字串操作:
camelCase
、kebabCase
、startCase
- 陣列操作:
優點:
- API 設計一致,學習曲線平緩
- 可與原生 JS 無縫搭配
- 處理巢狀資料與深層結構特別方便
實際範例
以下透過幾個實際範例來展示 Lodash 的常見使用情境與語法。
1. 陣列切分:_.chunk
將一個陣列依照固定大小切成多個子陣列。
import _ from 'lodash'; |
2. 去除 falsy 值:_.compact
移除陣列中的 false
、null
、0
、""
、undefined
和 NaN
。
const arr = [0, 1, false, 2, '', 3]; |
3. 陣列差集:_.difference
找出第一個陣列中,不存在於其他陣列的元素。
const result = _.difference([1, 2, 3, 4], [2, 3]); |
4. 去除重複值:_.uniq
回傳一個不含重複值的新陣列。
const result = _.uniq([2, 1, 2]); |
5. 平坦化陣列:_.flatten
將多維陣列的一層扁平化。
const result = _.flatten([1, [2, [3, [4]]]]); |
若要完全扁平化,可使用 flattenDeep
。
const result = _.flattenDeep([1, [2, [3, [4]]]]); |
6. 取得物件巢狀值:_.get
避免使用多層 obj && obj.prop
判斷。
const obj = { a: { b: { c: 42 } } }; |
可設定預設值:
const result = _.get(obj, 'a.b.d', 'not found'); |
7. 防抖動(Debounce):_.debounce
常用於輸入框搜尋防抖,例如搜尋建議:
const search = _.debounce((query) => { |
8. 函式執行一次:_.once
保證某個函式只執行一次。
const init = _.once(() => { |
總結
Lodash 是一個穩定、完整、社群活躍的 JavaScript 工具函式庫,適合用於各種日常資料處理場景。尤其當面對資料轉換、巢狀結構處理、函式優化(如 debounce/throttle)等問題時,Lodash 提供了直觀且一致的解法。
若在專案中引入 Lodash 時,建議採用模組化方式僅引入需要的函式,或使用 lodash-es(es module 版本) 搭配 Tree Shaking,以減少最終輸出大小。