簡介

Lodash-es?是 Lodash 庫的 ES 模塊版本，提供了大量實用的?JavaScript?工具函數。它支持按需導入，可以顯著減少打包體積，是現代 JavaScript 項目中的首選工具庫。

主要特性

• ES 模塊支持: 完全支持 ES6 模塊語法
• 按需導入: 只導入需要的函數，減少打包體積
• TypeScript 支持: 完整的類型定義
• 函數式編程: 提供豐富的函數式編程工具
• 性能優化: 經過優化的實現，性能優異

安裝配置

安裝依賴

# 安裝 lodash-es
npm install lodash-es# 安裝類型定義（TypeScript 項目）
npm install @types/lodash-es -D

基礎導入

// 按需導入單個函數
import { debounce, throttle, cloneDeep } from "lodash-es";// 導入多個函數
import { isEmpty, isArray, isObject, merge, pick } from "lodash-es";

常用方法

1. 數組操作

import { chunk, flatten, uniq, groupBy, orderBy } from "lodash-es";// 數組分塊
const numbers = [1, 2, 3, 4, 5, 6];
const chunks = chunk(numbers, 2); // [[1, 2], [3, 4], [5, 6]]// 數組扁平化
const nested = [1, [2, [3, [4]]]];
const flattened = flatten(nested); // [1, 2, [3, [4]]]// 去重
const duplicates = [1, 2, 2, 3, 3, 3];
const unique = uniq(duplicates); // [1, 2, 3]// 分組
const users = [{ name: "Alice", age: 25 },{ name: "Bob", age: 30 },{ name: "Charlie", age: 25 },
];
const grouped = groupBy(users, "age");
// { 25: [{ name: 'Alice', age: 25 }, { name: 'Charlie', age: 25 }], 30: [{ name: 'Bob', age: 30 }] }// 排序
const sorted = orderBy(users, ["age"], ["desc"]); // 按年齡降序

2. 對象操作

import { pick, omit, merge, cloneDeep, isEmpty } from "lodash-es";const user = {id: 1,name: "John",email: "john@example.com",password: "secret",
};// 選擇屬性
const publicUser = pick(user, ["id", "name", "email"]);// 排除屬性
const safeUser = omit(user, ["password"]);// 深度合并
const defaultConfig = { theme: "light", lang: "en" };
const userConfig = { theme: "dark" };
const merged = merge({}, defaultConfig, userConfig); // { theme: 'dark', lang: 'en' }// 深度克隆
const cloned = cloneDeep(user);// 檢查空值
const empty = isEmpty({}); // true
const notEmpty = isEmpty([1, 2, 3]); // false

3. 函數工具

import { debounce, throttle, once, memoize } from "lodash-es";// 防抖
const debouncedSearch = debounce((query) => {console.log("搜索:", query);
}, 300);// 節流
const throttledScroll = throttle(() => {console.log("滾動事件");
}, 100);// 只執行一次
const initialize = once(() => {console.log("初始化完成");
});// 緩存函數結果
const expensiveCalculation = memoize((n) => {console.log("計算中...");return n * n;
});

4. 類型檢查

import { isArray, isObject, isString, isNumber, isFunction } from "lodash-es";console.log(isArray([1, 2, 3])); // true
console.log(isObject({})); // true
console.log(isString("hello")); // true
console.log(isNumber(42)); // true
console.log(isFunction(() => {})); // true

實際應用示例

1. 搜索功能

import { debounce, filter, includes } from "lodash-es";class SearchComponent {constructor() {this.data = [{ id: 1, name: "Apple", category: "fruit" },{ id: 2, name: "Banana", category: "fruit" },{ id: 3, name: "Carrot", category: "vegetable" },];this.search = debounce(this.performSearch.bind(this), 300);}performSearch(query) {if (!query) return this.data;return filter(this.data, (item) =>includes(item.name.toLowerCase(), query.toLowerCase()));}
}

2. 表單驗證

import { isEmpty, isEmail, pick } from "lodash-es";const validateForm = (formData) => {const errors = {};if (isEmpty(formData.name)) {errors.name = "姓名不能為空";}if (!isEmail(formData.email)) {errors.email = "郵箱格式不正確";}return {isValid: isEmpty(errors),errors,cleanData: pick(formData, ["name", "email"]),};
};

最佳實踐

1. 按需導入

// ? 推薦：按需導入
import { debounce, throttle } from "lodash-es";// ? 不推薦：導入整個庫
import _ from "lodash-es";

2. 與?Vue3?結合使用

import { ref, computed } from "vue";
import { debounce, isEmpty } from "lodash-es";export default {setup() {const searchQuery = ref("");const results = ref([]);const debouncedSearch = debounce(async (query) => {if (isEmpty(query)) {results.value = [];return;}// 執行搜索邏輯}, 300);const filteredResults = computed(() =>results.value.filter((item) => !isEmpty(item)));return {searchQuery,results: filteredResults,debouncedSearch,};},
};

3. 性能優化

import { memoize, throttle } from "lodash-es";// 緩存計算結果
const fibonacci = memoize((n) => {if (n < 2) return n;return fibonacci(n - 1) + fibonacci(n - 2);
});// 限制函數調用頻率
const handleResize = throttle(() => {// 處理窗口大小變化
}, 100);

lodash vs lodash-es

特性	lodash	lodash-es
模塊化支持	CommonJS	ES Modules (ESM)
Tree Shaking	不支持	? 支持
打包體積	較大	較小（按需引入）
兼容性	Node.js?和舊瀏覽器兼容	現代瀏覽器/構建工具
性能（構建優化）	較差	? 更佳（按需優化）

總結

Lodash-es 是現代 JavaScript 開發中不可或缺的工具庫。通過按需導入和合理使用，可以顯著提升開發效率和代碼質量。記住始終使用 ES 模塊語法導入，并根據項目需求選擇合適的函數，避免不必要的依賴。

?Lodash-es 完整開發指南：ES模塊化JavaScript工具庫實戰教程 - 高質量源碼分享平臺-免費下載各類網站源碼與模板及前沿技術分享