Tổng hợp các Lodash functions mà chúng ta nên biết tới
This post hasn't been updated for 3 years
Lời nói đầu
Xin chào mọi người, nếu các bạn đã hoặc đang làm việc với javascript thì chắc hẳn đã biết đến Lodash. Đây là thư viện mạnh mẽ cung cấp performance rất cao với rất nhiều hàm để xử lý data, object, strings, number, array.... Ngoài ra, khi sử dụng Lodash chúng ta thấy code ngắn gọn, tiết kiệm thời gian và dễ maintain hơn. Thú thật là từ khi được join dự án ở công ty và làm quen với Lodash thì mình bị nghiện luôn, setup project nào cũng require Lodash vì nó rất là tiện :v
Lodash cung cấp cho chúng ta khá nhiều chức năng đa dạng, và được chia thành các nhóm như sau:
- Array
- Collection
- Date
- Function
- Lang
- Math
- Number
- Seq
- String
- Util
- Properties
- Methods
Giờ thì bạn hãy cài đặt Lodash và mình sẽ liệt kê ra một số lodash functions được sử dụng rất nhiều trong bất kỳ dự án nào có javascript nhé
Cài đặt
Với browser:
<script src="lodash.js"></script>
Sử dụng npm:
$ npm i -g npm
$ npm i --save lodash
Trong Node.js:
// Load the full build.
var _ = require('lodash');
// Load the core build.
var _ = require('lodash/core');
// Load the FP build for immutable auto-curried iteratee-first data-last methods.
var fp = require('lodash/fp');
// Load method categories.
var array = require('lodash/array');
var object = require('lodash/fp/object');
// Cherry-pick methods for smaller browserify/rollup/webpack bundles.
var at = require('lodash/at');
var curryN = require('lodash/fp/curryN');
Những function phổ biến
Object
1 _.get
_.get(object, path, [defaultValue])
_.get
sẽ lấy value theo path
của object
, nếu value là undefined
thì trả về defaultValue
.
var object = { 'a': [{ 'b': { 'c': 100 } }] };
_.get(object, 'a[0].b.c');
// => 100
_.get(object, ['a', '0', 'b', 'c']);
// => 100
_.get(object, 'a.b.c', 'default');
// => 'default'
2 _.set
_.set(object, path, value)
_.set
sẽ đặt một object
với value
mà bạn mong muốn. Bạn có thể truy cập vào một thuộc tính với đường dẫn path
của nó. Nếu đường dẫn path
không tồn tại, một object
sẽ được tạo mới.
var object = { 'a': [{ 'b': { 'c': 100 } }] };
_.set(object, 'a[0].b.c', 200);
console.log(object.a[0].b.c); // path exist
// => 200
_.set(object, ['x', '0', 'y', 'z'], 500);
console.log(object.x[0].y.z); // path doesn't exist
// => 500
3 _.findKey
_.findKey(object, [predicate=_.identity])
._findKey
sẽ trả về key của element đầu tiên thoả mãn được điều kiện của hàm callback ở tham số thứ 2.
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'
// 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'
4 _.mapValues
_.mapValues(object, [iteratee=.identity])
_.mapValues
sẽ trả về 1 object
mới bằng cách lặp qua các element của object
và value
mới là kết quả xử lý trong hàm callback ở tham số thứ 2.
var users = {
'fred': { 'user': 'fred', 'age': 40 },
'pebbles': { 'user': 'pebbles', 'age': 1 }
};
_.mapValues(users, function(o) { return o.age; });
// => { 'fred': 40, 'pebbles': 1 }
// The `_.property` iteratee shorthand.
_.mapValues(users, 'age');
// => { 'fred': 40, 'pebbles': 1 }
5 _.extend, _.assign and _.merge
Cả 3 hàm này đều thực hiện một chức năng là hợp nhất các object. Tuy nhiên, có một chút khác biệt.
_.extend/_.assign/_.merge(object, [sources])
_.extend
là alias của _.assign
, 2 hàm này giống nhau. Điểm khác nhau là _.assign
và _.extend
sẽ overwrite giá trị undefined
, còn _.merge
thì không.
_.assign ({}, { a: 'a' }, { a: undefined }) // => { a: undefined }
_.merge ({}, { a: 'a' }, { a: undefined }) // => { a: "a" }
Array
6 _.chunk
_.chunk(array, [size=option])
_.chunk
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.
_.chunk(['a', 'b', 'c', 'd'], 2);
// => [['a', 'b'], ['c', 'd']]
_.chunk(['a', 'b', 'c', 'd'], 3);
// => [['a', 'b', 'c'], ['d']]
7 _.difference
_.difference(array, [values])
_.difference
sẽ tạo một mảng chứa những phần tử khác nhau của hai array.
_.difference([2, 1], [2, 3]);
// => [1]
8 _.intersection
_.intersection([arrays])
_.intersection
sẽ lấy ra những phần tử giống nhau giữa 2 hay nhiều mảng.
_.intersection([2, 1], [2, 3]);
// => [2]
9 _.drop
_.drop(array, [n=1])
_.drop
sẽ tạo 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í thứ n, mặc định là n=1.
_.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]
10 _.findIndex
_.findIndex(array, [predicate=.identity], [fromIndex=0])
_.findIndex
sẽ trả về index của element đầu tiên thoả mãn được điều kiện của tham số thứ 2.
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
Collection
11 _.filter
_.filter(collection, [predicate=.identity])
_.filter
sẽ lặp qua tất cả các element và trả về 1 array gồm tất cả element thoả mãn điều kiện của hàm callback ở tham số thứ 2.
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']
12 _.find
_.find(collection, [predicate=.identity], [fromIndex=0])
_.find
sẽ lặp qua tất cả các element và trả về element đầu tiên thoả mãn điều kiện của hàm callback ở tham số thứ 2 chứ không như _.filter
sẽ lấy tất cả element thỏa mã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'
// 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'
13 _.includes
_.includes(collection, value, [fromIndex=0])
_.includes
sẽ tìm kiếm value có thuộc collection hay không, nếu có thì trả về true
, ngược lại trả về 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
14 _.forEach
_.forEach(collection, [iteratee=.identity])
_.forEach
sẽ tương tự với hàm foreach() mà chúng ta hay sử dụng, nó dùng để lặp qua mỗi phần tử của collection và xử lý với hàm callback.
_.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).
15 _.map
_.map(collection, [iteratee=.identity])
_.map
cũng giống với foreach lặp qua các phần tử trong danh sách nhưng khác là nó sẽ trả về một danh sách mới.
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']
Function
16 _.delay
_.delay(func, wait, [args])
_.delay
sẽ gọi function sau khi đợi một khoảng thời gian tùy chỉnh. Có thể truyền các đối số args
vào func
.
_.delay(function(text) {
console.log(text);
}, 1000, 'later');
// => Logs 'later' after one second.
17 _.debounce
_.debounce(func, [wait=0], [options={}])
_.debounce
sẽ gọi lại một function sau một khoảng thời gian nhất định kể từ lần cuối cùng function đó được gọi.
function validate() {
// Validate and show error message if not valid
}
var input = document.getElementById("input-field");
input.addEventListener("keyup", _.debounce(validate, 200));
Ở đây, thông báo lỗi sẽ không được hiển thị ngay lập tức vì validate()
sẽ được gọi sau 200ms. Khoảng thời gian đếm ngược 200ms sẽ reset mỗi khi người dùng nhập input. Vì thế người dùng sẽ không nhìn thấy thông báo lỗi cho đến khi thôi nhập.
Lang
Dưới đây là một số function được dùng để kiểm tra kiểu, giá trị của biến, và một số hàm dùng để convert dữ liệu:
_.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
_.toArray('abc');
// => ['a', 'b', 'c']
_.toString([1, 2, 3]);
// => '1,2,3'
_.toFinite(Number.MIN_VALUE);
// => 5e-324
_.toInteger(3.2);
// => 3
_.toLength(Infinity);
// => 4294967295
Tổng kết
Trên đây chỉ là một số ít các function mà Lodash xây dựng sẵn để hỗ trợ cho chúng ta. Còn rất nhiều các function hay ho khác mà mình không thể nào liệt kê hết ra đây được, tuy nhiên trong quá trình làm việc với nó thì đây là những function mà mình sử dụng nhiều nhất. Các bạn hãy vào document của Lodash để tham khảo và thực hành thêm nhé
All Rights Reserved