Các phương pháp tìm kiếm mảng JavaScript: Hướng dẫn indexOf, includes, find và inArray

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Giới thiệu

JavaScript là một trong những ngôn ngữ lập trình được sử dụng rộng rãi nhất trong phát triển web. Đặc biệt, việc thao tác mảng đóng vai trò then chốt trong quản lý dữ liệu và tương tác người dùng.

Bài viết này cung cấp giải thích chi tiết về cách tìm kiếm giá trị trong mảng bằng JavaScript. Nó bao phủ mọi thứ từ các phương pháp tìm kiếm cơ bản đến các trường hợp sử dụng nâng cao, hữu ích cho cả người mới bắt đầu và các nhà phát triển trung cấp.

Mục đích của Bài viết này

Khi đọc bài viết này, bạn sẽ học được những điều sau:

• Hiểu sự khác nhau giữa các phương pháp JavaScript chính được dùng để tìm kiếm trong mảng.
• Nắm vững cách sử dụng cụ thể của mỗi phương pháp thông qua các ví dụ mã.
• Có khả năng chọn phương pháp phù hợp tùy theo kịch bản.

Đối tượng Độc giả

Bài viết này hướng tới:

• Người mới bắt đầu vừa mới học JavaScript.
• Các nhà phát triển trung cấp muốn đào sâu hiểu biết về tìm kiếm trong mảng và xử lý dữ liệu.
• Các lập trình viên web đang tìm kiếm các ví dụ mã thực tế.

Kiến thức và Kỹ năng Bạn Sẽ Thu được

• Sử dụng cơ bản và nâng cao các phương pháp tìm kiếm mảng của JavaScript (indexOf(), includes(), find(), findIndex()).
• Cách dùng phương pháp inArray() của jQuery và các lưu ý quan trọng.
• Hiểu sự khác biệt về hiệu năng và các trường hợp sử dụng thực tế.

Khi nắm vững những kỹ năng này, bạn sẽ xử lý việc thao tác dữ liệu trong JavaScript một cách hiệu quả hơn.

Tiếp theo là gì

Trong bài viết tiếp theo, chúng ta sẽ xem xét chi tiết “Các Phương pháp Tìm kiếm Mảng Cơ bản trong JavaScript”. Đặc điểm và cách sử dụng của mỗi phương pháp sẽ được giải thích kèm theo các ví dụ cụ thể, vì vậy hãy đón chờ nhé.

Nếu bạn có bất kỳ câu hỏi hoặc yêu cầu nào liên quan đến bài viết này, đừng ngần ngại đặt câu hỏi.

2. Các Phương pháp Tìm kiếm Mảng Cơ bản trong JavaScript

JavaScript cung cấp một số phương pháp để tìm kiếm giá trị trong mảng. Trong phần này, chúng ta sẽ giải thích cách hoạt động của từng phương pháp kèm theo các ví dụ rõ ràng.

2-1. Phương pháp indexOf()

Tổng quan
Phương pháp indexOf() trả về chỉ số đầu tiên mà tại đó một giá trị xác định được tìm thấy trong mảng. Nếu giá trị không tồn tại, nó trả về -1.

Cú pháp Cơ bản

array.indexOf(value, fromIndex)

• value : Giá trị cần tìm
• fromIndex : Vị trí bắt đầu tìm kiếm (tùy chọn, mặc định là 0)

Ví dụ

const fruits = ['apple', 'banana', 'orange'];

console.log(fruits.indexOf('banana')); // Output: 1
console.log(fruits.indexOf('grape'));  // Output: -1

Lưu ý Quan trọng

• indexOf() sử dụng so sánh nghiêm ngặt (===). Các giá trị có kiểu dữ liệu khác nhau sẽ không được coi là bằng nhau.
• Phương pháp này không phù hợp để so sánh trực tiếp các đối tượng hoặc mảng.

2-2. Phương pháp includes()

Tổng quan
Phương pháp includes() trả về một giá trị boolean (true hoặc false) cho biết một giá trị xác định có tồn tại trong mảng hay không.

Cú pháp Cơ bản

array.includes(value, fromIndex)

Ví dụ

const colors = ['red', 'green', 'blue'];

console.log(colors.includes('green')); // Output: true
console.log(colors.includes('yellow')); // Output: false

Lưu ý Quan trọng

• includes() được giới thiệu trong ES6 (ECMAScript 2015) và có thể không được hỗ trợ trên các trình duyệt rất cũ.

2-3. Phương pháp find()

Tổng quan
Phương pháp find() trả về phần tử đầu tiên thỏa mãn điều kiện được chỉ định. Nếu không tìm thấy phần tử phù hợp, nó trả về undefined.

Ví dụ

const numbers = [10, 20, 30, 40];

const result = numbers.find(num => num > 25);
console.log(result); // Output: 30

2-4. Phương pháp findIndex()

Tổng quan
Phương pháp findIndex() trả về chỉ số của phần tử đầu tiên thỏa mãn điều kiện được chỉ định. Nếu không tìm thấy phần tử phù hợp, nó trả về -1.

Ví dụ

const numbers = [10, 20, 30, 40];

const index = numbers.findIndex(num => num > 25);
console.log(index); // Output: 2

Tổng kết

Trong phần này, chúng tôi đã đề cập đến các phương pháp tìm kiếm mảng cơ bản của JavaScript: indexOf(), includes(), find() và findIndex().

Các điểm so sánh chính

• Đối với các tìm kiếm đơn giản, indexOf() hoặc includes() là phù hợp.
• Đối với các tìm kiếm dựa trên điều kiện, find() hoặc findIndex() hiệu quả hơn.

3. Phương thức inArray() của jQuery là gì?

JavaScript cung cấp các phương pháp tìm kiếm mảng tích hợp sẵn, nhưng jQuery cũng có phương pháp tìm kiếm mảng riêng gọi là inArray(). Trong phần này, chúng tôi sẽ giải thích các tính năng của inArray(), cách sử dụng nó qua các ví dụ cụ thể và những điểm quan trọng cần lưu ý.

3-1. Tại sao nên dùng jQuery?

jQuery đã được sử dụng rộng rãi trong thời gian dài như một thư viện cho phép bạn viết mã thao tác DOM và xử lý sự kiện một cách ngắn gọn hơn. Vẫn còn những trường hợp ngày nay mà jQuery được sử dụng vì các lý do sau:

• Duy trì hệ thống cũ : Được sử dụng trong các dự án và hệ thống hiện có.
• Viết mã đơn giản : Dễ dàng cho người mới bắt đầu.
• Đảm bảo tính tương thích : Hỗ trợ các trình duyệt cũ.

3-2. Cách sử dụng phương thức inArray()

Tổng quan
Phương thức inArray() trả về chỉ mục của một giá trị xác định nếu nó tồn tại trong mảng. Nếu giá trị không tồn tại, nó trả về -1.

Cú pháp cơ bản

$.inArray(value, array, [fromIndex])

Ví dụ

const fruits = ['apple', 'banana', 'orange'];

console.log($.inArray('banana', fruits)); // Output: 1
console.log($.inArray('grape', fruits));  // Output: -1

3-3. So sánh inArray() và các phương thức gốc

Các điểm chính:

• Trong các dự án dựa trên jQuery, việc sử dụng inArray() có thể giúp duy trì tính nhất quán.
• Đối với các dự án mới, thường nên ưu tiên các phương thức gốc.

3-4. Lưu ý quan trọng khi sử dụng

1. Phụ thuộc vào phiên bản jQuery
Vì inArray() chỉ có thể được sử dụng trong môi trường jQuery, hãy cẩn thận khi làm việc trong các dự án mới.

2. Quy tắc so sánh
Nó chỉ thực hiện so sánh chặt chẽ (===), vì vậy cần chú ý đến sự khác nhau về kiểu dữ liệu.

3. Khác biệt về hiệu năng
So với các phương thức gốc, các phương thức của jQuery gây thêm chi phí thực thi.

Tóm tắt

Trong phần này, chúng tôi đã giải thích phương thức inArray() của jQuery.

Những điểm cần nhớ:

• Trong môi trường jQuery, bạn có thể viết mã ngắn gọn và nhất quán.
• Đối với các dự án mới, các phương thức gốc thường được khuyến nghị.
• Khi làm việc với các hệ thống cũ, inArray() vẫn có thể hữu ích.

4. Hướng dẫn so sánh và lựa chọn phương thức

JavaScript và jQuery cung cấp nhiều phương pháp tìm kiếm mảng, mỗi phương pháp có những đặc điểm và trường hợp sử dụng khác nhau. Trong phần này, chúng tôi sẽ so sánh các phương pháp chính và giải thích cách chọn lựa phù hợp.

4-1. Các tính năng chính và so sánh của từng phương thức

Dưới đây là bảng so sánh các phương pháp tìm kiếm mảng chính và các đặc điểm của chúng.

4-2. Các phương thức được đề xuất theo kịch bản

1. Tìm kiếm giá trị đơn giản
Ví dụ: Khi bạn muốn kiểm tra xem một mảng có chứa một giá trị cụ thể hay không.

• Các phương thức đề xuất:
• indexOf() → Khi bạn cần số chỉ mục.
• includes() → Khi bạn chỉ cần xác nhận sự tồn tại.

Ví dụ:

const colors = ['red', 'green', 'blue'];

console.log(colors.indexOf('green')); // Output: 1
console.log(colors.includes('green')); // Output: true

2. Tìm kiếm dựa trên điều kiện
Ví dụ: Khi bạn muốn tìm dữ liệu phù hợp với một điều kiện cụ thể.

• Các phương thức đề xuất:
• find() → Lấy phần tử đầu tiên thỏa mãn điều kiện.
• findIndex() → Lấy vị trí của phần tử đầu tiên thỏa mãn điều kiện.

Ví dụ:

const numbers = [10, 20, 30, 40];

console.log(numbers.find(num => num > 25)); // Output: 30
console.log(numbers.findIndex(num => num > 25)); // Output: 2

3. Tìm kiếm trong hệ thống cũ
Ví dụ: Khi thực hiện tìm kiếm dữ liệu trong các hệ thống cũ dựa trên jQuery.

• Phương thức đề xuất:
• inArray() → Sử dụng khi môi trường yêu cầu thư viện jQuery.

  const fruits = ['apple', 'banana', 'orange'];
  
  console.log($.inArray('banana', fruits)); // Output: 1
  

4-3. So sánh hiệu năng

1. Khi cần tìm kiếm tốc độ cao:

• indexOf() và includes() nhanh.

2. Khi cần tìm kiếm có điều kiện:

• find() và findIndex() cho phép điều kiện linh hoạt nhưng hơi chậm hơn.

3. Khi sử dụng jQuery:

• inArray() tiện lợi, nhưng chậm hơn các phương pháp gốc.

Tóm tắt

Trong phần này, chúng tôi đã so sánh các phương pháp tìm kiếm mảng chính và giải thích cách chọn phương pháp phù hợp dựa trên trường hợp sử dụng của bạn.

Những điểm chính cần nhớ:

• Đối với các tìm kiếm đơn giản, sử dụng indexOf() hoặc includes() .
• Đối với các tìm kiếm dựa trên điều kiện, find() hoặc findIndex() là lý tưởng.
• Trong môi trường jQuery, inArray() có thể hữu ích cho các hệ thống cũ.

Bằng cách chọn phương pháp phù hợp dựa trên môi trường và yêu cầu của bạn, bạn có thể viết mã hiệu quả và dễ bảo trì.

5. Ví dụ thực tế và các kịch bản áp dụng

Trong phần này, chúng tôi trình bày cách sử dụng các phương pháp tìm kiếm mảng JavaScript và jQuery đã giới thiệu cho đến nay trong các kịch bản thực tế. Bằng cách đi qua các ví dụ thực tế, bạn có thể nâng cao hiểu biết và áp dụng các kỹ thuật này trong các dự án thực tế.

5-1. Kiểm tra đầu vào biểu mẫu

Kịch bản:
Xác minh xem một giá trị do người dùng nhập có nằm trong danh sách đã định nghĩa trước hay không.

Giải pháp:
Sử dụng phương thức includes() để thực hiện kiểm tra tồn tại ngắn gọn.

Ví dụ mã:

const validColors = ['red', 'green', 'blue'];
const userInput = 'green';

if (validColors.includes(userInput)) {
  console.log('The color is valid.');
} else {
  console.log('The color is invalid.');
}

5-2. Tìm kiếm và Trích xuất Dữ liệu Người dùng

Kịch bản:
Tìm dữ liệu người dùng khớp với một điều kiện trong một mảng các đối tượng.

Giải pháp:
Sử dụng find() hoặc findIndex() để trích xuất dữ liệu thỏa mãn điều kiện.

Ví dụ mã:

const users = [
  { id: 1, name: 'Alice', age: 25 },
  { id: 2, name: 'Bob', age: 30 },
  { id: 3, name: 'Charlie', age: 35 },
];

const result = users.find(user => user.age >= 30);
console.log(result); // Output: { id: 2, name: 'Bob', age: 30 }

const index = users.findIndex(user => user.age >= 30);
console.log(index); // Output: 1

5-3. Ví dụ Xử lý Lỗi

Kịch bản:
Triển khai xử lý lỗi khi không tìm thấy mục tiêu tìm kiếm.

Giải pháp:
Sử dụng indexOf() hoặc findIndex() để kiểm tra kết quả và hiển thị thông báo lỗi.

Ví dụ mã:

const products = ['apple', 'banana', 'orange'];

const index = products.indexOf('grape');

if (index === -1) {
  console.log('The product was not found.');
} else {
  console.log(`The product is located at index ${index}.`);
}

5-4. Lọc Dữ liệu Mảng

Kịch bản:
Trích xuất chỉ dữ liệu thỏa mãn một điều kiện nhất định.

Giải pháp:
Sử dụng phương thức filter() để lọc mảng.

Ví dụ mã:

const scores = [45, 72, 88, 53, 94];

const highScores = scores.filter(score => score >= 70);
console.log(highScores); // Output: [72, 88, 94]

5-5. Tìm kiếm với jQuery

Kịch bản:
Kiểm tra sự tồn tại của dữ liệu bằng inArray() của jQuery trong hệ thống cũ.

Giải pháp:
Sử dụng inArray() để kiểm tra chỉ mục của giá trị.

Ví dụ mã:

const fruits = ['apple', 'banana', 'orange'];

if ($.inArray('banana', fruits) !== -1) {
  console.log('Banana exists in the list.');
} else {
  console.log('Banana does not exist in the list.');
}

Tóm tắt

Trong phần này, chúng tôi đã giới thiệu các ví dụ sử dụng thực tế của mỗi phương pháp dựa trên các kịch bản thực tế.

Những điểm chính cần nhớ:

• includes() đơn giản và hiệu quả cho việc xác thực đầu vào của người dùng.
• find() và findIndex() mạnh mẽ cho các tìm kiếm có điều kiện và xử lý đối tượng.
• indexOf() đa năng và phù hợp cho việc xử lý lỗi.
• filter() hiệu quả để trích xuất nhiều phần tử phù hợp.
• inArray() hữu ích trong các môi trường legacy sử dụng jQuery.

6. Các Câu Hỏi Thường Gặp (FAQ)

Trong phần này, chúng tôi sẽ trả lời các câu hỏi và thắc mắc phổ biến liên quan đến việc tìm kiếm trong mảng bằng JavaScript và jQuery.

Câu hỏi 1: Sự khác nhau giữa indexOf() và includes() là gì?

Trả lời:
Cả indexOf() và includes() đều được dùng để tìm kiếm phần tử trong mảng, nhưng chúng khác nhau về giá trị trả về và trường hợp sử dụng.

• indexOf() : Trả về chỉ mục của giá trị được chỉ định. Trả về -1 nếu không tìm thấy.
• includes() : Trả về một giá trị boolean (true hoặc false) cho biết giá trị có tồn tại hay không.

Ví dụ:

const fruits = ['apple', 'banana', 'orange'];

console.log(fruits.indexOf('banana')); // Output: 1
console.log(fruits.includes('banana')); // Output: true

Câu hỏi 2: Sự khác nhau giữa find() và filter() là gì?

Trả lời:
Cả find() và filter() đều tìm các phần tử thỏa mãn một điều kiện, nhưng chúng khác nhau về kết quả trả về.

• find() : Trả về chỉ phần tử đầu tiên phù hợp.
• filter() : Trả về tất cả các phần tử phù hợp dưới dạng một mảng mới.

Ví dụ:

const numbers = [10, 20, 30, 40, 50];

console.log(numbers.find(num => num > 25)); // Output: 30
console.log(numbers.filter(num => num > 25)); // Output: [30, 40, 50]

Câu hỏi 3: Làm thế nào để tìm một giá trị khóa cụ thể trong một mảng các đối tượng?

Trả lời:
Trong một mảng các đối tượng, bạn có thể chỉ định điều kiện bằng cách sử dụng find() hoặc findIndex().

Ví dụ:

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' },
];

const user = users.find(user => user.name === 'Bob');
console.log(user); // Output: { id: 2, name: 'Bob' }

Câu hỏi 4: Liệu tôi có nên vẫn sử dụng inArray() của jQuery hiện nay?

Trả lời:
Phương thức inArray() của jQuery hữu ích trong các môi trường legacy, nhưng các phương thức gốc của JavaScript được khuyến nghị trong hầu hết các trường hợp hiện đại.

Khuyến nghị:

• Đối với dự án mới, sử dụng các phương thức gốc như indexOf() hoặc includes().
• Đối với môi trường đã dựa trên jQuery, việc dùng inArray() có thể giúp duy trì tính nhất quán.

Câu hỏi 5: Làm sao tối ưu việc tìm kiếm trong mảng để đạt hiệu năng tốt?

Trả lời:
Khi làm việc với tập dữ liệu lớn hoặc các tìm kiếm thường xuyên, hãy cân nhắc các điểm sau:

1. Chọn các phương thức nhanh:

• Đối với các tìm kiếm giá trị đơn giản, indexOf() và includes() rất nhanh.

2. Sử dụng bộ nhớ đệm:

• Lưu trữ kết quả tìm kiếm để tránh tính toán lặp lại.

3. Tối ưu cấu trúc dữ liệu:

• Đối với tập dữ liệu lớn, việc sử dụng các đối tượng được khóa bởi giá trị, hoặc các cấu trúc dữ liệu như Set hoặc Map sẽ hiệu quả hơn.

Ví dụ:

const dataSet = new Set([10, 20, 30, 40]);
console.log(dataSet.has(20)); // Output: true

Tổng kết

Trong phần này, chúng tôi đã đề cập đến các câu hỏi thường gặp và giải pháp liên quan đến việc tìm kiếm trong mảng bằng JavaScript và jQuery.

Những điểm chính cần nhớ:

• Hiểu rõ sự khác nhau và các trường hợp sử dụng phù hợp cho mỗi phương thức.
• Sử dụng find() cho các tìm kiếm có điều kiện trong mảng đối tượng.
• Ưu tiên các phương thức gốc cho dự án mới, và chỉ dùng các phương thức của jQuery trong môi trường legacy.
• Xem xét hiệu năng và cấu trúc dữ liệu khi làm việc với tập dữ liệu lớn.

7. Tổng Kết và Các Bước Tiếp Theo

Trong bài viết này, chúng tôi đã cung cấp một giải thích toàn diện về cách sử dụng các phương thức tìm kiếm trong mảng bằng JavaScript và jQuery. Ở đây, chúng tôi sẽ tổng hợp các điểm chính đã được đề cập trong toàn bộ bài viết và giới thiệu các chiến lược học tập cũng như các bước thực hành để tiến tới.

7-1. Những Điểm Chính Từ Bài Viết Này

1. Các Phương Thức Tìm Kiếm Cơ Bản Trong Mảng

• indexOf() : Tìm chỉ mục của một phần tử trong mảng.
• includes() : Trả về giá trị boolean cho biết một giá trị có tồn tại hay không.
• find() và findIndex() : Tìm phần tử đầu tiên hoặc chỉ mục đáp ứng một điều kiện cho trước.

2. Phương thức inArray() của jQuery

• Hữu ích cho các môi trường legacy và các hệ thống dựa trên jQuery.
• Các phương thức JavaScript gốc được khuyến nghị trong môi trường hiện đại.

3. Ví dụ thực tế và các kịch bản áp dụng

• Trình bày các ví dụ thực tế như kiểm tra hợp lệ đầu vào biểu mẫu và trích xuất dữ liệu từ các mảng đối tượng.
• Xử lý lỗi và lọc dữ liệu có thể được thực hiện một cách ngắn gọn và hiệu quả.

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

• Làm rõ sự khác nhau giữa mỗi phương pháp và thời điểm nên sử dụng chúng.
• Giải thích các cân nhắc về hiệu năng và kỹ thuật tìm kiếm trong các mảng đối tượng.

7-2. Các điểm quan trọng khi chọn phương pháp phù hợp

Việc chọn phương pháp tìm kiếm trong mảng phù hợp với trường hợp sử dụng của bạn là rất quan trọng. Tham khảo bảng tham chiếu nhanh dưới đây để lựa chọn phương pháp tối ưu.

7-3. Các bước tiếp theo

1. Thực hành dự án thực tế

• Xây dựng một ứng dụng web đơn giản và áp dụng các phương pháp đã học trong bài viết này. Các ví dụ bao gồm triển khai tính năng tìm kiếm và lọc trong danh sách TODO hoặc hệ thống quản lý sản phẩm.

2. Học các khái niệm JavaScript nâng cao

• ES6 và hơn thế : Tìm hiểu các tính năng JavaScript hiện đại như toán tử spread và destructuring để viết mã hiệu quả hơn.
• Xử lý bất đồng bộ : Nắm vững async/await và Promise sẽ giúp bạn xử lý các thao tác dữ liệu phức tạp hơn.

3. Sử dụng thư viện và framework

• Các framework hiện đại như React và Vue.js yêu cầu các triển khai nâng cao kết hợp tìm kiếm trong mảng với ràng buộc dữ liệu.

4. Tài liệu tham khảo và nguồn lực

• MDN Web Docs : JavaScript Arrays
• W3Schools : JavaScript Array Methods
• JSFiddle và CodePen : Các công cụ hữu ích để thử nghiệm và chia sẻ mã.

7-4. Lời kết

Qua bài viết này, bạn đã nắm vững cả những kiến thức cơ bản và các kỹ thuật nâng cao về tìm kiếm trong mảng bằng JavaScript và jQuery.

Lời khuyên dành cho người đọc:

1. Áp dụng những gì đã học vào các dự án thực tế và thường xuyên thử nghiệm mã.
2. Tiếp tục học các kỹ thuật và phương pháp mới khi cần.
3. Lựa chọn linh hoạt phương pháp phù hợp nhất dựa trên yêu cầu dự án của bạn.

Kết luận

Đây là phần kết của “Hướng dẫn toàn diện về tìm kiếm trong mảng bằng JavaScript và jQuery”.

Tiếp tục học các kỹ thuật và công cụ mới để không ngừng nâng cao kỹ năng lập trình của bạn.