Giới thiệu về Lodash

Lodash là thư viện tiện ích JavaScript phổ biến, cung cấp các hàm xử lý dữ liệu như mảng, đối tượng, chuỗi. Ưu điểm nổi bật:

• Xử lý dữ liệu phức tạp (sao chép sâu, so sánh, nhóm dữ liệu)
• Điều khiển hàm (debounce, throttle)
• Thao tác đối tượng (get/set/omit/pick)
• Hỗ trợ lập trình hàm qua chain

Cài đặt và Nhập khẩu

# Cài đặt bản chuẩn
npm install lodash
# Cài bản ES module
npm install lodash-es
# Thêm type definitions cho TypeScript
npm install -D @types/lodash

Các cách import

// Toàn bộ thư viện (không tối ưu)
import _ from 'lodash';

// Import riêng lẻ (gợi ý dùng)
import { cloneDeep, debounce } from 'lodash-es';

// Import từ module con
import throttle from 'lodash/throttle';

Các hàm sử dụng thường xuyên

Xử lý mảng

import { uniq, groupBy } from 'lodash-es';
uniq([1,1,2]); // [1,2]
groupBy([{type:'a'}, {type:'b'}], 'type');

Thao tác đối tượng

import { get, pick } from 'lodash-es';
get({a: {b: 1}}, 'a.b', 0); // 1
pick({a:1, b:2}, ['a']); // {a:1}

Điều khiển hàm

import { debounce } from 'lodash-es';
const search = debounce((term) => {
  // Gửi request
}, 300);

Best Practice với React/TypeScript

Sử dụng debounce trong React

import { useMemo } from 'react';
function SearchInput() {
  const delayedSearch = useMemo(
    () => debounce((query) => {}, 300),
    []
  );
  return <input onChange={(e) => delayedSearch(e.target.value)} />;
}

Kiểm tra kiểu với TypeScript

import { get } from 'lodash-es';
const value = get<{key: string}, string>({key: 'abc'}, 'key', 'default');

Tối ưu hiệu suất

• Ưu tiên import riêng lẻ để tree-shaking
• Thay thế hàm đơn giản bằng native JS khi có thể:
  • Array.from(new Set(arr)) thay cho uniq
  • obj?.prop ?? default thay cho get đơn giản

Tính năng nâng cao

Chain xử lý dữ liệu

import { chain } from 'lodash-es';
const result = chain(data)
  .filter('active')
  .groupBy('type')
  .mapValues('size')
  .value();

lodash/fp cho lập trình hàm

Cung cấp phiên bản immutable,柯里 hóa tự động. Gợi ý chỉ dùng khi cần:

import map from 'lodash/fp/map';
const double = map(x => x * 2);

Các lỗi thường gặp

• Memory leak với debounce/throttle: Dùng useMemo và cancel() trong React
• Hiệu suất isEqual: Tránh dùng cho object lớn
• Giá trị mặc định của get: Nên cung cấp giá trị hợp lý

So sánh với thư viện khác

Thư viện	Đặc điểm
Underscore	Tiền thân của Lodash nhưng ít tính năng hơn
Ramda	Hướng hàm thuần,柯里 hóa sẵn
date-fns	Xử lý ngày tháng chuyên dụng