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: https://lodash.com/docs
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
http://jsbin.com/fijubokiqe/1/edit?js,console,output
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);// → trueMộ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 guarante_.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ình luận