Lodash là một thư viện JavaScript và là phiên bản nâng cấp của Underscore với nhiều chức năng hơn và có hiệu năng tốt hơn.

Bạn Đang Xem: 10 Lodash functions mà bạn nên biết!

Lodash cung cấp rất nhiều chức năng, chia làm vài nhóm như: Array, Collection, Date, Function, Lang, Math, Number, Object, Seq, String, Util, Properties …

Nó sẽ giúp đỡ bạn ứng phó với tất cả những loại object và các bạn sẽ tiết kiệm ngân sách và chi phí thời kì, không nhất thiết phải code những hàm chung. Code của các bạn sẽ sạch hơn, ít dòng hơn và hoạt động trên tất cả những trình duyệt. Nếu như bạn không dùng thậm chí là không biết nó là gì, bạn nên nghiêm túc suy nghĩ về việc tìm hiểu và sử dụng lodash. Sau đây mình sẽ liệt kê ra một số function rất hữu dụng của lodash để phần nào cho những bạn thấy vì sao tất cả chúng ta nên sử dụng thư viện này.

1 _.assign

_.assign gán các tính chất của một hoặc nhiều object cho một object nguồn.

var foo = { a: “a property” }; var bar = { b: 4, c: “an other property” } var result = _.assign({ a: “an old property” }, foo, bar); // result => { a: ‘a property’, b: 4, c: ‘an other property’ }

2 _.times

_.times nhận một biến dạng số n và một function để được thực hiện n lần cuối cùng trả về một mảng kết quả của function được truyền vào. _.times rất hữu ích khi tạo tài liệu khi test.

function getRandomInteger() { return Math.round(Math.random() * 100); } var result = _.times(5, getRandomNumber); // result => [64, 70, 29, 10, 23]

3 _.debounce

_.debounce sẽ gọi lại một function sau một khoảng tầm thời kì nhất định Tính từ lúc lần cuối cùng function này được gọi.

function validateEmail() { // Validate email here and show error message if not valid } var emailInput = document.getElementById(“email-field”); emailInput.addEventListener(“keyup”, _.debounce(validateEmail, 500));

Xem Thêm : Gợi ý 10 ý tưởng phối đồ cùng quần biker bạn không nên bỏ qua

Trong ví dụ này, validateEmail sẽ tiến hành gọi sau 500ms nên thông tin lỗi sẽ không còn được hiển thị ngay tức thời. Khoảng tầm thời kì đếm ngược 500ms sẽ đặt lại mỗi một khi người dùng bấm phím. Bằng phương pháp này, người dùng sẽ không còn nhìn thấy thông tin lỗi cho tới khi ngừng gõ.

4 _.find

Thay vì lặp qua một mảng với một vòng lặp để tìm một đối tượng người dùng cụ thể, tất cả chúng ta chỉ có sử dụng _.find. Điều này rất hay, và tiện lợi, nhưng đây không phải là điều duy nhất chúng ta có thể làm với _.find. Bạn cũng đều có thể tìm một object sử dụng nhiều tính chất với một code. Hãy xem ví dụ sau!

var users = [ { firstName: “John”, lastName: “Doe”, age: 28, gender: “male” }, { firstName: “Jane”, lastName: “Doe”, age: 5, gender: “female” }, { firstName: “Jim”, lastName: “Carrey”, age: 54, gender: “male” }, { firstName: “Kate”, lastName: “Winslet”, age: 40, gender: “female” } ]; var user = _.find(users, { lastName: “Doe”, gender: “male” }); // user -> { firstName: “John”, lastName: “Doe”, age: 28, gender: “male” } var underAgeUser = _.find(users, function(user) { return user.age < 18; }); // underAgeUser -> { firstName: “Jane”, lastName: “Doe”, age: 5, gender: “female” }

5 _.get and ._set

_.get sẽ trả về một giá trị tính chất từ một object và _.set sẽ đặt một tính chất với giá trị bạn mong muốn. Không có gì đặc biệt quan trọng ngoại trừ việc chúng ta có thể truy cập vào một trong những tính chất với đường dẫn của nó.

var bar = { foo: { key: “foo” } }; _.set(bar, “foo.items[0]”, “An item”); // bar => { foo: { key: “foo”, items: [“An item”] } } var name = _.get(bar, “name”, “John Doe”); // name => John Doe

Khi sử dụng _.set, nếu đường dẫn không tồn tại, một tính chất sẽ tiến hành tạo mới. Không còn phải bận tâm với những dòng lỗi như “Cannot set property ‘items’ of undefined” . Với _.get, nếu đường dẫn không tồn tại, nó sẽ trả về undefined thay vì lỗi.

6 _.deburr

_.deburr xóa hết dấu của biến truyền vào, “é” sẽ trở thành “e”

_.deburr(“déjà vu”); // -> deja vu _.deburr(“Juan José”); // -> Juan Jose

7 _.keyBy

_.keyBy giúp đỡ bạn rất nhiều khi chúng ta nỗ lực cố gắng để đã chiếm lĩnh được một object với một tính chất cụ thể. Giả thử tất cả chúng ta có 100 bài đăng trên blog và muốn lấy được bài đăng với Id là “34abc”. Làm thế nào tất cả chúng ta có thể làm được điều này?

var posts = [ { id: “1abc”, title: “First blog post”, content: “…” }, { id: “2abc”, title: “Second blog post”, content: “…” }, // more blog posts { id: “34abc”, title: “The blog post we want”, content: “…” } // even more blog posts ]; posts = _.keyBy(posts, “id”); var post = posts[“34abc”] // post -> { id: “34abc”, title: “The blog post we want”, content: “…” }

Xem Thêm : Mô hình ASK là gì? Cách sử dụng ASK để đánh giá năng lực nhân sự

Bất kì khi nào server trả về kết quả là một object dưới dạng array, function này còn có thể giúp đỡ bạn tổ chức lại kết quả trả về đó. Biến thứ hai truyền vào hoàn toàn có thể là một function.

8 _.reduce

_.reduce có chút tuơng tự với function lọc. Sự khác biệt duy nhất là chúng ta có thể chọn hình thức của object trả về. Sẽ là thường nhật nếu khách hàng không hiểu những gì tôi nói, hãy xem ví dụ sau để làm rõ hơn.

var users = [ { name: “John”, age: 30 }, { name: “Jane”, age: 28 }, { name: “Bill”, age: 65 }, { name: “Emily”, age: 17 }, { name: “Jack”, age: 30 } ] var reducedUsers = _.reduce(users, function (result, user) { if(user.age >= 18 && user.age <= 59) return result; }, {}); // reducedUsers -> { // 28: [{ name: “Jane”, age: 28 }], // 30: [{ name: “John”, age: 30 }, { name: “Jack”, age: 30 }] // }

Về cơ bản, reduce trả về một object mới với những người dùng được nhóm theo tuổi của họ và chỉ dành cho tất cả những người dùng trong khoảng tầm từ 18 đến 59. Function trợ giúp này là một trong những đối tượng người dùng được sử dụng nhiều nhất trong Lodash. Nó cũng là một phần của ES6. Tôi cũng muốn chỉ ra 2 lỗi phổ thông mà chúng ta có thể phạm phải, nhớ là trả về kết quả ở cuối hàm và nhớ là chỉ định giá trị mặc định cho kết quả như thể đối số thứ ba (ở đây là {}).

9 _.cloneDeep

_.cloneDeep sẽ sao chép một Object. Object mới cũng sẽ sở hữu một địa mới chỉ trong bộ nhớ nên mọi sự thay đổi của nó sẽ không còn ảnh hưởng tác động tới các tính chất của object ban sơ.

var original = { foo: “bar” }; var copy = original; copy.foo = “new value”; // copy -> { foo: “new value” } Yeah! // original -> { foo: “new value” } Oops! var original = { foo: “bar” }; var copy = _.cloneDeep(original); copy.foo = “new value”; // copy -> { foo: “new value” } Yeah! // original -> { foo: “bar” } Yeah!

10 _.sortedUniq

Với function này, tất cả những giá trị trùng lặp sẽ không còn được trả về. _.sortedUniq thường được sử dụng để cải thiện hiệu suất, vì nó đặc biệt quan trọng dành cho những mảng đã được sắp xếp.

var sortedArray = [1, 1, 2, 3, 3, 3, 5, 8, 8]; var result = _.sortedUniq(sortedArray); // -> [1, 2, 3, 5, 8]

Function này rất hữu ích khi chúng ta phải đuơng đầu với những mảng lớn. Nếu như bạn muốn hiệu suất tốt hơn, bạn nên sắp xếp mảng của mình và sử dụng các function hoạt động tốt hơn với những mảng đã được sắp xếp. Có một số function khác tuơng tự như vậy này trong Lodash. Chúng ta có thể xem qua _.sortIndex, _.sort Index

Lodash cung cấp rất nhiều chức năng để giúp đỡ bạn tiết kiệm ngân sách và chi phí thời kì. Thư viện này rất nhẹ (69 KB), hiệu quả, phổ thông và được yêu thích (hơn 18.000 starts trên Github). Nó được update rất thường xuyên và lần cuối cùng tôi xem trang Github của họ, có 0 issue trên đó (trang Github). Nếu như bạn đã và đang hoạt động dự án của mình mà không sử dụng Lodash thì đừng lo, việc tích hợp Lodash vào một trong những dự án là rất đơn giản và ít rủi ro. Nếu như bạn khai mạc một dự án mới, bạn nên thực sự nghĩ về việc sử dụng nó.