Khám phá 10 hàm Lodash hữu ích giúp tối ưu hóa code JavaScript của bạn

Lodash là một thư viện JavaScript mạnh mẽ, được xem như phiên bản nâng cấp của Underscore.js, cung cấp nhiều chức năng hơn và hiệu năng được cải thiện đáng kể. Với Lodash, bạn có thể dễ dàng thao tác với nhiều loại đối tượng, tiết kiệm thời gian viết code cho các hàm thông dụng, đồng thời giúp code trở nên gọn gàng, dễ đọc và tương thích với nhiều trình duyệt hơn. Nếu bạn chưa từng nghe đến Lodash hoặc chưa tận dụng hết sức mạnh của nó, đây là thời điểm thích hợp để khám phá những lợi ích mà thư viện này mang lại.

Bài viết này sẽ giới thiệu 10 hàm Lodash hữu dụng, giúp bạn hiểu rõ hơn về cách chúng có thể giúp bạn tối ưu hóa code JavaScript của mình.

1. _.assign: Gộp thuộc tính của các đối tượng

Hàm _.assign cho phép bạn gán các thuộc tính từ một hoặc nhiều đối tượng vào một đối tượng đích. Điều này rất hữu ích khi bạn muốn tạo một đối tượng mới bằng cách kết hợp các thuộc tính từ nhiều nguồn khác nhau.

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' }

Trong ví dụ trên, _.assign gộp các thuộc tính của foo và bar vào một đối tượng mới, ghi đè thuộc tính a ban đầu bằng giá trị từ foo.

2. _.times: Tạo mảng dữ liệu nhanh chóng

Hàm _.times nhận một số nguyên n và một hàm, sau đó thực thi hàm đó n lần. Kết quả trả về là một mảng chứa các giá trị trả về của hàm. _.times đặc biệt hữu ích khi bạn cần tạo dữ liệu mẫu cho mục đích kiểm thử.

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

Ví dụ này tạo một mảng gồm 5 số nguyên ngẫu nhiên bằng cách sử dụng _.times và hàm getRandomInteger.

3. _.debounce: Kiểm soát tần suất gọi hàm

Hàm _.debounce cho phép bạn trì hoãn việc thực thi một hàm cho đến sau một khoảng thời gian nhất định kể từ lần gọi cuối cùng. Điều này đặc biệt hữu ích trong các trường hợp như xử lý sự kiện keyup trên ô input, nơi bạn không muốn thực thi hàm xử lý quá thường xuyên.

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

Trong ví dụ này, hàm validateEmail chỉ được gọi sau khi người dùng ngừng gõ trong vòng 500ms. Điều này giúp tránh việc hiển thị thông báo lỗi liên tục trong quá trình nhập liệu.

4. _.find: Tìm kiếm đối tượng trong mảng một cách dễ dàng

Thay vì sử dụng vòng lặp để tìm một đối tượng cụ thể trong mảng, bạn có thể sử dụng hàm _.find. Hàm này cho phép bạn tìm kiếm đối tượng dựa trên một hoặc nhiều thuộc tính.

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" }

Ví dụ trên minh họa cách tìm kiếm người dùng có họ là “Doe” và giới tính là “male”, hoặc tìm người dùng dưới 18 tuổi.

5. _.get và _.set: Truy cập và thiết lập thuộc tính một cách an toàn

Hàm _.get cho phép bạn truy cập giá trị của một thuộc tính trong đối tượng bằng cách sử dụng đường dẫn (path) đến thuộc tính đó. Hàm _.set cho phép bạn thiết lập giá trị cho một thuộc tính, ngay cả khi đường dẫn đến thuộc tính đó chưa tồn tại.

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 thuộc tính mới sẽ được tạo. Với _.get, nếu đường dẫn không tồn tại, nó sẽ trả về undefined hoặc giá trị mặc định bạn cung cấp (trong ví dụ này là “John Doe”). Điều này giúp bạn tránh được các lỗi “Cannot set property ‘items’ of undefined”.

6. _.deburr: Loại bỏ dấu tiếng Việt

Hàm _.deburr loại bỏ dấu khỏi các ký tự trong chuỗi, chuyển đổi các ký tự có dấu thành các ký tự không dấu tương ứng.

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

Hàm này rất hữu ích khi bạn cần so sánh các chuỗi mà không phân biệt dấu, hoặc khi bạn cần tạo các phiên bản không dấu của chuỗi cho mục đích tìm kiếm hoặc lưu trữ.

7. _.keyBy: Tạo đối tượng từ mảng dựa trên thuộc tính

Hàm _.keyBy cho phép bạn tạo một đối tượng từ một mảng, trong đó các khóa của đối tượng là giá trị của một thuộc tính cụ thể trong mảng.

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: "..." }

Trong ví dụ này, _.keyBy tạo một đối tượng từ mảng posts, sử dụng thuộc tính id làm khóa. Điều này cho phép bạn truy cập nhanh chóng vào một bài đăng cụ thể bằng cách sử dụng ID của nó.

8. _.reduce: Biến đổi mảng thành đối tượng phức tạp

Hàm _.reduce (tương tự như Array.prototype.reduce trong ES6) cho phép bạn biến đổi một mảng thành một giá trị duy nhất, có thể là một đối tượng, một số, một chuỗi, hoặc bất kỳ kiểu dữ liệu nào khác.

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) {
    (result[user.age] || (result[user.age] = [])).push(user);
  }
  return result;
}, {});
// reducedUsers -> {
// 28: [{ name: "Jane", age: 28 }],
// 30: [{ name: "John", age: 30 }, { name: "Jack", age: 30 }]
// }

Trong ví dụ này, _.reduce tạo một đối tượng mới, trong đó người dùng được nhóm theo độ tuổi của họ (chỉ dành cho người dùng từ 18 đến 59 tuổi). Hàm này rất linh hoạt và có thể được sử dụng để thực hiện nhiều loại biến đổi dữ liệu phức tạp.

9. _.cloneDeep: Sao chép đối tượng một cách an toàn

Hàm _.cloneDeep tạo một bản sao sâu (deep copy) của một đối tượng. Điều này có nghĩa là tất cả các thuộc tính của đối tượng, bao gồm cả các đối tượng lồng nhau, sẽ được sao chép vào một đối tượng mới, độc lập với đối tượng gốc.

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!

Khi bạn gán một đối tượng cho một biến mới, bạn chỉ tạo một tham chiếu đến đối tượng gốc. Nếu bạn thay đổi thuộc tính của biến mới, bạn cũng sẽ thay đổi thuộc tính của đối tượng gốc. _.cloneDeep giải quyết vấn đề này bằng cách tạo một bản sao hoàn toàn mới của đối tượng.

10. _.sortedUniq: Lọc các giá trị trùng lặp trong mảng đã sắp xếp

Hàm _.sortedUniq loại bỏ các giá trị trùng lặp khỏi một mảng đã được sắp xếp. Hàm này hoạt động hiệu quả hơn so với _.uniq khi 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]

Hàm này rất hữu ích khi bạn làm việc với các mảng lớn và muốn cải thiện hiệu suất bằng cách tận dụng lợi thế của việc mảng đã được sắp xếp.

Lodash cung cấp rất nhiều hàm hữu ích giúp bạn tiết kiệm thời gian và công sức khi phát triển ứng dụng JavaScript. Với dung lượng nhỏ gọn (khoảng 70KB), hiệu năng tốt, cộng đồng lớn mạnh và được cập nhật thường xuyên, Lodash là một thư viện không thể thiếu trong bộ công cụ của bất kỳ nhà phát triển JavaScript nào. Nếu bạn chưa sử dụng Lodash, hãy thử tích hợp nó vào dự án của bạn và khám phá những lợi ích mà nó mang lại.