Hướng dẫn 4 cách tìm kiếm trong mảng JavaScript đơn giản

1. Khái niệm mảng trong JavaScript

Mảng (Array) trong JavaScript là kiểu dữ liệu được sử dụng để lưu trữ danh sách của các giá trị. Các đối tượng của mảng JavaScript có thể được lưu trữ trong các biến và được xử lý tương tự như cách bạn xử lý bất kỳ loại dữ liệu nào khác. Bạn có thể truy cập vào từng giá trị bên trong mỗi danh sách riêng lẻ và thực hiện nhiều hoạt động khác nhau trong đó.

Mảng rất hữu ích bởi khả năng lưu trữ nhiều giá trị trong một biến duy nhất.  Điều này giúp cho các đoạn code của bạn cô đọng, dễ đọc và dễ bảo trì hơn. Mảng có thể chứa bất kỳ kiểu dữ liệu nào, bao gồm các kiểu số, chuỗi và đối tượng.

2. Các hoạt động với mảng

Dưới đây là các hoạt động với mảng trong JavaScript:

2.1. Tạo mảng

Lấy ví dụ bạn đang xem một danh sách các ô tô, cú pháp tạo mảng như sau:

let cars = ["bmw", "volvo", "honda"];

Các mục trong một mảng sẽ được đặt trong dấu ngoặc vuông. Ở ví dụ trên, mảng chỉ chứa các giá trị chuỗi, nhưng mảng còn có khả năng chứa nhiều giá trị của các kiểu dữ liệu khác nhau.

2.2. Truy cập các phần tử trong mảng

Mỗi phần tử trong mảng được gán với một chỉ mục, mặc định chỉ mục đầu tiên của mảng bằng 0. Để truy xuất một phần tử đã chỉ định từ một mảng, bạn sử dụng ký tự cặp dấu ngoặc vuông bao quanh giá trị chỉ mục. Để tránh nhầm lẫn, bạn có thể coi chỉ mục là số mục cần bỏ qua, tính từ đầu mảng.

Vẫn theo ví dụ danh sách ô tô ở trên, bạn có cú pháp truy cập như sau:

console.log(cars[0]);
console.log(cars[2]);

Đoạn code trên hiển thị các giá trị “bmw” và “honda” tương ứng trên bảng điều khiển.

2.3. Tính độ dài mảng

Thuộc tính length được dùng để tính độ dài của mảng.

let countOfCars = cars.length; //3

Độ dài của mảng cars được lưu trữ trong biến len. Bạn có thể xem kết quả đầu ra trên bảng điều khiển. Trong ví dụ trên, độ dài của mảng là 3.

3. Các cách tìm kiếm mảng JavaScript

Có nhiều phương pháp khác nhau mà bạn có thể sử dụng để tìm kiếm mảng JavaScript. Tùy thuộc vào từng trường hợp cụ thể mà bạn lựa chọn phương pháp tìm kiếm phù hợp. Trong bài viết này, ICANTECH sẽ gợi ý 4 phương pháp JavaScript search đơn giản và hiệu quả.

3.1. Array.filter()

Bạn có thể sử dụng phương thức Array.filter() để tìm các phần tử trong mảng thỏa mãn điều kiện nhất định. Ví dụ: lấy tất cả các mục trong một mảng số lớn hơn 10, chúng ta có:

const array = [10, 11, 3, 20, 5];

const greaterThanTen = array.filter(element => element > 10);

console.log(greaterThanTen) //[11, 20]

Cú pháp sử dụng phương thức Array.filter() như sau:

let newArray = array.filter(callback);

Trong đó:

- newArray là mảng mới được trả về
- array là mảng được gọi từ phương thức lọc
- callback là hàm gọi lại, được áp dụng cho từng phần tử của mảng

Nếu không có mục nào trong mảng đáp ứng điều kiện thì kết quả trả về là một mảng trống. 

3.2. Array.find()

Phương thức Array.find() dùng để tìm phần tử đầu tiên của mảng đáp ứng một điều kiện nhất định. Giống như phương thức filter, phương thức find cũng lấy một lệnh callback làm đối số và trả về phần tử đầu tiên đáp ứng điều kiện js search.

Ví dụ về phương thức find:

const array = [10, 11, 3, 20, 5];

const greaterThanTen = array.find(element => element > 10);

console.log(greaterThanTen)//11

Cú pháp tìm kiếm như sau:

let element = array.find(callback);

Callback là hàm được thực thi trên mỗi giá trị trong mảng và nhận ba đối số:

- element: phần tử được lặp lại (bắt buộc)
- index: chỉ mục/vị trí của phần tử hiện tại (tùy chọn)
- array: mảng tìm thấy được gọi (tùy chọn)

Trường hợp nếu không có mục nào trong mảng đáp ứng điều kiện thì trả về kết quả không xác định.

3.3. Array.includes() tìm kiếm trong mảng JavaScript

Phương thức includes() xác định một mảng có bao gồm giá trị nhất định nào hay không và trả về true hoặc false thích hợp.

Tiếp tục với ví dụ trên, nếu bạn muốn kiểm tra xem 20 có phải là một trong các phần tử của mảng hay không, bạn có cú pháp:

const array = [10, 11, 3, 20, 5];

const includesTwenty = array.includes(20);

console.log(includesTwenty)//true

Phương thức includes() chấp nhận một giá trị thay vì gọi hàm callback làm đối số. Dưới đây là cú pháp của phương thức includes():

const includesValue = array.includes(valueToFind, fromIndex)

Trong đó:

- valueToFind: giá trị bạn đang kiểm tra trong mảng (bắt buộc)
- fromIndex: chỉ mục hoặc vị trí trong mảng mà bạn muốn bắt đầu tìm kiếm phần tử (tùy chọn).

Nếu muốn kiểm tra xem mảng có chứa 10 ở các vị trí khác ngoài phần tử đầu tiên hay không, bạn hãy xem ví dụ dưới đây:

const array = [10, 11, 3, 20, 5];
const includesTenTwice = array.includes(10, 1);
console.log(includesTenTwice)//false

3.4. Array.indexOf()

Phương thức indexOf() trả về chỉ mục đầu tiên mà tại đó có thể tìm thấy một phần tử nhất định trong mảng. Kết quả trả về là -1 khi phần tử không tồn tại trong mảng.

Dưới đây là ví dụ cách tìm kiếm trong mảng JavaScript:

const array = [10, 11, 3, 20, 5];

const indexOfThree = array.indexOf(3);

console.log(indexOfThree)//2

Gần tương tự với cú pháp của phương thức include, chúng ta có cú pháp indexOf là:

const indexOfElement = array.indexOf(element, fromIndex)

Trong đó:

- element: phần tử bạn đang kiểm tra trong mảng (bắt buộc)
- fromIndex: chỉ mục/ vị trí trong mảng mà bạn muốn bắt đầu tìm kiếm phần tử đó (tùy chọn)

Cả hai phương thức include và indexOf đều sử dụng đẳng thức ( '===' ) để tìm kiếm mảng. Nếu các giá trị thuộc các loại khác nhau (ví dụ: '4' và 4), chúng sẽ lần lượt trả về kết quả là false và -1 tương ứng.

Với các phương thức js search này, bạn không cần sử dụng vòng lặp for để tìm kiếm trong mảng. Mỗi phương thức được giới thiệu ở trên sẽ ứng với từng trường hợp tìm kiếm trong mảng JavaScript khác nhau:

- Sử dụng filter nếu bạn muốn tìm tất cả các phần tử trong mảng đáp ứng điều kiện cụ thể.
- Sử dụng find nếu bạn muốn kiểm tra xem có ít nhất một mục nào đó đáp ứng một điều kiện cụ thể hay không.
- Sử dụng include nếu bạn muốn kiểm tra xem mảng có chứa một giá trị cụ thể hay không.
- Sử dụng indexOf nếu bạn muốn tìm chỉ mục của một mục cụ thể trong mảng.

4. Lời Kết

Vậy là qua bài viết trên, chúng ta đã cùng nhau tìm hiểu về mảng và cách tìm kiếm trong mảng JavaScript. ICANTECH mong rằng thông qua những kiến thức được chia sẻ, bạn đã hiểu được về JavaScript search. 

Cảm ơn bạn đã đọc bài viết, nếu bạn đang quan tâm đến học lập trình online thì hãy tham khảo ngay các khóa học lập trình dưới đây tại ICANTECH nhé

Nguồn ảnh: ICANTECH.