[JavaScript] Giới thiệu về Lodash và một số hàm cơ bản

Giới thiệu

Lodash là một thư viện mạnh của Javascript, nó được lấy cảm hứng và based từ Underscore, nhưng ngày nay nó được sử dụng phổ biến hơn vì được cập nhật thường xuyên và có nhiều tính năng bổ sung hơn. Thư viện Javascript này có thể xử lý nhiều loại đối tượng một cách gọn gàng qua đó giúp tiết kiệm thời gian cho việc viết lại những xử lý hay gặp. Đặc biệt với các developer đang sử dụng các công nghệ JavaScript như Nodejs, Reactjs, Vuejs… và đã từng xử lý những mảng object phức tạp thì mình nghĩ bạn nên biết về Lodash.

Lodash

Lodash rất  nhẹ đối với bản core build  (~4kB gzipped) với 63 methods bên dưới:

_.assignIn, _.before, _.bind, _.chain, _.clone, _.compact, _.concat, _.create, _.defaults, _.defer, _.delay, _.each, _.escape, _.every, _.filter, _.find, _.flatten, _.flattenDeep, _.forEach, _.has, _.head, _.identity, _.indexOf, _.isArguments, _.isArray, _.isBoolean, _.isDate, _.isEmpty, _.isEqual, _.isFinite, _.isFunction, _.isNaN, _.isNull, _.isNumber, _.isObject, _.isRegExp, _.isString, _.isUndefined, _.iteratee, _.keys, _.last, _.map, _.matches, _.max, _.min, _.mixin, _.negate, _.noConflict, _.noop, _.once, _.pick, _.reduce, _.result, _.size, _.slice, _.some, _.sortBy, _.tap, _.thru, _.toArray, _.uniqueId, _.value, & _.values

Nhưng bản full build cũng chỉ có (~24kB gzipped) với gần hơn 300 methods được viết sẵn được chia thành các nhóm chính sau: Array, Collection, Function, Lang, Math, Number, Object, Seq, String, Util, Properties. Với mỗi nhóm lại có rất nhiều hàm tiện ích để bạn có thể sử dụng trong những trường hợp khác nhau. Dưới đây, mình xin nêu ra một số hàm thông dụng thường dùng. Để xem thêm các tiện ích khác, bạn có thể vào document của Lodash để xem chi tiết ở đây

Một số hàm hay dùng

• _.debounce(func, [wait=0], [options={}])

  Hàm debounce dùng để đảm bảo khi một function được gọi nhiều lần trong một khoảng thời gian nhất đinh thì chỉ lần gọi cuối cùng của function đó được thực thi, còn các lần gọi phía trước sẽ bị bỏ qua. Việc thực thi của function cũng được trì hoãn (delay) đến cuối của khoảng thời gian đang xét.

  Hàm debounce có input là function, output cũng là function, thường dùng để làm hàm bao (wrapper function) cho các function bắt việc xử lý các event như keyUp, onChange, onClick,.. Lý do chính là để tránh xử lý không cần thiết, tránh bug xảy ra ngoài ý muốn của người dùng và tăng performance của hệ thống.

  Ví dụ khi người dùng muốn tìm chữ viet thì họ sẽ gõ chữ “viet” rất nhanh, dẫn đến event KeyUp được bắn (emit) 4 lần trong một khoảng thời gian rất ngắn, tương ứng với ‘v’, ‘vi’, ‘vie’, ‘viet’, khi đó chỉ lần emit cuối cùng với chữ ‘viet’ sẽ được đối ứng. Nhưng nếu gõ từng chữ với tốc độ chậm (cách nhau ngoài khoảng thời gian delay được truyền vào từ tham số) thì 4 lần emit vẫn được đối ứng bình thường. Hay như trường hợp người dùng click liên tục button đăng ký trong một khoảng thời gian rất ngắn, nếu không có xử lý gì thì một bản ghi sẽ được đăng ký thành nhiều lần, nhưng nếu bao hàm xử lý sự kiện onClick bằng hàm debounce thì chỉ một bản ghi sẽ được đăng ký thôi.
  

• _.cloneDeep(value)

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

var original = { foo: "bar" };
var copy = original;
copy.foo = "new value";
// copy -> { foo: "new value" } 
// original -> { foo: "new value" } 

var original = { foo: "bar" };
var copy = _.cloneDeep(original);
copy.foo = "new value";
// copy -> { foo: "new value" } 
// original -> { foo: "bar" }

• _. sortedUniq(array)

  Với function này, tất cả các giá trị trùng lặp sẽ không được trả về. _.sortedUniq thường được sử dụng để cải thiện hiệu suất, vì nó đặc biệt dành cho các mảng đã được sắp xếp. Function này rất hữu ích cho các mảng lớn và đã đượ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]

• _.find(collection, [predicate=_.identity], [fromIndex=0])

  Thay vì lặp qua một mảng với một vòng lặp để tìm một đối tượng cụ thể, chúng ta chỉ cần sử dụng _.find. Function này sẽ trả về giá trị đầu tiên thảo mãn điều kiện, ngoài ra chúng ta còn có thể thêm đối số thứ 3 là fromIndex để hàm _.find nhận biết tìm từ vị trí bao nhiêu. Ngoài ra nếu muốn tìm giá trị từ cuối trở về thì ta cũng có thể dùng hàm _.findLast

var users = [
  { 'user': 'barney',  'age': 36, 'active': true },
  { 'user': 'fred',    'age': 40, 'active': false },
  { 'user': 'pebbles', 'age': 1,  'active': true }
];
 
_.find(users, function(o) { return o.age < 40; }); // => object for 'barney'
 
// The `_.matches` iteratee shorthand.
_.find(users, { 'age': 1, 'active': true });
// => object for 'pebbles'
 
// The `_.matchesProperty` iteratee shorthand.
_.find(users, ['active', false]);
// => object for 'fred'
 
// The `_.property` iteratee shorthand.
_.find(users, 'active');
// => object for 'barney'

• _.isEqual(value, other)

  So sánh 2 array, hoặc 2 object. Function này sử dung deep comparision, so sánh từng field của 2 object, hoặc từng phần tử của 2 array nên cho kết quả đúng như mong muốn.

var object = { 'user': 'fred' };
var other = { 'user': 'fred' };
 
object == other;// → false
_.isEqual(object, other);// → true
 
var array = ['hello', 'goodbye'];
var others = ['hello', 'goodbye'];
 
array == others;// → false
_.isEqual(array, others);// → true

• _.camelCase([string='']) , 

  _.capitalize([string='']),

  _.startCase([string='']),

  _.truncate([string=''], [options={}]),

  _.words([string=''], [pattern])

  Trên đây là một số hàm xử lý string khá hay ho.

  _.camelCase: Biến string thành chuỗi camel case
  _.capitalize: Viết hoa kí tự đầu của string
  _.startCase: Viết hoa các chữ cái đầu mỗi từ trong string
  _.truncate: Cắt string và thêm … vào cuối string nếu string quá dài
  _.words: Cắt các từ trong string, bỏ vào 1 mảng

_.camelCase('Foo Bar');
// => 'fooBar'
 
_.capitalize('FRED');
// => 'Fred'

_.startCase('--foo-bar--');
// => 'Foo Bar'
_.truncate('hi-diddly-ho there, neighborino', 24);
// → 'hi-diddly-ho there, n…'
_.words('fred, barney, & pebbles 123', /[^, ]+/g);
// => ['fred', 'barney', '&', 'pebbles']

Tổng kết

Lodash cung cấp rất nhiều chức năng để giúp bạn tiết kiệm thời gian. Thư viện này rất nhẹ, hiệu quả, phổ biến và được yêu thích (có hơn 42.900 starts trên Github). Nó được cập nhật rất thường xuyên. Trong phạm vi bài viết, mình chỉ giới thiệu được một số hàm cơ bản cũng như cách dùng cơ bản của Lodash. Trong quá trình sử dụng, các bạn có thể tìm hiểu thêm, cũng như chia sẻ những gì mình tìm được ở dưới comment hoặc channel Slack nhé.