+2

Đôi điều về lodash

1. Lodash

  • Lodash là một thư viện mạnh của Javascript, nó cung cấp nhiều tiện ích cho developer như cải thiện hiệu suất, đơn giản code, làm code trông dễ nhìn hơn. Lodash có tiền thân chính là underscore tuy nhiên hiệu năng đã được cải thiện hơn. Có thể nói răng lodash chính là LINQ trong Javascipt.
  • Lodash cung cấp nhiều chức năng chia theo các nhóm xử lý như sau:
    • Array
    • Collection
    • Date
    • Function
    • Lang
    • Math
    • Number
    • Object
    • Seq
    • String
    • Util
    • Properties
    • Methods
  • Tuy nhiên trong số mình xin được giới thiệu một vài chức năng mà mình thường dùng và thấy hay.

2. Giới thiệu một vài function

  • Function trong nhóm Array

_.chunk(array, [size=1]) : Phân chia một mảng thành nhiều mảng có cùng chiều dài, mảng phần tử cuối cùng là số phần tử còn lại nếu mảng không thể chia đều.

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

_.compact(array): Tạo ra một mảng mới mà loại bỏ tất cả các phần từ là null, 0, undefined, " " , NaN

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

_.difference(array, [values]): Lấy những phần tử không nằm trong [values] mà nằm trong array, nôm na thì là lấy những phần tử khác nhau của array và [values]

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

_.drop(array, [n=1]) Tạo ra một mảng mới bắt đầu từ vị trí n của mảng array.

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

.findIndex(array, [predicate=.identity], [fromIndex=0]): Tìm kiếm phần tử trong mảng và trả về index của phần tử tử đó. Index có giá trị -1 khi phần tử đó không tồn tại trong mảng

var users = [
  { 'user': 'barney',  'active': false },
  { 'user': 'fred',    'active': false },
  { 'user': 'pebbles', 'active': true }
];
_.findIndex(users, function(o) { return o.user == 'barney'; });
// => 0
 
// The `_.matches` iteratee shorthand.
_.findIndex(users, { 'user': 'fred', 'active': false });
// => 1
 
// The `_.matchesProperty` iteratee shorthand.
_.findIndex(users, ['active', false]);
// => 0
 
// The `_.property` iteratee shorthand.
_.findIndex(users, 'active');
// => 2

_.flatten(array): chuyển mảng có array level n thành level (n-1)

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

_.last(array): lấy phần tử cuối của mảng

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

.remove(array, [predicate=.identity]): remove các phần tử của mảng và trả về các phần tử bị loại bỏ

var array = [1, 2, 3, 4];
var evens = _.remove(array, function(n) {
  return n % 2 == 0;
});
 
console.log(array);
// => [1, 3]
 
console.log(evens);
// => [2, 4]

_.reverse(array): đảo ngược chiều mảng

var array = [1, 2, 3];
 
_.reverse(array);
// => [3, 2, 1]
 
console.log(array);
// => [3, 2, 1]
  • Function trong nhóm Collection

.filter(collection, [predicate=.identity]): for các phần tử trong collection và trả về mảng các phần tử mà predicate xác định true.

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

.find(collection, [predicate=.identity], [fromIndex=0]): for các phần tử của mảng và trả về phần tử đầu tiên mà predicate xác định true

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

_.includes(collection, value, [fromIndex=0]): kiểm tra value có tồn tại trong collection hay không. Giá trị trả về sẽ là true/false

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

.map(collection, [iteratee=.identity]): Tạo ra một mảng các giá trị bằng cách for từng phần tử trong collection thông qua iteratee.

function square(n) {
  return n * n;
}
 
_.map([4, 8], square);
// => [16, 64]
 
_.map({ 'a': 4, 'b': 8 }, square);
// => [16, 64] (iteration order is not guaranteed)
 
var users = [
  { 'user': 'barney' },
  { 'user': 'fred' }
];
 
// The `_.property` iteratee shorthand.
_.map(users, 'user');
// => ['barney', 'fred']

.reject(collection, [predicate=.identity]): ngược lại với _.filter, trả về mảng các phần tử mà predicate xác định false

var users = [
  { 'user': 'barney', 'age': 36, 'active': false },
  { 'user': 'fred',   'age': 40, 'active': true }
];
 
_.reject(users, function(o) { return !o.active; });
// => objects for ['fred']
 
// The `_.matches` iteratee shorthand.
_.reject(users, { 'age': 40, 'active': true });
// => objects for ['barney']
 
// The `_.matchesProperty` iteratee shorthand.
_.reject(users, ['active', false]);
// => objects for ['fred']
 
// The `_.property` iteratee shorthand.
_.reject(users, 'active');
// => objects for ['barney']

_.size(collection): trả về size của collection

_.size([1, 2, 3]);
// => 3
 
_.size({ 'a': 1, 'b': 2 });
// => 2
 
_.size('pebbles');
// => 7
  • Function trong nhóm Lang

_.isArray(value): Kiểm tra value có phải một array hay không, kết quả trả về là true/false

_.isArray([1, 2, 3]);
// => true
 
_.isArray(document.body.children);
// => false
 
_.isArray('abc');
// => false
 
_.isArray(_.noop);
// => false

_.isBoolean(value): Kiểm tra value có phải Boolean object hay không, kết quả trả về là true/false

_.isBoolean(false);
// => true
 
_.isBoolean(null);
// => false

_.isDate(value): Kiểm tra value có phải Date object hay không, kết quả trả về là true/false

_.isDate(new Date);
// => true
 
_.isDate('Mon April 23 2012');
// => false

_.isElement(value): Kiểm tra nếu giá trị có thể là một phần tử DOM, kết quả trả về là true/false

_.isElement(document.body);
// => true
 
_.isElement('<body>');
// => false

_.isEqual(value, other): So sánh 2 phần tử other và value

var object = { 'a': 1 };
var other = { 'a': 1 };
 
_.isEqual(object, other);
// => true
 
object === other;
// => false
  • Function trong nhóm Math

_.max(array): trả về phần tử lớn nhất của array

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

_.mean(array):Tính giá trị trung bình của các giá trị trong mảng

_.mean([4, 2, 8, 6]);
// => 5

_.min(array): trả về phần tử nhỏ nhất của array

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

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

_.sum([4, 2, 8, 6]);
// => 20
  • Function trong nhóm String

_.camelCase([string='']): convert từ camelCase sang camelcase

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

_.lowerCase([string='']): chuyển đổi chuỗi thành chữ thường

_.lowerCase('--Foo-Bar--');
// => 'foo bar'
 
_.lowerCase('fooBar');
// => 'foo bar'
 
_.lowerCase('__FOO_BAR__');
// => 'foo bar'

_.snakeCase([string='']): chuyển đôỉ từ chuỗi snakeCase sang chuỗi snakecase

_.snakeCase('Foo Bar');
// => 'foo_bar'
 
_.snakeCase('fooBar');
// => 'foo_bar'
 
_.snakeCase('--FOO-BAR--');
// => 'foo_bar'

3. Tài liệu tham khảo

Trong bài này mình chỉ giới thiệu một phần các tính năng Lodash, nếu muốn biết chi tiết hãy tham khảo tài liệu này nhé https://lodash.com/docs/4.17.4


All rights reserved

Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí