Lodash – Thư viện JavaScript utility phổ biến

Giới thiệu về Lodash

Lodash là một thư viện JavaScript utility cung cấp hàng trăm hàm tiện ích giúp bạn thao tác với mảng, đối tượng, chuỗi, số và nhiều kiểu dữ liệu khác. Lodash giúp code của bạn ngắn gọn hơn, dễ đọc hơn và tránh được các lỗi phổ biến.

Đây là thư viện không thể thiếu trong nhiều dự án JavaScript hiện đại, đặc biệt khi làm việc với dữ liệu phức tạp.

Cài đặt Lodash

Lodash có thể được cài đặt qua npm, yarn hoặc sử dụng trực tiếp từ CDN:

<!-- CDN -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>

<!-- npm -->
<!-- npm install lodash -->
<!-- import _ from 'lodash'; -->

Thao tác với mảng (Array)

Lodash cung cấp rất nhiều hàm hữu ích để xử lý mảng. Dưới đây là một số ví dụ phổ biến:

const users = [
  { id: 1, name: 'An', age: 25, active: true },
  { id: 2, name: 'Bình', age: 30, active: false },
  { id: 3, name: 'Chi', age: 22, active: true },
  { id: 4, name: 'Dũng', age: 35, active: true },
  { id: 5, name: 'Lan', age: 28, active: false }
];

// _.filter - Lọc người dùng active
const activeUsers = _.filter(users, { active: true });
console.log(activeUsers);
// [{ id: 1, name: 'An', ... }, { id: 3, name: 'Chi', ... }, { id: 4, name: 'Dũng', ... }]

// _.map - Lấy danh sách tên
const names = _.map(users, 'name');
console.log(names);
// ['An', 'Bình', 'Chi', 'Dũng', 'Lan']

// _.orderBy - Sắp xếp theo tuổi giảm dần
const sorted = _.orderBy(users, ['age'], ['desc']);
console.log(_.map(sorted, u => u.name + ' (' + u.age + ')'));
// ['Dũng (35)', 'Bình (30)', 'Lan (28)', 'An (25)', 'Chi (22)']

Thao tác với đối tượng (Object)

Lodash giúp clone sâu, merge, pick và omit thuộc tính từ đối tượng một cách dễ dàng:

const defaultConfig = {
  theme: 'light',
  locale: 'vi-VN',
  pageSize: 20,
  features: {
    search: true,
    export: false,
    print: true
  }
};

const userConfig = {
  theme: 'dark',
  features: {
    export: true
  }
};

// _.merge - Hợp nhất cấu hình (deep merge)
const finalConfig = _.merge({}, defaultConfig, userConfig);
console.log(finalConfig);
/*
{
  theme: 'dark',
  locale: 'vi-VN',
  pageSize: 20,
  features: { search: true, export: true, print: true }
}
*/

// _.pick - Chọn một số thuộc tính
const essential = _.pick(finalConfig, ['theme', 'locale']);
console.log(essential);
// { theme: 'dark', locale: 'vi-VN' }

// _.omit - Loại bỏ thuộc tính
const withoutFeatures = _.omit(finalConfig, ['features']);
console.log(withoutFeatures);
// { theme: 'dark', locale: 'vi-VN', pageSize: 20 }

Tiện ích khác

Lodash còn có nhiều hàm tiện ích khác như debounce, throttle, deep clone, và unique:

// _.debounce - Chống nhấn nút liên tục (xử lý input)
const searchInput = document.getElementById('search');
searchInput.addEventListener('input', _.debounce(function(e) {
  console.log('Đang tìm kiếm:', e.target.value);
  // Gọi API search ở đây
}, 500));

// _.cloneDeep - Clone sâu đối tượng
const original = { a: 1, b: { c: 2, d: [3, 4] } };
const cloned = _.cloneDeep(original);
cloned.b.c = 99;
console.log(original.b.c); // 2 - không bị ảnh hưởng

// _.uniqBy - Loại bỏ phần tử trùng lặp
const products = [
  { id: 1, name: 'Áo thun' },
  { id: 2, name: 'Quần jeans' },
  { id: 1, name: 'Áo thun' },
  { id: 3, name: 'Giày thể thao' }
];
const uniqueProducts = _.uniqBy(products, 'id');
console.log(uniqueProducts.length); // 3

Kết luận

Lodash là một thư viện JavaScript mạnh mẽ và đáng tin cậy, giúp bạn viết code sạch hơn, nhanh hơn và ít lỗi hơn. Dù bạn đang làm việc với dữ liệu API, xử lý form, hay xây dựng ứng dụng phức tạp, Lodash luôn có công cụ phù hợp. Hãy thêm Lodash vào bộ công cụ của bạn ngay hôm nay!