JavaScript Katana

Hướng dẫn Underscore.js: Đơn giản hoá các thao tác mảng & đối tượng trong JavaScript

Thư viện Bên ngoài và Quản lý Mô-đun
佐川 直弘 | Naohiro Sagawa
By 佐川 直弘 | Naohiro Sagawa (運営者)
※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　
目次

1. Giới thiệu

JavaScript là một ngôn ngữ lập trình thiết yếu cho phát triển web, nhưng việc làm việc với mảng và đối tượng có thể dễ dàng làm cho mã trở nên phức tạp. Đặc biệt, các nhiệm vụ như lọc dữ liệu và chuyển đổi thường đòi hỏi cú pháp sạch sẽ, hiệu quả hơn.

Đó là nơi thư viện JavaScript Underscore.js xuất hiện. Bằng cách sử dụng thư viện này, ngay cả các thao tác dữ liệu phức tạp cũng có thể được viết một cách đơn giản, dễ đọc.

Tại sao Underscore.js Nổi Bật

  1. Mã ngắn gọn hơn
  • Các thao tác thường trở nên dài dòng trong JavaScript thuần có thể được diễn đạt chỉ trong vài dòng với Underscore.js.
  1. Bộ chức năng tiện lợi phong phú
  • Nó cung cấp nhiều tính năng, bao gồm các thao tác với mảng, xử lý đối tượng và kiểm soát hàm.
  1. Nhẹ và linh hoạt
  • Vì bạn chỉ có thể sử dụng những gì cần thiết, ảnh hưởng đến hiệu năng có thể được giữ ở mức tối thiểu.

Những Gì Bạn Sẽ Học Trong Bài Viết Này

  • Cách thiết lập Underscore.js
  • Các hàm cốt lõi và ví dụ thực tế
  • Các trường hợp sử dụng thực tế giúp phát triển

2. Underscore.js là gì?

Tổng quan về Underscore.js

Underscore.js là một thư viện nhẹ giúp việc thao tác dữ liệu trong JavaScript trở nên dễ dàng hơn. Nó cung cấp một loạt các hàm tiện lợi được thiết kế chủ yếu để tối ưu hoá các thao tác trên mảng và đối tượng, và thường được mô tả như một bộ công cụ tiện ích JavaScript.

Các tính năng chuẩn của JavaScript rất mạnh, nhưng mã có thể trở nên dài và độ đọc hiểu giảm sút. Sử dụng Underscore.js giúp giải quyết những vấn đề này, cho phép bạn viết mã đơn giản hơn, dễ bảo trì hơn.

Các tính năng chính

  1. Rất nhiều hàm tiện ích
  • Nó cung cấp nhiều hàm, bao gồm các thao tác với mảng, các thao tác với đối tượng, và kiểm soát hàm.
  1. Mã đơn giản, dễ đọc
  • So với các mẫu JavaScript thuần truyền thống, nó giảm bớt boilerplate và cải thiện khả năng đọc hiểu.
  1. Không phụ thuộc
  • Vì không phụ thuộc vào thư viện khác, bạn có thể sử dụng nó linh hoạt trong nhiều môi trường.
  1. Nhẹ và nhanh
  • Kích thước nhỏ và chi phí thấp khiến nó phù hợp ngay cả với các ứng dụng web hiện đại.

Underscore.js so với Lodash

Một thư viện thường được so sánh là Lodash. Lodash được xây dựng dựa trên Underscore.js và mở rộng chức năng của nó, với những khác biệt như sau.

AspectUnderscore.jsLodash
FunctionalityIncludes many core utility functionsOffers an even broader feature set
Modular usagePartially supportedFully modularized
PerformanceFastFast and further optimized

Việc lựa chọn phụ thuộc vào yêu cầu dự án của bạn, nhưng nếu bạn muốn một thư viện đơn giản và nhẹ, Underscore.js là một lựa chọn mạnh mẽ.

Underscore.js có thể giúp gì?

Underscore.js đặc biệt hữu ích trong các tình huống như sau.

  1. Thao tác dữ liệu mảng
  • Nó cho phép viết mã ngắn gọn cho các thao tác như lọc và ánh xạ.
  1. Thao tác đối tượng
  • Bạn có thể dễ dàng lấy các khóa/giá trị và hợp nhất các phần tử, cùng nhiều nhiệm vụ khác.
  1. Kiểm soát hàm
  • Nó giúp dễ dàng triển khai các kiểm soát như “chỉ chạy một lần” hoặc thực thi trễ.
  1. Tận dụng các trợ giúp tiện ích
  • Bạn cũng có thể dùng nó để sắp xếp, ngẫu nhiên hoá, và thậm chí như một công cụ mẫu đơn giản.

3. Cài đặt

Trong phần này, chúng ta sẽ đi qua các bước cụ thể để thêm Underscore.js vào dự án của bạn. Bạn sẽ học cả cách sử dụng CDN và cách cài đặt nó cục bộ bằng cách tải xuống các tệp.

1. Sử dụng CDN

CDN (Mạng Phân Phối Nội Dung) là một cách tiện lợi để sử dụng một thư viện chỉ bằng cách liên kết tới một tệp được lưu trữ trên internet. Bạn có thể sử dụng Underscore.js bằng cách thêm đoạn mã sau vào thẻ <head> hoặc ở cuối thẻ <body> trong tệp HTML của mình.

Ví dụ: Thêm vào tệp HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Underscore.jsの導入</title>
  <!-- Underscore.jsのCDNリンク -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.13.6/underscore-min.js"></script>
</head>
<body>
  <h1>Underscore.jsのテスト</h1>
  <script>
    // 動作確認コード
    const data = [1, 2, 3, 4, 5];
    const evenNumbers = _.filter(data, function(num) {
      return num % 2 === 0;
    });
    console.log(evenNumbers); // [2, 4]
  </script>
</body>
</html>

Khi bạn mở tệp này trong trình duyệt, bạn có thể xác nhận rằng chỉ các số chẵn được hiển thị trong console của Developer Tools.

2. Cài đặt bằng npm hoặc yarn

Bằng cách sử dụng npm hoặc yarn, bạn cũng có thể sử dụng Underscore.js trong môi trường cục bộ hoặc trong dự án Node.js.

Cài đặt bằng npm

npm install underscore

Cài đặt bằng yarn

yarn add underscore

Ví dụ nhập khẩu trong tệp JavaScript

import _ from 'underscore';

const data = [10, 20, 30, 40];
const result = _.map(data, (num) => num * 2);
console.log(result); // [20, 40, 60, 80]

3. Tải xuống tệp và sử dụng nó cục bộ

  1. Truy cập trang web chính thức ( underscorejs.org ).
  2. Tải xuống tệp JavaScript mới nhất từ phần “Download”.
  3. Đặt tệp đã tải xuống vào một thư mục phù hợp trong dự án của bạn (ví dụ, js/ ).
  4. Liên kết nó trong tệp HTML của bạn bằng thẻ script.
    <script src="js/underscore-min.js"></script>

4. Khi sử dụng Module Bundler

Nếu bạn sử dụng một module bundler như Webpack hoặc Parcel, bạn cũng có thể tích hợp Underscore.js một cách dễ dàng.

Ví dụ: Cấu hình Webpack

  1. Cài đặt nó bằng npm.
    npm install underscore
  1. Nhập nó vào tệp JavaScript của bạn.
    import _ from 'underscore';
  1. Đóng gói nó khi cần và sử dụng trong dự án của bạn.

Khắc phục sự cố

1. Nếu bạn thấy “Uncaught ReferenceError: _ is not defined”

  • Underscore.js có thể chưa được tải đúng cách. Kiểm tra lại liên kết CDN hoặc đường dẫn nhập khẩu của bạn.

2. Nếu lỗi xảy ra sau khi cài đặt bằng npm

  • Cập nhật Node.js và npm lên phiên bản mới nhất.

4. Sử dụng Cơ bản

Trong phần này, chúng tôi sẽ giới thiệu một số hàm cốt lõi của Underscore.js cùng với các ví dụ thực tế. Những hàm này rất hữu ích để làm việc hiệu quả với mảng và đối tượng.

1. Duyệt qua Mảng – _.each()

_.each() là một hàm được sử dụng để duyệt qua mảng hoặc đối tượng.

Ví dụ

const numbers = [1, 2, 3, 4, 5];

// Output each element to the console
_.each(numbers, function(num) {
  console.log(num);
});

Kết quả:

1  
2  
3  
4  
5

Các điểm chính:

  • Nó hoạt động không chỉ với mảng mà còn với đối tượng.
  • Callback nhận phần tử, chỉ mục của nó và toàn bộ collection.

2. Ánh xạ Mảng – _.map()

_.map() áp dụng một hàm cho mỗi phần tử của mảng và trả về một mảng mới.

Ví dụ

const numbers = [1, 2, 3, 4, 5];

// Double each element
const doubled = _.map(numbers, function(num) {
  return num * 2;
});

console.log(doubled);

Kết quả:

[2, 4, 6, 8, 10]

3. Tìm phần tử phù hợp đầu tiên – _.find()

_.find() trả về phần tử đầu tiên phù hợp với một điều kiện cho trước.

Ví dụ

const numbers = [1, 2, 3, 4, 5];

// Find the first element greater than or equal to 3
const result = _.find(numbers, function(num) {
  return num >= 3;
});

console.log(result);

Kết quả:

3

4. Lọc tất cả các phần tử phù hợp – _.filter()

_.filter() trích xuất tất cả các phần tử phù hợp với một điều kiện và trả về chúng dưới dạng một mảng mới.

Ví dụ

const numbers = [1, 2, 3, 4, 5];

// Extract only even numbers
const evens = _.filter(numbers, function(num) {
  return num % 2 === 0;
});

console.log(evens);

Kết quả:

[2, 4]

5. Trộn các phần tử trong mảng – _.shuffle()

_.shuffle() sắp xếp ngẫu nhiên các phần tử của một mảng.

Ví dụ

const numbers = [1, 2, 3, 4, 5];

// Randomly shuffle the array
const shuffled = _.shuffle(numbers);

console.log(shuffled);

Kết quả: (ví dụ)

[3, 5, 1, 4, 2]

6. Xóa các phần tử trùng lặp – _.uniq()

_.uniq() loại bỏ các giá trị trùng lặp trong một mảng.

Ví dụ

const numbers = [1, 2, 2, 3, 4, 4, 5];

// Remove duplicate elements
const uniqueNumbers = _.uniq(numbers);

console.log(uniqueNumbers);

Kết quả:

[1, 2, 3, 4, 5]

Tóm tắt

Cho đến nay, chúng ta đã bao phủ các hàm cơ bản của Underscore.js cùng với các ví dụ thực tế.

  • _.each() để lặp qua các phần tử
  • _.map() để tạo mảng mới
  • _.find() và _.filter() để trích xuất các phần tử phù hợp
  • _.shuffle() để ngẫu nhiên hoá các phần tử
  • _.uniq() để loại bỏ các phần tử trùng lặp

5. Sử dụng nâng cao

Trong phần này, chúng ta sẽ khám phá các hàm Underscore.js nâng cao hơn và các trường hợp sử dụng thực tế. Những tính năng này cho phép thao tác và phân tích dữ liệu phức tạp hơn.

1. Sắp xếp mảng – _.sortBy()

_.sortBy() sắp xếp các phần tử của mảng dựa trên một khóa hoặc điều kiện nhất định.

Ví dụ

const users = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 20 },
  { name: 'Charlie', age: 30 }
];

// Sort by age
const sortedUsers = _.sortBy(users, 'age');

console.log(sortedUsers);

Kết quả:

[
  { name: 'Bob', age: 20 },
  { name: 'Alice', age: 25 },
  { name: 'Charlie', age: 30 }
]

2. Nhóm các mảng – _.groupBy()

_.groupBy() nhóm các phần tử của mảng dựa trên một khóa hoặc điều kiện nhất định.

Ví dụ

const numbers = [1.1, 2.3, 2.4, 3.5, 4.7];

// Group by integer part
const grouped = _.groupBy(numbers, function(num) {
  return Math.floor(num);
});

console.log(grouped);

Kết quả:

{
  1: [1.1],
  2: [2.3, 2.4],
  3: [3.5],
  4: [4.7]
}

3. Tổng hợp dữ liệu – _.countBy()

_.countBy() là một hàm tiện lợi để tổng hợp dữ liệu.

Ví dụ

const words = ['apple', 'banana', 'apricot', 'blueberry'];

// Count by first letter
const counts = _.countBy(words, function(word) {
  return word[0];
});

console.log(counts);

Kết quả:

{
  a: 2,
  b: 2
}

Tóm tắt

Trong phần này, chúng ta đã đề cập đến việc sử dụng Underscore.js nâng cao hơn.

  • _.sortBy() để sắp xếp mảng
  • _.groupBy() và _.countBy() để phân loại và tổng hợp dữ liệu

6. Các thao tác với đối tượng

Trong phần này, chúng ta sẽ giới thiệu các hàm hữu ích để làm việc với đối tượng trong Underscore.js. Những hàm này giúp xử lý thuộc tính và giá trị của đối tượng một cách hiệu quả.

1. Lấy khóa và giá trị của đối tượng

Lấy khóa – _.keys()

const person = { name: 'Alice', age: 25, city: 'Tokyo' };

const keys = _.keys(person);
console.log(keys);

Kết quả:

['name', 'age', 'city']

Lấy giá trị – _.values()

const values = _.values(person);
console.log(values);

Kết quả:

['Alice', 25, 'Tokyo']

2. Sao chép đối tượng – _.clone()

_.clone() tạo một bản sao nông của một đối tượng.

const original = { name: 'Alice', age: 25 };
const clone = _.clone(original);

clone.age = 30; // Modify the clone
console.log(original.age); // 25
console.log(clone.age);    // 30

Tóm tắt

Trong phần này, chúng tôi đã giải thích cách làm việc với đối tượng bằng Underscore.js.

7. Các thao tác với hàm

Trong phần này, chúng ta sẽ giải thích cách làm việc hiệu quả với các hàm bằng Underscore.js. Những tính năng này hữu ích cho việc kiểm soát thực thi và cải thiện hiệu suất.

1. Gắn hàm – _.bind()

_.bind() gắn một đối tượng cụ thể vào this khi hàm được thực thi.

Ví dụ

const person = {
  name: 'Alice',
  greet: function(greeting) {
    return `${greeting}, my name is ${this.name}`;
  }
};

const boundGreet = _.bind(person.greet, person);

console.log(boundGreet('Hello')); // Hello, my name is Alice

2. Thực thi Trì hoãn – _.delay()

_.delay() trì hoãn việc thực thi một hàm trong một khoảng thời gian xác định.

Ví dụ

_.delay(function(message) {
  console.log(message);
}, 2000, 'Displayed after 2 seconds');

Kết quả: (sau 2 giây)

Displayed after 2 seconds

3. Thực thi Chỉ Một Lần – _.once()

_.once() đảm bảo một hàm chỉ được thực thi một lần. Các lần gọi sau sẽ bị bỏ qua.

Ví dụ

const initialize = _.once(function() {
  console.log('Initialization complete');
});

initialize(); // Executed
initialize(); // Ignored

4. Ghi nhớ – _.memoize()

_.memoize() lưu trữ kết quả của một hàm và bỏ qua việc tính lại khi được gọi lại với cùng các đối số.

Ví dụ

const factorial = _.memoize(function(n) {
  return n <= 1 ? 1 : n * factorial(n - 1);
});

console.log(factorial(5)); // Calculated
console.log(factorial(5)); // Retrieved from cache

5. Giới hạn Tốc độ Thực thi Hàm – _.throttle()

_.throttle() giới hạn tần suất một hàm có thể được thực thi.

Ví dụ

const log = _.throttle(function() {
  console.log('Processing...');
}, 2000);

// Simulate continuous events
setInterval(log, 500); // Executes only once every 2 seconds

Tóm tắt

Trong phần này, chúng ta đã khám phá các tiện ích liên quan đến hàm trong Underscore.js.

  • _.bind() để cố định ngữ cảnh this
  • _.delay() để thực thi trì hoãn
  • _.once() để thực thi một lần duy nhất
  • _.memoize() để lưu trữ kết quả
  • _.throttle() để tối ưu tần suất thực thi

8. Các Hàm Tiện Ích

Trong phần này, chúng ta sẽ giới thiệu các hàm tiện ích hữu ích được cung cấp bởi Underscore.js. Những hàm này hữu ích trong nhiều tình huống, bao gồm xử lý dữ liệu, tạo số ngẫu nhiên và tạo mẫu.

1. Tạo Số Ngẫu Nhiên – _.random()

_.random() tạo ra một số nguyên hoặc số thực ngẫu nhiên trong một khoảng xác định.

Ví dụ

console.log(_.random(1, 10)); // Integer
console.log(_.random(1, 10, true)); // Floating-point

2. Kiểm tra Giá trị Trống – _.isEmpty()

_.isEmpty() kiểm tra xem một mảng, đối tượng hoặc chuỗi có rỗng hay không.

Ví dụ

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

3. Tạo Mẫu – _.template()

_.template() được sử dụng để tạo các mẫu chuỗi.

Ví dụ

const template = _.template('Hello, <%= name %>!');
console.log(template({ name: 'Alice' }));

Kết quả:

Hello, Alice!

Tóm tắt

Trong phần này, chúng ta đã đề cập đến các hàm tiện ích trong Underscore.js.

  • _.random() để tạo số ngẫu nhiên
  • _.isEmpty() để kiểm tra trạng thái dữ liệu
  • _.template() để tạo mẫu đơn giản

9. Kết luận

Trong bài viết này, chúng ta đã đề cập đến Underscore.js từ việc sử dụng cơ bản đến các kỹ thuật nâng cao. Thư viện này cực kỳ hữu ích để đơn giản hoá việc thao tác dữ liệu trong JavaScript và viết mã hiệu quả, dễ bảo trì.

Những Điểm Chính

  1. Sử dụng cơ bản – Học các hàm cốt lõi để thao tác mảng và đối tượng.
  2. Sử dụng nâng cao – Khám phá việc nhóm, sắp xếp và tổng hợp.
  3. Tiện ích hàm – Bao gồm kiểm soát thực thi và ghi nhớ.
  4. Trợ giúp tiện ích – Giới thiệu tạo số ngẫu nhiên và tạo mẫu.

Suy Nghĩ Cuối Cùng

Underscore.js là một công cụ mạnh mẽ giúp việc phát triển JavaScript trở nên hiệu quả và dễ tiếp cận hơn. Hãy sử dụng bài viết này làm tài liệu tham khảo và thử áp dụng nó trong các dự án của bạn. Thực hành liên tục sẽ giúp bạn cải thiện kỹ năng hơn nữa.

Câu hỏi thường gặp (FAQ)

Câu hỏi 1: Underscore.js có miễn phí để sử dụng không?

Đáp: Có. Underscore.js được phát hành dưới giấy phép MIT và có thể sử dụng miễn phí, kể cả trong các dự án thương mại.

Câu hỏi 2: Sự khác biệt giữa Underscore.js và Lodash là gì?

Đáp: Underscore.js là một thư viện tiện ích đơn giản và nhẹ. Lodash được xây dựng dựa trên Underscore.js với các tính năng bổ sung, tối ưu hiệu năng và khả năng mô-đun mạnh hơn. Hãy lựa chọn dựa trên yêu cầu của dự án của bạn.

Câu hỏi 3: Underscore.js có còn cần thiết khi sử dụng JavaScript hiện đại (ES6+) không?

Đáp: ES6+ cung cấp nhiều tính năng gốc cho các thao tác mảng và đối tượng, nhưng Underscore.js vẫn hữu ích cho khả năng tương thích đa trình duyệt và cú pháp ngắn gọn, đặc biệt trong các dự án legacy.

Câu hỏi 4: Những loại dự án nào phù hợp với Underscore.js?

Đáp: Nó hoạt động tốt cho các dự án vừa và nhỏ, cũng như các ứng dụng mà sự đơn giản của mã là quan trọng. Đặc biệt hữu ích khi bạn cần các tiện ích nhẹ mà không muốn phụ thuộc nặng nề.

Câu hỏi 5: Làm sao để cài đặt Underscore.js?

Đáp: Bạn có thể cài đặt bằng bất kỳ phương pháp nào sau đây.

  1. Thêm qua CDN:
    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.13.6/underscore-min.js"></script>
  1. Cài đặt bằng npm:
    npm install underscore
  1. Cài đặt bằng yarn:
    yarn add underscore

Chọn phương pháp phù hợp nhất với môi trường của bạn.

Câu hỏi 6: Tôi có thể tìm tài liệu chính thức ở đâu?

Đáp: Bạn có thể truy cập tài liệu trên trang web chính thức:
Trang web chính thức của Underscore.js

Câu hỏi 7: Underscore.js có thể được sử dụng trong các dự án quy mô lớn không?

Đáp: Có, nó có thể. Tuy nhiên, đối với các dự án lớn, thường khuyến nghị sử dụng Lodash vì cấu trúc mô-đun và các tối ưu bổ sung. Underscore.js vẫn phù hợp cho các trường hợp sử dụng nhẹ.

Câu hỏi 8: Có những lựa chọn thay thế cho việc kiểm soát thực thi hàm không?

Đáp: Có. JavaScript hiện đại cung cấp các lựa chọn như setTimeout(), setInterval(), Promise và async/await. Tuy nhiên, các hàm của Underscore.js như _.throttle() và _.debounce() cho phép triển khai sạch sẽ và ngắn gọn hơn.

Câu hỏi 9: Có lưu ý gì khi sử dụng Underscore.js không?

Đáp:

  1. Tránh các phụ thuộc không cần thiết khi các tính năng gốc của JavaScript đã đủ.
  2. Giữ các phiên bản luôn cập nhật để giảm thiểu rủi ro bảo mật.
  3. Xem xét chuyển sang Lodash tùy thuộc vào quy mô dự án.

Câu hỏi 10: Underscore.js có được khuyến nghị dùng làm công cụ mẫu (template engine) không?

Đáp: _.template() tiện lợi cho các trường hợp sử dụng đơn giản, nhưng đối với nhu cầu mẫu phức tạp hơn, các thư viện chuyên dụng như Handlebars.js hoặc EJS được khuyến nghị.

広告