EN VI

Lodash Tổng Hợp Những Hàm Thường Dùng Phổ Biến Kèm Theo Ví Dụ Minh Họa

1. Lodash là gì?

Thư viện Lodash là một thư viện JavaScript cung cấp nhiều phương thức tiện ích để thao tác với mảng, chuỗi, số và đối tượng trong JavaScript. Nó cung cấp các phương thức như map, filter, reduce, forEach,... giúp cho việc lập trình trở nên dễ dàng và nhanh chóng hơn. lodash được sử dụng rộng rãi trong các ứng dụng web và mobile.

2. Tổng Hợp Các Hàm Lodash Phổ Biến Thường Dùng Kèm Theo Ví Dụ Minh Họa:

_.map(array, [callback=identity]): Lặp qua từng phần tử của mảng và trả về một mảng mới được biến đổi bởi hàm callback.

const numbers = [1, 2, 3, 4, 5];
const squares = _.map(numbers, (num) => num * num);
console.log(squares); // [1, 4, 9, 16, 25]

_.filter(array, [callback=identity]): Lặp qua từng phần tử của mảng và trả về một mảng mới chứa các phần tử được lọc bởi hàm callback.

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = _.filter(numbers, (num) => num % 2 === 0);
console.log(evenNumbers); // [2, 4]

_.reduce(collection, [callback=identity], [accumulator]): Lặp qua từng phần tử của mảng hoặc đối tượng và tính toán giá trị kết hợp bằng cách sử dụng hàm callback.

const numbers = [1, 2, 3, 4, 5];
const sum = _.reduce(numbers, (total, num) => total + num, 0);
console.log(sum); // 15

_.forEach(collection, [callback=identity]): Lặp qua từng phần tử của mảng hoặc đối tượng và thực hiện hàm callback cho từng phần tử.

const numbers = [1, 2, 3, 4, 5];
_.forEach(numbers, (num) => console.log(num));
// in ra lần lượt các số: 1, 2, 3, 4, 5

_.groupBy(collection, [callback=identity]): Nhóm các phần tử của một mảng hoặc đối tượng thành một đối tượng mới dựa trên giá trị được trả về từ hàm callback.

const people = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 },
  { name: 'Charlie', age: 25 }
];
const groupedByAge = _.groupBy(people, 'age');
console.log(groupedByAge);
/*
{
  "25": [
    { "name": "Alice", "age": 25 },
    { "name": "Charlie", "age": 25 }
  ],
  "30": [
    { "name": "Bob", "age": 30 }
  ]
}
*/

.orderBy(collection, [iteratees=[.identity]], [orders]): Sắp xếp một mảng hoặc đối tượng theo một hoặc nhiều trường và thứ tự tương ứng.

const users = [
  { name: 'John', age: 23 },
  { name: 'Jane', age: 30 },
  { name: 'Bob', age: 25 }
];
const sortedUsers = _.orderBy(users, ['age', 'name'], ['asc', 'desc']);
console.log(sortedUsers);
/*
[
  { name: 'John', age: 23 },
  { name: 'Bob', age: 25 },
  { name: 'Jane', age: 30 }
]
*/

.find(collection, [predicate=.identity], [fromIndex=0]): Tìm kiếm và trả về phần tử đầu tiên trong mảng hoặc đối tượng thỏa mãn điều kiện được chỉ định bởi hàm predicate.

const users = [
  { name: 'John', age: 23 },
  { name: 'Jane', age: 30 },
  { name: 'Bob', age: 25 }
];
const user = _.find(users, { age: 30 });
console.log(user); // { name: 'Jane', age: 30 }

_.merge(object, [sources]): Hợp nhất các đối tượng theo cách đệ quy.

const object = {
  a: [{ b: 2 }, { d: 4 }]
};
const other = {
  a: [{ c: 3 }, { e: 5 }]
};
const merged = _.merge(object, other);
console.log(merged);
/*
{
  a: [{ b: 2, c: 3 }, { d: 4, e: 5 }]
}
*/

_.debounce(func, [wait=0], [options={}]): Trì hoãn việc gọi hàm func trong một khoảng thời gian nhất định sau khi hành động được thực hiện.

const log = _.debounce(console.log, 1000);
log('Hello'); // không in gì cả
setTimeout(() => log('World'), 1500); // in ra 'World' sau 1 giây

_.throttle(func, [wait=0], [options={}]): Giới hạn tần suất gọi hàm func trong một khoảng thời gian nhất định.

const log = _.throttle(console.log, 1000);
log('Hello'); // in ra 'Hello'
setTimeout(() => log('World'), 500); // không in gì cả
setTimeout(() => log('Again'), 1500); // in ra 'Again' sau 1 giây

_.zip(...arrays): Tạo ra một mảng mới bằng cách ghép các phần tử có cùng chỉ số từ các mảng được cung cấp.

const names = ['John', 'Jane', 'Bob'];
const ages = [23, 30, 25];
const zipped = _.zip(names, ages);
console.log(zipped); // [['John', 23], ['Jane', 30], ['Bob', 25]]

_.intersection(...arrays): Trả về một mảng mới chứa các phần tử chung của các mảng được cung cấp.

const arr1 = [1, 2, 3, 4];
const arr2 = [2, 4, 6, 8];
const arr3 = [1, 3, 5, 7];
const intersection = _.intersection(arr1, arr2, arr3);
console.log(intersection); // [1, 3]

_.uniq(array): Trả về một mảng mới chứa các phần tử duy nhất của mảng ban đầu.

const numbers = [1, 2, 3, 2, 4, 3, 5];
const uniqueNumbers = _.uniq(numbers);
console.log(uniqueNumbers); // [1, 2, 3, 4, 5]

_.chunk(array, [size=1]): Chia một mảng thành các mảng con có kích thước nhất định.

const numbers = [1, 2, 3, 4, 5, 6, 7, 8];
const chunks = _.chunk(numbers, 3);
console.log(chunks); // [[1, 2, 3], [4, 5, 6], [7, 8]]

_.isEmpty(value): Kiểm tra xem giá trị được cung cấp có rỗng hay không.

console.log(_.isEmpty(null)); // true
console.log(_.isEmpty(undefined)); // true
console.log(_.isEmpty('')); // true
console.log(_.isEmpty([])); // true
console.log(_.isEmpty({})); // true
console.log(_.isEmpty('hello')); // false
console.log(_.isEmpty([1, 2, 3])); // false
console.log(_.isEmpty({ a: 1 })); // false

_.clone(value): Sao chép giá trị được cung cấp.

const object = { a: 1, b: 2 };
const clone = _.clone(object);
console.log(clone); // { a: 1, b: 2 }

_.isEqual(value, other): So sánh hai giá trị và trả về true nếu chúng bằng nhau.

console.log(_.isEqual([1, 2, 3], [1, 2, 3])); // true
console.log(_.isEqual({ a: 1, b: 2 }, { a: 1, b: 2 })); // true
console.log(_.isEqual('hello', 'world')); // false

_.pick(object, [paths]): Trả về một đối tượng mới chỉ chứa các thuộc tính được chỉ định bởi mảng paths.

const object = { a: 1, b: 2, c: 3 };
const picked = _.pick(object, ['a', 'c']);
console.log(picked); // { a: 1, c: 3 }

_.omit(object, [paths]): Trả về một đối tượng mới không chứa các thuộc tính được chỉ định bởi mảng paths.

const object = { a: 1, b: 2, c: 3 };
const omitted = _.omit(object, ['b']);
console.log(omitted); // { a: 1, c: 3 }

_.random([lower=0], [upper=1], [floating]): Trả về một số ngẫu nhiên trong khoảng giá trị được chỉ định.

console.log(_.random(0, 1)); // 0 hoặc 1
console.log(_.random(1, 10)); // một số trong khoảng từ 1 đến 10
console.log(_.random(1.5, 1.9, true)); // một số thập phân trong khoảng từ 1.5 đến 1.9

Trên đây là một số hàm phổ biến khác trong lodash và giải thích chi tiết cùng với ví dụ minh họa. Lodash cung cấp rất nhiều phương thức tiện ích khác nhau để giúp cho việc lập trình trở nên dễ dàng và nhanh chóng hơn.

Rating: 10 (1 Votes)