12/08/2018, 14:24

Giới thiệu thư viện Lodash

Trong bài viết này, mình xin giới thiệu một thư viện Javascript khá tiện lợi trong quá trình phát triển dự án Javascript - đó là Lodash. Lodash có thể xem là phiên bản mở rộng hơn của thư viện underscore, với nhiều chức năng và cho hiệu năng cao hơn. Các chức năng của Lodash được chia ra làm các ...

Trong bài viết này, mình xin giới thiệu một thư viện Javascript khá tiện lợi trong quá trình phát triển dự án Javascript - đó là Lodash.

Lodash có thể xem là phiên bản mở rộng hơn của thư viện underscore, với nhiều chức năng và cho hiệu năng cao hơn. Các chức năng của Lodash được chia ra làm các nhóm: nhóm xử lý Array, nhóm xử lý Object, nhóm xử lý Date, Function, Lang, Math, Number,.. Danh sách các chức năng cùng doc của Lodash có thể tìm thấy tại đây.

Functions trong nhóm xử lý String

_.camelCase: nhận argument là string và trả về string đã format theo dạng camel (lạcĐà)

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

_.camelCase('--foo-bar--');
// => 'fooBar'

_.split: tách 1 string theo mẫu (pattern) hay theo ký tự về thành mảng các ký tự.

_.split('a-b-c', '-', 2);
// => ['a', 'b']

_.pad, _.padLeft, _.padRight: Canh giữa, trái, phải string bằng cách thêm khoảng trắng vào string

_.trim, _.trimEnd, _.trimStart: loại bỏ khoảng trắng (white space) hoặc ký tự xác định nào đó ở 2 đầu, ở cuối hoặc ở đầu

_.trim('  abc  ');
// => 'abc'

_.trimStart('  abc  ');
// => 'abc  '

_.trimEnd('-_-abc-_-', '_-');
// => '-_-abc'

Function trong nhóm xử lý Array

_.concat: Tạo một array mới bằng cách nối các tham số lại với nhau

var array = [1];
var other = _.concat(array, 2, [3], [[4]]);

console.log(other);
// => [1, 2, 3, [4]]

_.difference(array, [values]): lọc ra những phần tử có mặt trong array mà không có mặt trong các đối số còn lại (values)

_.difference([2, 1], [2, 3]);
// => [1]

_.findIndex: tìm kiếm phần tử trong mảng và trả về index của phần tử đó trong mảng, trả về -1 nếu không tìm thấy.

var users = [
  { 'user': 'barney',  'active': false },
  { 'user': 'fred',    'active': false },
  { 'user': 'pebbles', 'active': true }
];

_.findIndex(users, function(o) { return o.user == 'barney'; });
// => 0

_.findIndex(users, { 'user': 'fred', 'active': false });
// => 1

_.flatten, _.flattenDeep: convert mảng n chiều về (n - 1) chiều với _.flatten và 1 chiều với _.flattenDeep

_.flatten([1, [2, [3, [4]], 5]]);
// => [1, 2, [3, [4]], 5]

_.flattenDeep([1, [2, [3, [4]], 5]]);
// => [1, 2, 3, 4, 5]

Function trong nhóm xử lý Object

_.keys: Trả về tên toàn bộ key của 1 object _.values: Trả về tên toàn bộ value của 1 object

var object = { 'user': 'fred', 'age': 40 };
_.keys(object);
// => ["user", "age"]

_.values(object);
// => ["fred", 40]

_.pick: Chỉ lấy 1 thuộc tính của object

_.omit: Bỏ 1 thuộc tính của object, lấy toàn bộ những thuộc tính còn lại

var object = { 'user': 'fred', 'age': 40 };

_.pick(object, 'user');
// => { 'user': 'fred' }

_.omit(object, 'age');
// => { 'user': 'fred' }

_.invert: Đảo ngược key-value của 1 object

var object = { 'a': 1, 'b': 2, 'c': 1 };

_.invert(object);
// => { '1': 'c', '2': 'b' }

Một số ultility function

_.isNil, _.isNull, _.isUndefined, _.isNumber, _.isObject, _.isInteger : là các function kiểm tra 1 giá trị có null hay undefined hay có phải là kiểu số hay object hay không.

_.isNull(null);
// → true

_.isFunction(_);
// → true
_.isFunction(/abc/);
// → false

_.isNumber(8.4);
// → true
_.isNumber(NaN);
// → true
_.isNumber('8.4');
// → false

_.isObject({});
// → true
_.isObject([1, 2, 3]);
// → true
_.isObject(1);
// → false

_.isEqual: function này 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

var object = { 'a': 1 };
var other = { 'a': 1 };

_.isEqual(object, other);
// => true

object === other;
// => false

_.isEmpty: Checks if value is an empty object, collection, map, or set. Kiểm tra 1 giá trị có là object rỗng hay không. Một object được coi là rỗng nếu nó không có thuộc tính enumerable string keyed

_.isEmpty(null);
// => true

_.isEmpty(true);
// => true

_.isEmpty(1);
// => true

_.isEmpty([1, 2, 3]);
// => false

_.isEmpty({ 'a': 1 });
// => false

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 dung cơ bản của lodash. Hi vọng với thư viện này, việc lập trình với JS với các lập trình viên sẽ trở nên dễ dàng và thú vị hơn nữa.

Nguồn tham khảo

  1. https://lodash.com/docs/4.17.3
0