- vừa được xem lúc

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

0 0 15

Người đăng: Truong Dang

Theo Viblo Asia

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 lom lom require 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ì...

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:

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

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

Bình luận

Bài viết tương tự

- vừa được xem lúc

Giới thiệu Typescript - Sự khác nhau giữa Typescript và Javascript

Typescript là gì. TypeScript là một ngôn ngữ giúp cung cấp quy mô lớn hơn so với JavaScript.

0 0 525

- vừa được xem lúc

Cài đặt WSL / WSL2 trên Windows 10 để code như trên Ubuntu

Sau vài ba năm mình chuyển qua code trên Ubuntu thì thật không thể phủ nhận rằng mình đã yêu em nó. Cá nhân mình sử dụng Ubuntu để code web thì thật là tuyệt vời.

0 0 397

- vừa được xem lúc

Đặt tên commit message sao cho "tình nghĩa anh em chắc chắn bền lâu"????

. Lời mở đầu. .

1 1 738

- vừa được xem lúc

Tìm hiểu về Resource Controller trong Laravel

Giới thiệu. Trong laravel, việc sử dụng các route post, get, group để gọi đến 1 action của Controller đã là quá quen đối với các bạn sử dụng framework này.

0 0 358

- vừa được xem lúc

Phân quyền đơn giản với package Laravel permission

Như các bạn đã biết, phân quyền trong một ứng dụng là một phần không thể thiếu trong việc phát triển phần mềm, dù đó là ứng dụng web hay là mobile. Vậy nên, hôm nay mình sẽ giới thiệu một package có thể giúp các bạn phân quyền nhanh và đơn giản trong một website được viết bằng PHP với framework là L

0 0 450

- vừa được xem lúc

Bạn đã biết các tips này khi làm việc với chuỗi trong JavaScript chưa ?

Hi xin chào các bạn, tiếp tục chuỗi chủ đề về cái thằng JavaScript này, hôm nay mình sẽ giới thiệu cho các bạn một số thủ thuật hay ho khi làm việc với chuỗi trong JavaScript có thể bạn đã hoặc chưa từng dùng. Cụ thể như nào thì hãy cùng mình tìm hiểu trong bài viết này nhé (go).

0 0 433