Giới thiệu về Lodash và lợi ích của nó dành cho nhà phát triển JavaScript

Lodash là một thư viện JavaScript cung cấp các hàm tiện ích cho các tác vụ lập trình điển hình sử dụng mô hình lập trình hàm.

Thư viện hoạt động với trình duyệt web và Node.js, có thể sửa đổi và chuyển đổi dữ liệu, thực hiện các hoạt động không đồng bộ, v.v.

Tìm hiểu cách sử dụng lodash để thao tác với mảng, chuỗi và đối tượng cũng như tìm hiểu về các tính năng nâng cao của nó như thành phần hàm.

Bắt đầu với Lodash

Bạn có thể thêm lodash vào ứng dụng của mình theo một trong hai cách: sử dụng Mạng phân phối nội dung (CDN) hoặc cài đặt lodash bằng npm hoặc yarn.

Để sử dụng lodash trực tiếp trong trình duyệt, hãy sao chép liên kết CDN của lodash bên dưới và chèn nó vào phần đầu của tệp HTML của bạn:

 <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"
  type="text/javascript"></script>
 

Sử dụng phương pháp này, bạn có thể chạy tập lệnh bằng cách sử dụng lodash trong phần nội dung HTML của mình.

Để sử dụng lodash trong dự án Node.js, bạn nên cài đặt nó trong thư mục dự án của mình. Bạn có thể sử dụng npm hoặc yarn để làm như vậy:

 npm install --save lodash
# or
yarn add lodash
 

Bây giờ bạn có thể sử dụng lodash bằng cách yêu cầu nó trong tệp JavaScript của mình:

 
const _ = require("lodash");

const numbers = [10, 20, 30, 40, 50];
const sum = _.sum(numbers);
console.log(sum);
 

Để chạy tệp JavaScript của bạn, hãy nhập nút lệnh:

 node [Your script name]
 

Thao tác mảng trong Lodash

Lodash đi kèm với một tập hợp các phương thức để thao tác mảng cung cấp chức năng ngoài lớp Array tích hợp sẵn của JavaScript.

.chunk

Phương pháp này chia một mảng thành các nhóm mảng nhỏ hơn có kích thước nhất định. Đoạn cuối cùng có thể nhỏ hơn kích thước bạn yêu cầu.

Đây là một ví dụ:

 const array = [ 'a', 'b', 'c', 'd', 'e', 'f', 'g' ];
const newArray = _.chunk(array, 2)
console.log(newArray) 

.concat

Phương thức này tạo ra một mảng mới bằng cách nối các giá trị vào cuối của một mảng hiện có.

Ví dụ:

 const array = [ 1, 2, 'a' ];
const newArray = _.concat(array, 5, 'b', [ 8 ], [ [ 9 ] ]);
console.log(newArray); 

.tham gia

Phương thức này trả về một chuỗi bằng cách kết hợp các phần tử của một mảng. Nó kết hợp chúng bằng cách sử dụng dấu phân cách mà bạn chuyển làm tham số khi gọi phương thức. Dấu phân cách mặc định mà nó sử dụng là dấu phẩy:

 const array = [ "l", "o", "d", "a", "s", "h" ];
const newArray = _.join(array);
console.log(newArray);
const newArray = _.join(array, "-");
console.log(newArray);

// l-o-d-a-s-h
 

Thao tác chuỗi trong Lodash

Với JavaScript trần, định dạng chuỗi là một quy trình đơn giản. Nhưng lodash làm cho nó dễ dàng hơn.

Một số thao tác thao tác chuỗi phổ biến nhất mà bạn có thể thực hiện với lodash bao gồm:

.startsWith và .endsWith

Hai phương thức này kiểm tra xem một chuỗi bắt đầu hay kết thúc bằng một chuỗi con tương ứng. Cả hai phương thức đều trả về giá trị boolean là true hoặc false.

Ví dụ:

 const string = "lodash";
console.log(_.startsWith(string, "l"));
console.log(_.startsWith(string, "o"));
console.log(_.endsWith(string, "m"));
console.log(_.endsWith(string, "h"));
 

.nói lại

Phương pháp này lặp đi lặp lại in một chuỗi một số lần cụ thể. Nó lấy chuỗi làm đối số đầu tiên và số lần lặp lại làm đối số thứ hai:

 const string = "lodash"
const newString = _.repeat(string, 3);
console.log(newString);
 

.trim

Phương pháp này loại bỏ khoảng trắng ở đầu và cuối. Bạn cũng có thể sử dụng nó để xóa bất kỳ ký tự cụ thể nào ở đầu và cuối chuỗi.

Ví dụ:

 
const string = " bar "
const newString = _.trim(string)
console.log(newString);

const string = ",bar,"
const newString = _.trim(string, "https://www.smartreviewaz.com/lodash-javascript-introduction-benefits/,")
console.log(newString);
 

Thao tác đối tượng trong Lodash

Dưới đây là một số ví dụ về thao tác chuỗi mà bạn có thể thực hiện với lodash:

.merge

Các _.merge() phương thức tạo một đối tượng mới bằng cách kết hợp các thuộc tính của các đối tượng đầu vào. Giá trị của thuộc tính từ đối tượng sau sẽ thay thế giá trị từ đối tượng trước đó nếu thuộc tính có trong nhiều đối tượng.

Ví dụ:

 const books = {
    'Mathematics': 4, 
    'Science': 7 
};
   
const notes = {
    'Science': 3 , 
    'Chemistry': 5 
};
_.merge(books, notes);
console.log(books);
 

Trong ví dụ này, phương thức thêm thuộc tính ‘Hóa học’ từ đối tượng thứ hai và ghi đè giá trị của thuộc tính ‘Khoa học’ của đối tượng thứ nhất.

.có

Phương thức này trả về true nếu một loạt thuộc tính nhất định tồn tại trong một đối tượng và trả về false nếu không.

Ví dụ:

 const books = {
    'Mathematics': 4, 
    'Science': 7 
};
console.log(_.has(books, "Mathematics"));
 

.bỏ sót

Phương thức này trả về một đối tượng mới bằng cách loại bỏ các thuộc tính đã chỉ định khỏi đối tượng đã cho.

Ví dụ:

 var books = {
    'Mathematics': 4, 
    'Science': 3 , 
    'Chemistry': 5 
};
   
console.log(_.omit(books, "Science"));
 

Thành phần chức năng trong Lodash

Thành phần chức năng là một kỹ thuật bạn có thể sử dụng trong ngôn ngữ lập trình chức năng. Nó liên quan đến việc kết hợp hai hoặc nhiều chức năng thành một chức năng mới bằng cách gọi từng chức năng theo một thứ tự cụ thể. Tính năng này cho phép bạn tạo logic phức tạp hơn từ các chức năng đơn giản hơn.

Để áp dụng kỹ thuật này, lodash đi kèm với _.lưu lượng và _.flowRight chức năng. Các _.lưu lượng() hàm chấp nhận một danh sách các hàm làm đối số và xuất ra một hàm mới áp dụng các hàm theo cùng thứ tự mà bạn chuyển chúng vào. _.flowRight() chức năng cũng làm như vậy, nhưng nó gọi các chức năng ngược lại.

Ví dụ:

 function addFive(number) {
    return number + 5
}
function timesTwo(number) {
    return number * 2
}
const addFiveAndTimesTwo = _.flow([addFive, timesTwo]);
const addFiveAndTimesTwoReverse = _.flowRight([addFive, timesTwo]);
console.log(addFiveAndTimesTwo(3));
console.log(addFiveAndTimesTwoReverse(3));
 

Đoạn mã trên định nghĩa các chức năng thêmFive và lầnHai. Hàm addFive trả về kết quả cộng 5 vào một số đã cho. Hàm timesTwo nhân một số đầu vào với 2 và trả về kết quả.

Đoạn mã sau đó sử dụng _.lưu lượng() chức năng để kết hợp hai cái khác và tạo ra chức năng mới, thêmFiveAndTimesTwo. Hàm mới này trước tiên sẽ thực hiện thao tác addFive trên đối số của nó trước khi thực hiện thao tác timesTwo trên kết quả cuối cùng.

Các _.flowRight() chức năng tạo ra một chức năng mới hoạt động giống như luồng, nhưng ngược lại.

Cuối cùng, đoạn mã này gọi hai hàm mới, chuyển 3làm đối số và ghi kết quả vào bảng điều khiển.

Lợi ích khi làm việc với Lodash

Bạn có thể sử dụng lodash để đơn giản hóa mã của mình và làm cho các dự án của bạn linh hoạt hơn và dễ bảo trì hơn. Nhiều chức năng tiện ích, được áp dụng rộng rãi và cập nhật thường xuyên của nó sẽ giúp bạn viết mã thanh lịch, hiệu quả. Bạn có thể sử dụng lodash để đảm bảo mã của bạn luôn cập nhật và tương thích với các trình duyệt hiện đại.