Lodash – Tiện ích dắt túi của dân lập trình Javascript

2721

Bài viết được sự cho phép của tác giả Sơn Dương

Bạn có nhận thấy là công việc lập trình cũng chỉ quanh quẩn các thao tác xử lý Mảng, Object… đúng không? Bản thân các ngôn ngữ lập trình hiện đại như Javascript cũng đã có sẵn nhiều hàm, công cụ mạnh mẽ để giúp bạn làm việc với Mảng, Object hiệu quả.

Lodash là một trong những thư viện tuyệt vời, cung cấp nhiều công cụ giúp bạn thao tác với mảng, object… đơn giản hơn rất nhiều.

Có thể bạn cũng đã biết tới thư viện Lodash này rồi. Tuy nhiên, qua bài viết này mình sẽ tổng hợp một số hàm nổi bật lodash mà các bạn rất hay sử dụng trong mọi dự án.

Lodash là gì?

Lodash là một thư viện Javascript cung cấp sẵn các hàm để thao tác với Array, Object, String, Function… được đơn giản hơn. Lodash là một nhánh được tách ra từ thư viện nổi tiếng một thời underscore.js.

Một khi đã thử dùng qua một vài hàm của Lodash, đảm bảo bạn sẽ bị nghiện và không thể thiếu nó trong các dự án sau này.

Thư viện Lodash javascript có rất nhiều tính năng, được chia thành các nhóm như: Array, Object, Function, Date, Number…

Một số hàm lodash hay sử dụng nhất

Phần này, mình sẽ tổng hợp một số hàm của lodash mà mình thường xuyên sử dụng trong các dự án.

Để cài đặt lodash, bạn có nhiều cách như cài qua theo kiểu module bằng NPM, hoặc import qua CDN. Ví dụ, với dự án html đơn giản là mình import thư viện qua CDN trong thẻ head như sau:

<head>
...
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
...
</head>

Cách sử dụng rất đơn giản, bạn chỉ cần gọi lodash bằng ký tự gạch dưới _ sau đó là tên hàm.

Cú pháp:

_.<tên hàm>(tham số)

  Import lodash như thế nào mới đúng

  debounce, throttle và once - ba hàm thêm cách giải quyết logic người dùng!

orderBy

Như tên của hàm đã nói lên tác dụng của nó. Hàm này có chức năng sắp xếp các phần tử trong mảng theo tiêu chí nào đó.

Ví dụ: sắp xếp mảng dưới đây với các item giá tăng dần

const items = [
  { name: 'Item A', price: 2 },
  { name: 'Item B', price: 8 },
  { name: 'Item C', price: 5 },
  { name: 'Item D', price: 4 }
];

const result = _.orderBy(items, ['price'], ['asc']);
console.log(result)

chunk

Cắt một mảng thành nhiều mảng con với kích thước tùy ý.

const array = [ 1, 2, 3, 4 ];

const result = _.chunk(array, 2);
console.log(result)
// KQ => [[1, 2], [3, 4]]

Ứng tuyển việc làm Javascript lương cao trên TopDev

flatten

Làm phẳng một mảng có nhiều mảng con lồng trong đó.

const array = [1, [2, [3, [4]], 5]];

const result = _.flatten(array);
console.log(result)
// => [1, 2, [3, [4]], 5]

Hàm này mới chỉ làm phẳng được một level, nếu bạn muốn kết quả là một mảng phẳng hoàn toàn, không còn mảng con lồng trong nữa thì sử dụng flattenDeep()

const array = [1, [2, [3, [4]], 5]];

const result = _.flattenDeep(array);
console.log(result)
// => [1, 2, 3, 4, 5]

Bạn thấy khoái chưa! Nếu mà làm phẳng kiểu thủ công chắc cũng hết hơi.

take

Tạo một mảng mới được trích xuất từ một mảng với kích thước tùy ý.

const array = [1, 2, 3];
const result = _.take(array, 2);
console.log(result)
// result => [1, 2]

difference

Tạo một mảng gồm các phần tử không xuất hiện trong các mảng đã cho (được truyền thông qua tham số).

const result = _.difference([1, 2, 3], [2, 3, 4]);
console.log(result)
// result => [1]

isEmpty

Hàm này nghe có vẻ đơn giản, nhưng lại rất hay sử dụng để kiểm tra và tránh những lỗi crash không đáng có. Hàm này có tác dụng kiểm tra một object, collection, map, hay set có bị rỗng hay không.

_.isEmpty({});
// => true
_.isEmpty({ name: 'John Doe' });
// => false
_.isEmpty([])
// => true

throttle

Hàm này có tác dụng tương tự như hàm setInterval mặc định của JS vậy. Có tác dụng tạo một hàm để chỉ gọi một hàm truyền vào nhiều nhất một lần trong khoảng thời gian được chỉ định.

const throttled = _.throttle(() => {
 console.log('Throttled after 50ms!');
}, 50);

window.addEventListener('resize', throttled);

debounce

Tương tự như hàm setTimeout mặc định của JS.

const debounced = _.debounce(() => {
 console.log('Debounced after 400ms!');
}, 400);

window.addEventListener('resize', debounced);

merge

Hàm này mới thực sự đáng giá. Có tác dụng mà gộp nhiều object vào làm một.

const firstObject = { 'A': [{ 'B': 1 }, { 'C': 2 }] };
const secondObject = { 'A': [{ 'B': 3 }, { 'D': 4 }] };
const result = _.merge(firstObject, secondObject);
console.log(result)
// result => { A: [{ B: 3 }, { C: 2, D: 4 }] }

clone

Như bạn cũng biết, JS cũng tương tự như Java, cũng có kiểu dữ liệu tham chiếu và tham trị. Do đó, khi bạn gán một biến cho một biến khác thông qua dấu =, thực chất là chỉ truyền địa chỉ vùng nhớ của biến đó thôi.

Do đó, khi một biến thực hiện thay đổi giá trị là biến còn lại cũng bị thay đổi theo.

Ví dụ về việc thay đổi vùng nhớ khi gán biến.

const website = {website: "VNTALKING.COM", age: 10}
const newwebsite = website;
newwebsite.age = 20;
console.log(website)
// {website: "VNTALKING.COM", age: 20}

Để giải quyết vấn đề này, chúng ta cần phải clone cả vùng nhớ chứ không chỉ là mỗi địa chỉ vùng nhớ.

const website = {website: "VNTALKING.COM", age: 10}
const newwebsite = _.clone(website);
newwebsite.age = 20;
console.log(website)
// {website: "VNTALKING.COM", age: 10}

Trên đây là những hàm mình hay sử dụng nhất của lodash javascript. Ngoài ra, còn nhiều hàm khác nữa, vì phạm khuôn khổ bài viết có hạn, bạn có thể vào trang tài liệu chính thức của lodash để khai phá thêm nhé. https://lodash.com/docs

Bài viết gốc được đăng tải tại vntalking.com

Có thể bạn quan tâm:

Xem thêm việc làm công nghệ hấp dẫn trên TopDev

RELATED ARTICLESMORE FROM AUTHOR