Đơn giản hóa code và tăng hiểu quả cho JavaScript với Lodash

Hôm nay mình xin giới thiệu với các bạn một thư viện vô cùng bá đạo có tên là "Lodash". Đảm bảo rằng chỉ cần dùng thử một lần thì nó sẽ là thư viện không thể thiếu trong các dự án của bạn .

"A modern JavaScript utility library delivering modularity, performance & extras." Lodash có thể xem là một phiên bản mở rộng hơn của thư viện underscore - một thư viện javascript cũng khá là nổi tiếng nhưng nó có nhiều chức năng hơn và performance cao hơn hẳn underscore. Lodash cung cấp khá nhiều chức năng, và được chia thành các nhóm như sau:

• Array
• Collection
• Date
• Function
• Lang
• Math
• Number
• Seq
• String
• Util
• Properties
• Methods

Một số hàm của Array

Lodash hỗ trợ trợ rất nhiều hàm xử lý array, giúp việc xủ lý array trở lên đơn giản hơn rất nhiều. _.chunk(array, [size=1]): Tạo ra mảng từ các phần tử được chia thành các nhóm với độ dài xác định

_.chunk(['a', 'b', 'c', 'd'], 2);
// => [['a', 'b'], ['c', 'd']]
 
_.chunk(['a', 'b', 'c', 'd'], 3);
// => [['a', 'b', 'c'], ['d']]

_.compact(array): Trả về mảng mới đã được lọc các giá trị như : false, null, 0, "", undefined, and NaN

_.compact([0, 1, false, 2, ', 3]);
// => [1, 2, 3]

_.concat(array, [values]): Tạo một mảng mới bằng việc kết hợp với bất cứ mảng nào hoặc giá trị nào.

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

_.difference(array, [values]): Lấy những phần tử khác nhau của hai array.

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

_.drop(array, [n=1]): Tạo ra một mảng mới với việc xóa bỏ các phần từ vị trí đầu tiên đến vị trí số n đã được cài đặt

_.drop([1, 2, 3]);
// => [2, 3]
 
_.drop([1, 2, 3], 2);
// => [3]
 
_.drop([1, 2, 3], 5);
// => []
 
_.drop([1, 2, 3], 0);
// => [1, 2, 3]

_.intersection([arrays]): Lấy những phần tử giống nhau giữa 2 hay nhiều mảng.

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

_.union([arrays]): Hợp hai hay nhiều mảng với nhau

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

.findIndex(array, [predicate=.identity], [fromIndex=0]): Tìm index của phần tử đầu tiên thỏa mãn điều kiện

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
 
_.findIndex(users, ['active', false]);
// => 0
 
// The `_.property` iteratee shorthand.
_.findIndex(users, 'active');
// => 2

Một số hàm của Collection

.forEach(collection, [iteratee=.identity]): Lặp lại các phần tử của mảng và trả về các phần từ của mảng

_.forEach([1, 2], function(value) {
  console.log(value);
});
// => Logs `1` then `2`.
 
_.forEach({ 'a': 1, 'b': 2 }, function(value, key) {
  console.log(key);
});
// => Logs 'a' then 'b' (iteration order is not guaranteed).

.filter(collection, [predicate=.identity]): Lặp lại các phần tử của mảng với các điều kiện lọc và trả về một mảng mới đã được lọc.

var users = [
  { 'user': 'barney', 'age': 36, 'active': true },
  { 'user': 'fred',   'age': 40, 'active': false }
];
 
_.filter(users, function(o) { return !o.active; });
// => objects for ['fred']
 
_.filter(users, { 'age': 36, 'active': true });
// => objects for ['barney']
 
_.filter(users, ['active', false]);
// => objects for ['fred']
 
_.filter(users, 'active');
// => objects for ['barney']

.find(collection, [predicate=.identity], [fromIndex=0]): Lặp lại tất cả phần tử của mảng và trả về phần tử đầu tiên thỏa mãn điều kiện

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'
 
_.find(users, { 'age': 1, 'active': true });
// => object for 'pebbles'
 
_.find(users, ['active', false]);
// => object for 'fred'
 
_.find(users, 'active');
// => object for 'barney

_.includes(collection, value, [fromIndex=0]): Kiểm tra xem phần tử có tồn tại trong mảng, hay string có tồn tại hay không.... Trả về true nếu tìm thấy còn false nếu không thấy .

_.includes([1, 2, 3], 1);
// => true
 
_.includes([1, 2, 3], 1, 2);
// => false
 
_.includes({ 'a': 1, 'b': 2 }, 1);
// => true
 
_.includes('abcd', 'bc');
// => true

.orderBy(collection, [iteratees=[.identity]], [orders]): Sort mảng

var users = [
  { 'user': 'fred',   'age': 48 },
  { 'user': 'barney', 'age': 34 },
  { 'user': 'fred',   'age': 40 },
  { 'user': 'barney', 'age': 36 }
];
 
// Sort by `user` in ascending order and by `age` in descending order.
_.orderBy(users, ['user', 'age'], ['asc', 'desc']);
// => objects for [['barney', 36], ['barney', 34], ['fred', 48], ['fred', 40]]

Một số hàm của Lang

_.isUndefined, _.isNull, _.isFunction, _.isNumber, _isObject: Đây là một số function để kiểm tra kiểu của biến, cũng như xem biến có undefined, null hay ko?

_.isNull(null);
// ➜ true

_.isNull(void 0);
// ➜ false

_.isNumber(3);
// ➜ true

_.isNumber(Number.MIN_VALUE);
// ➜ true

_.isNumber(Infinity);
// ➜ true

_.isNumber('3');
// ➜ false

_.isObject({});
// ➜ true

_.isObject([1, 2, 3]);
// ➜ true

_.isObject(_.noop);
// ➜ true

_.isObject(null);
// ➜ false

_.isUndefined(void 0);
// ➜ true

_.isUndefined(null);
// ➜ false

_.isDate(new Date);
// ➜ true

_.isDate('Mon April 23 2012');
// ➜ false

Một số hàm của String

_.camelCase: Biến string thành chuỗi camel case. _.capitalize: Viết hoa kí tự đầu của string. _.pad, _.padLeft, _.padRight: Canh giữa, trái, phải string bằng cách thêm khoảng trắng vào string.

_.camelCase('Foo Bar');
// → 'fooBar'
_.camelCase('--foo-bar');
// → 'fooBar'
 
_.capitalize('fred');
// → 'Fred'
 
_.pad('abc', 8);
// → ' abc '
_.padLeft('abc', 6);
// → ' abc'

_.startCase: Viết hoa các chữ cái đầu mỗi từ trong string, khá hay. _.startsWith, _.endsWith: Kiểm tra chuỗi đưa vào có phải nằm ở đầu/cuối string cần so sánh hay ko.

_.startCase('--foo-bar');
// → 'Foo Bar'
_.startCase('fooBar');
// → 'Foo Bar'
 
_.startsWith('abc', 'a');
// → true
_.startsWith('abc', 'b');
// → false
 
_.endsWith('abc', 'c');
// → true
_.endsWith('abc', 'b');
// → false

_.trim, _.trimLeft, _.trimRight: Bỏ khoảng trắng. _.trunc: 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.

_.trim(' abc ');
// → 'abc'
 
_.trunc('hi-diddly-ho there, neighborino', 24);
// → 'hi-diddly-ho there, n…'
 
_.words('fred, barney, & pebbles');
// → ['fred', 'barney', 'pebbles']

Một số hàm của Math

_.add(augend, addend): Cộng 2 số và trả về tổng của 2 số

_.add(6, 4);
// => 10

_.ceil(number, [precision=0]): Tính toán làm tròn số lên với độ chính xác.

_.ceil(4.006);
// => 5
 
_.ceil(6.004, 2);
// => 6.01
 
_.ceil(6040, -2);
// => 6100

_.divide(dividend, divisor): Chia 2 số

_.divide(6, 4);
// => 1.5

_.floor(number, [precision=0]): Tính toán làm tròn số xuống với độ chính xác.

_.floor(4.006);
// => 4
 
_.floor(0.046, 2);
// => 0.04
 
_.floor(4060, -2);
// => 4000

_.max(array) : Tìm phần tử có giá trị lớn nhất, nếu mà mảng đấy rỗng thì trả về là undefined

_.max([4, 2, 8, 6]);
// => 8
 
_.max([]);
// => undefined

_.round(number, [precision=0]): Làm tròn số với độ chính xác

_.round(4.006);
// => 4
 
_.round(4.006, 2);
// => 4.01
 
_.round(4060, -2);
// => 4100

_.subtract(minuend, subtrahend): Trừ 2 số

_.subtract(6, 4);
// => 2

_.sum(array):Tính tổng các giá trị của mảng.

_.sum([4, 2, 8, 6]);
// => 20

Trên đấy là mình đã giới thiệu một số hàm hay được sử dụng nhất khi mình dùng với thư viện Lodash. Mọi người có thể tìm hiểu kỹ hơn tại đây.