Lodash 介紹與入門教學筆記 | 學習筆記

Posted by kdchang on 2024-07-01


前言

在 JavaScript 的開發中,資料處理與函式操作經常需要處理陣列、物件、字串的轉換、搜尋與過濾等需求。儘管 ES6+ 提供了不少內建函式(如 mapfilterreduce 等),但仍有許多情境需要進階或更簡潔的處理方式。

這時候,Lodash 就是一個非常實用的工具庫。它是一個提供大量實用函式的 JavaScript 函式庫,能幫助開發者更方便地進行資料操作、提升開發效率與可讀性。


重點摘要

  • Lodash 是什麼:

    • 一個現代 JavaScript 實用工具庫,專注於資料處理、陣列與物件操作。
    • 模組化設計,可依照需求引入特定函式,減少最終 bundle 大小。
  • 使用方式:

    • 安裝方式:

      npm install lodash
    • 引入方式(使用 ES6 模組):

      import _ from 'lodash';
  • 常用函式分類:

    • 陣列操作:chunkcompactdifferenceuniqflatten
    • 物件操作:getsetmergepickomit
    • 函式處理:debouncethrottleonce
    • 數學與邏輯判斷:isEmptyisEqualclamp
    • 字串操作:camelCasekebabCasestartCase
  • 優點:

    • API 設計一致,學習曲線平緩
    • 可與原生 JS 無縫搭配
    • 處理巢狀資料與深層結構特別方便

實際範例

以下透過幾個實際範例來展示 Lodash 的常見使用情境與語法。

1. 陣列切分:_.chunk

將一個陣列依照固定大小切成多個子陣列。

import _ from 'lodash';

const arr = [1, 2, 3, 4, 5, 6];
const result = _.chunk(arr, 2);
// 輸出:[[1, 2], [3, 4], [5, 6]]

2. 去除 falsy 值:_.compact

移除陣列中的 falsenull0""undefinedNaN

const arr = [0, 1, false, 2, '', 3];
const result = _.compact(arr);
// 輸出:[1, 2, 3]

3. 陣列差集:_.difference

找出第一個陣列中,不存在於其他陣列的元素。

const result = _.difference([1, 2, 3, 4], [2, 3]);
// 輸出:[1, 4]

4. 去除重複值:_.uniq

回傳一個不含重複值的新陣列。

const result = _.uniq([2, 1, 2]);
// 輸出:[2, 1]

5. 平坦化陣列:_.flatten

將多維陣列的一層扁平化。

const result = _.flatten([1, [2, [3, [4]]]]);
// 輸出:[1, 2, [3, [4]]]

若要完全扁平化,可使用 flattenDeep

const result = _.flattenDeep([1, [2, [3, [4]]]]);
// 輸出:[1, 2, 3, 4]

6. 取得物件巢狀值:_.get

避免使用多層 obj && obj.prop 判斷。

const obj = { a: { b: { c: 42 } } };
const result = _.get(obj, 'a.b.c');
// 輸出:42

可設定預設值:

const result = _.get(obj, 'a.b.d', 'not found');
// 輸出:'not found'

7. 防抖動(Debounce):_.debounce

常用於輸入框搜尋防抖,例如搜尋建議:

const search = _.debounce((query) => {
console.log('搜尋中:', query);
}, 300);

search('a');
search('ab');
search('abc'); // 只會觸發這次

8. 函式執行一次:_.once

保證某個函式只執行一次。

const init = _.once(() => {
console.log('只會執行一次的初始化');
});

init();
init();
// 輸出:只會執行一次的初始化

總結

Lodash 是一個穩定、完整、社群活躍的 JavaScript 工具函式庫,適合用於各種日常資料處理場景。尤其當面對資料轉換、巢狀結構處理、函式優化(如 debounce/throttle)等問題時,Lodash 提供了直觀且一致的解法。

若在專案中引入 Lodash 時,建議採用模組化方式僅引入需要的函式,或使用 lodash-es(es module 版本) 搭配 Tree Shaking,以減少最終輸出大小。


歡迎分享按讚給予支持和鼓勵!


Related Posts

Comments