Giới thiệu về Lodash và một số hàm thường dùng

Giới thiệu

Nếu bạn đang sử dụng các công nghệ JavaScript như Nodejs, Reactjs, Vuejs..v..v và đã đã từng xử lý những mảng object như thế này với JavaScript thì mình nghĩ bạn nên biết về Lodash.

[ { name : 'Nguyen Van A' }, { name : 'Tran Van B' }, { name : 'Hoang Thi C' }, .... ] 

Và một khi bạn thử dùng qua một vài hàm của Lodash, đảm bảo bạn sẽ bị nghiện và không thể thiếu nó trong các projects của bạn. Mình cũng vậy, dùng thử một vài lần đâm lười, lúc nào setup project là cũng Lodash cho nó nhanh. Qua bài viết này minh xin giới thiệu về Lodash và một số hàm cơ bản để bạn nào chưa biết đến Lodash có thể hình dung Lodash dùng để làm gì…

[external_link_head]

Lodash

Lodash là một thư viện JavaScript mạnh mẽ dùng để xử lý Array, Object, Function, Collection ..v.v. Các hàm tiện ích được chia làm 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 nó để xem chi tiết ở đây

Một số function làm việc với mảng

_.join(array, [separator=',']) Chuyển mảng sang string ngăng cách các phần tử bởi ký tự bạn truyền vào, ví dụ:

_.join(['a', 'b', 'c'], '~'); // => 'a~b~c' 

_.last(array) Lấy phần tử cuối cùng trong mảng, ví dụ:

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

_.chunk(array, [size= option ]) Tạo một mảng mới từ mảng đã có, gồm các mảng con có số phần tử tùy chọn truyền vào. Ví dụ cho dễ hiểu:

[external_link offset=1]

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

_.fill(array, value, [start=0], [end=array.length]) Ghi đè phần tử vào mảng từ vị trí bắt đầu đến trước vị trí kết thúc. Ví dụ :

var array = [1, 2, 3]; _.fill(array, 'a'); console.log(array); // => ['a', 'a', 'a'] _.fill(array, 2); // => [2, 2, 2] _.fill([4, 6, 8, 10], '*', 1, 3); // => [4, '*', '*', 10] 

_.findIndex(array, [predicate=_.identity], [fromIndex=0]) Hàm này cho phép chúng ta tìm phần tử trong mảng với điều kiện xác định. Và trả về vị trí của phần tử đó trong mảng. Ví dụ bạn có mảng các json object như sau :

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

Bạn muốn tìn phần tử có 'user' == 'barney'. Bạn sử dụng

_.findIndex(users, function(o) { return o.user == 'barney'; }); // Kết quả trả về: 0 

_.drop(array, [n=1]) Tạo một mảng mới cắt đi n phần tử từ mảng đầu vào, tính từ vị trí bắt đầu. Ví dụ:

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

…. Và còn rất nhiều tiện ích khác nữa giúp bạn làm việc với mảng trong JavaScript một cách ngắn gọn, thuận tiện và nhanh chóng. Bạn hãy tham khảo thêm tại document của nó nhé.

Một số hàm làm việc với Collection

_.filter(collection, [predicate=_.identity]) Lặp qua tất cả các phần tử trong mảng, tìm phần tử với điều kiện xác định. Và trả về phần tử tìm được nếu có. Ví dụ

var users = [ { 'user': 'barney', 'age': 36, 'active': true }, { 'user': 'fred', 'age': 40, 'active': false } ]; _.filter(users, function(o) { return !o.active; }); // Tìm phần tử trong mảng có 'active' == 'false' // => { 'user': 'fred', 'age': 40, 'active': false } 

_.find(collection, [predicate=_.identity], [fromIndex=0]) Tương tư như hàm _.filter _.size(collection) Lấy ra số phần tử của collection. Ví dụ :

_.size([1, 2, 3]); // => 3 _.size({ 'a': 1, 'b': 2 }); // => 2 

_.sortBy(collection, [iteratees=[_.identity]]) Hàm này chắc bạn cũng đoán được, nó dùng để sắp xếp collection theo điều kiện xác định. Ví dụ:

[external_link offset=2]

var users = [ { 'user': 'fred', 'age': 48 }, { 'user': 'barney', 'age': 36 }, { 'user': 'fred', 'age': 40 }, { 'user': 'barney', 'age': 34 } ]; _.sortBy(users, [function(o) { return o.user; }]); // => objects for [['barney', 36], ['barney', 34], ['fred', 48], ['fred', 40]] _.sortBy(users, ['user', 'age']); // => objects for [['barney', 34], ['barney', 36], ['fred', 40], ['fred', 48]] 

_.includes(collection, value, [fromIndex=0]) Kiểm tra xem các giá trị ta truyền vào có nằm trong collection hay không. Nếu có trả về true và ngược lại. VÍ Dụ

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

….

Một số hàm làm việc với object

_.has(object, path) Kiểm tra xem có key, value, hoặc một phần tử có tồn tại trong object hay không. Ví Dụ

var object = { 'a': { 'b': 2 } }; var other = _.create({ 'a': _.create({ 'b': 2 }) }); _.has(object, 'a'); // => true _.has(object, 'a.b'); // => true _.has(object, ['a', 'b']); // => true _.has(other, 'a'); // => false 

_.findKey(object, [predicate=_.identity]) Tìm và trả về key của một phần tử trong oject, có thể tìm bằng key name, hoặc tìm value và sau đó trả về key. Ví dụ :

var users = { 'barney': { 'age': 36, 'active': true }, 'fred': { 'age': 40, 'active': false }, 'pebbles': { 'age': 1, 'active': true } }; _.findKey(users, function(o) { return o.age < 40; }); // => 'barney' (iteration order is not guaranteed) // The `_.matches` iteratee shorthand. _.findKey(users, { 'age': 1, 'active': true }); // => 'pebbles' // The `_.matchesProperty` iteratee shorthand. _.findKey(users, ['active', false]); // => 'fred' // The `_.property` iteratee shorthand. _.findKey(users, 'active'); // => 'barney' 

_.pick(object, [paths]) Tạo một mảng từ mảng đã có bằng cách lấy ra các phần tử xác định. Ví dụ:

var object = { 'a': 1, 'b': '2', 'c': 3 }; _.pick(object, ['a', 'c']); // => { 'a': 1, 'c': 3 } 

Tạm kết

Qua bài viết trên mình muốn giới thiệu về một thư viện Javascript cực kỳ nổi tiếng là Lodash. Mong các bạn nào chưa biết có thể có thêm một công cụ tiện ích để làm việc với các projects javascript của mình một cách nhanh chóng và thoải mái… Lodash gồm rất nhiều hàm tiện ích có sẵn, qua một bài viết không thể nào liệt kê và giới thiệu hết được, những ví dụ trên chỉ mang tính giới thiệu cho bạn nào chưa biết để dễ hình dung Lodash là gì và làm việc như thế nào thôi. Bạn nào muốn tìm và dùng thêm những tiện ích khác, có thể vào document của Lodash để tham khảo thêm nhé… [external_footer]