Tăng sức mạnh cho javascript với lodash

Lần này mình sẽ giới thiệu 1 thư viện javascript vô cùng bá đạo có tên là "lodash", có thể nói nó là LINQ trong javascript. Đảm bảo chỉ sau 1 lần dùng thử, thư viện này sẽ trở thành thư viện không thể thiếu trong mỗi project javascript của bạn.

1. Giới thiệu tổng quan về lodash

Tiền thân của lodash là underscore – một thư viện javascript cũng khá nổi tiếng (Bạn nào hỏi: Nổi tiếng sao mình ko biết?… vui lòng đi chỗ khác chơi nhé :)). Có thể xem lodash là 1 bản mở rộng, với nhiều chức năng hơn, performance cao hơn underscore.

Lodash cung cấp rất nhiều chức năng, chia làm vài nhóm như: chức năng linh tinh (check null, underfine, ..), chức năng hỗ trợ xử lý string, chức năng xử lý object, chức năng xử lý array. Vì phạm vi bài viết có hạn, mình chỉ ví dụ và đưa ra một số chức năng chính, các bạn có thể thao khảo danh sách API full của lodash ở đây:

2. Demo – 1 số function của string và function linh tinh

Đây là trang fiddle mẫu mình đã include lodash sẵn, các bạn có thể vào và code theo các ví dụ mình cung cấp để chạy thử code

Các chức năng linh tinh của lodash:

_.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

_.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: 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 nhé.

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

Một số function 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 (Chức năng khá hay)

_.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']

3. Một số function của object

_.functions: Trả về tên toàn bộ những function của 1 object

//Trả những function của lodash
_.functions(_);
// → ['after', 'ary', 'assign', …]

_.has: Kiểm tra xem 1 object có property, hoặc function với tên truyền vào hay ko

_.keys: Trả về tên toàn bộ những thuộc tính của 1 object

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

_.has(object, 'b');
// → true

function Foo() {
 this.a = 1;
 this.b = 2;
}

Foo.prototype.c = 3;

_.keys(new Foo);
// → ['a', 'b'] (iteration order is not guaranteed)

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

4. Một số function của array

Như đã nói, lodash hỗ trợ rất nhiều hàm xử lý array, giúp việc xử lý array đơn giản hơn rất nhiều. Một lưu ý trong lodash, có 2 kiểu để gọi hàm với array như sau:

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

//Kiểu 1, gọi như 1 function bình thường
// _.tên hàm(tên mảng, các tham số khác)
_.filter(users, 'active', false)
//[{ 'user': 'barney', 'age': 36, 'active': true }];

//Kiểu 2, wrap array vào rồi gọi hàm
// _(tên mảng).tên hàm(các tham số khác)
_(users).filter('active', false).value()
//[{ 'user': 'barney', 'age': 36, 'active': true }];

//Mình khuyên dung kiểu gọi 2, vì ta
//có thể thực hiện chaining (gọi nhiều hàm lần lượt)
//Tuy nhiên ta phải thêm value() ở cuối chain
_(users).filter('active', false).pluck('user').value();
//[{'user': 'barney' }]

Dưới đây là một số hàm xử lý array khá hữu dụng:

_.difference: Lấy những phần tử khác nhau giữa 2 array

_.intersection: Lấy những phần tử giống nhau giữa 2 hoặc nhiều array

_.union: Hợp 2 hoặc nhiều array lại với nhau

_.difference([1, 2, 3], [4, 2]);
// → [1, 3]

_.intersection([1, 2], [4, 2], [2, 1]);
// → [2]

_.union([1, 2], [4, 2], [2, 1]);
// → [1, 2, 4]

_.findIndex: Tìm index của phần tử đầu tiên thỏa điều kiện

_.find: Tìm 1 phần tử trong array

_.first, _.last: lấy phần tử đầu tiên và cuối cùng của array

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

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

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

_.result(_.find(users, function(chr) {
 return chr.age < 40;
}), 'user');
// → 'barney'

_.first([1, 2, 3]);
// → 1

_.last([1, 2, 3]);
// → 3

_.flatten: Làm dẹp array (Nếu array có chứa array thì cho ra 1 array duy nhất)

_.shuffle: Tương tự như xóc bài, tạo ra 1 array mới, chứa các phần tử của array cũ theo thứ tự ngẫu nhiên

_.flatten([1, [2, 3, [4]]]);
// → [1, 2, 3, [4]];

// using `isDeep`
_.flatten([1, [2, 3, [4]]], true);
// → [1, 2, 3, 4];

_.shuffle([1, 2, 3, 4]);
// → [4, 1, 3, 2]

_.some, _.any: Tương tự như every và some mình đã giới thiệu ở bài trước.

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. Trong quá trình sử dung, 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 ở đây nhé.

Bài gốc : Blog Tôi đi code dạo.