Hàm indexOf() trong JavaScript

Hàm indexOf() trong JavaScript
Hàm indexOf() trong JavaScript

Chức năng của Hàm indexOf() trong JavaScript

Hàm indexOf() trong JavaScript dùng để lấy khóa (key) của phần tử đầu tiên có giá trị cần tìm hoặc để lấy vị trí của một chuỗi con trong chuỗi lớn, nếu không tìm thấy chuỗi hoặc phần tử có giá trị cần tìm thì sẽ trả về -1.

Cú pháp của Hàm indexOf() trong JavaScript

Hàm indexOf() xử lý mảng

mang.indexOf(giatri);

mang: Mảng.

giatri: Giá trị của phần tử cần kiểm tra.

mang.indexOf(giatri,vitribatdau);

mang: Mảng.

giatri: Giá trị của phần tử cần kiểm tra.

vitribatdau: Vị trí bắt đầu tìm.

Hàm indexOf() xử lý chuỗi

chuoigoc.indexOf("chuoicon");

chuoicon: Chuỗi con cần kiểm tra.

chuoigoc: Chuỗi gốc.

chuoigoc.indexOf("chuoicon",vitribatdau);

chuoicon: Chuỗi con cần kiểm tra.

chuoigoc: Chuỗi gốc.

vitribatdau: Vị trí bắt đầu tìm.

Code Hàm indexOf() trong JavaScript

Hàm indexOf() xử lý mảng trong JavaScript

<script>
// Tìm khóa (key) của phần tử đầu tiên có giá trị là 45, bắt đầu tìm từ vị trí 1
document.write("<b>Tìm khóa (key) của phần tử đầu tiên có giá trị là 45, bắt đầu tìm từ vị trí 1</b><br>");
var mang  = [10,20,45,35,45,30];
document.write(mang.indexOf(45,1)+"<br>"); // Kết quả: 2

// Tìm khóa (key) của phần tử đầu tiên có giá trị là 45, bắt đầu tìm từ vị trí 3
document.write("<b>Tìm khóa (key) của phần tử đầu tiên có giá trị là 45, bắt đầu tìm từ vị trí 3</b><br>");
var mang  = [10,20,45,35,45,30];
document.write(mang.indexOf(45,3)+"<br>"); // Kết quả: 4

// Tìm khóa (key) của phần tử đầu tiên có giá trị là 45, tìm trong toàn mảng
document.write("<b>Tìm khóa (key) của phần tử đầu tiên có giá trị là 45, tìm trong toàn mảng</b><br>");
var mang  = [10,20,45,35,45,30];
document.write(mang.indexOf(45)+"<br>"); // Kết quả: 2

// Tìm khóa (key) của phần tử đầu tiên có giá trị là 455, tìm trong toàn mảng
document.write("<b>Tìm khóa (key) của phần tử đầu tiên có giá trị là 455, tìm trong toàn mảng</b><br>");
var mang  = [10,20,45,35,45,30];
document.write(mang.indexOf(455)); // Kết quả: -1 vì không tìm thấy phần tử có giá trị 455
</script>

Kết quả:

Tìm khóa (key) của phần tử đầu tiên có giá trị là 45, bắt đầu tìm từ vị trí 1
2
Tìm khóa (key) của phần tử đầu tiên có giá trị là 45, bắt đầu tìm từ vị trí 3
4
Tìm khóa (key) của phần tử đầu tiên có giá trị là 45, tìm trong toàn mảng
2
Tìm khóa (key) của phần tử đầu tiên có giá trị là 455, tìm trong toàn mảng
-1

Chạy Thử

Hàm indexOf() xử lý chuỗi trong JavaScript

<script>
// Tìm vị trí xuất hiện của từ web, bắt đầu tìm từ vị trí 1
document.write("<b>Tìm vị trí xuất hiện của từ web, bắt đầu tìm từ vị trí 1</b><br>");
var chuoigoc  = "web mới thiết kế web";
document.write(chuoigoc.indexOf("web",1)+"<br>"); // Kết quả: 17

// Tìm vị trí xuất hiện của từ web, bắt đầu tìm từ vị trí 0
document.write("<b>Tìm vị trí xuất hiện của từ web, bắt đầu tìm từ vị trí 0</b><br>");
var chuoigochai  = "web mới thiết kế web";
document.write(chuoigochai.indexOf("web",0)+"<br>"); // Kết quả: 0

// Tìm vị trí xuất hiện của từ web, tìm toàn chuỗi
document.write("<b>Tìm vị trí xuất hiện của từ web, tìm toàn chuỗi</b><br>");
var chuoigocba  = "web mới thiết kế web";
document.write(chuoigocba.indexOf("web")+"<br>"); // Kết quả: 0

// Tìm vị trí xuất hiện của từ website, tìm toàn chuỗi
document.write("<b>Tìm vị trí xuất hiện của từ website, tìm toàn chuỗi</b><br>");
var chuoigocba  = "web mới thiết kế web";
document.write(chuoigocba.indexOf("website")); // Kết quả: -1 vì không tìm được chuỗi cần tìm
</script>

Kết quả:

Tìm vị trí xuất hiện của từ web, bắt đầu tìm từ vị trí 1
17
Tìm vị trí xuất hiện của từ web, bắt đầu tìm từ vị trí 0
0
Tìm vị trí xuất hiện của từ web, tìm toàn chuỗi
0
Tìm vị trí xuất hiện của từ website, tìm toàn chuỗi
-1

Chạy Thử

Khi nào nên sử dụng indexOf() trong JavaScript?

indexOf() phù hợp khi cần xác định một giá trị có xuất hiện trong chuỗi hoặc mảng hay không, đồng thời biết chính xác vị trí của giá trị đó. Điểm quan trọng là kết quả trả về luôn cho biết vị trí tìm thấy đầu tiên hoặc -1 nếu không có kết quả.

Phân biệt indexOf() với includes() khi kiểm tra dữ liệu

Cả indexOf() và includes() đều có thể dùng để kiểm tra một giá trị có tồn tại hay không, nhưng mục đích sử dụng không hoàn toàn giống nhau. includes() phù hợp khi chỉ cần nhận kết quả true hoặc false, trong khi indexOf() hữu ích hơn khi cần lấy vị trí của phần tử.

Chẳng hạn, nếu chỉ muốn kiểm tra một mảng có chứa một giá trị, includes() thường dễ đọc hơn:

const languages = ["JavaScript", "PHP", "Python"];

console.log(languages.includes("PHP"));
// true

Nếu cần biết giá trị đó nằm ở vị trí nào, indexOf() là lựa chọn phù hợp:

const languages = ["JavaScript", "PHP", "Python"];

console.log(languages.indexOf("PHP"));
// 1

Vì vậy, có thể hiểu đơn giản: includes() trả lời câu hỏi “có hay không”, còn indexOf() trả lời thêm “nằm ở đâu”. Khi chỉ cần kiểm tra sự tồn tại, ưu tiên includes() giúp mã nguồn rõ ý định hơn.

Những trường hợp cần lưu ý khi dùng indexOf()

Khi sử dụng indexOf(), cần phân biệt rõ kết quả 0 và -1. Giá trị 0 nghĩa là phần tử nằm ngay tại vị trí đầu tiên, không phải không tìm thấy. Ngược lại, -1 mới là dấu hiệu giá trị không xuất hiện.

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

console.log(fruits.indexOf("apple"));
// 0

console.log(fruits.indexOf("grape"));
// -1

Một lưu ý khác là phương thức này tìm kiếm theo giá trị và có phân biệt chữ hoa, chữ thường. Vì vậy, "JavaScript" và "javascript" được xem là hai chuỗi khác nhau.

const keyword = "JavaScript";

console.log(keyword.indexOf("Java"));
// 0

console.log(keyword.indexOf("javascript"));
// -1

Ngoài ra, khi dùng indexOf() với mảng, cần nhớ rằng kết quả là vị trí của phần tử được tìm thấy đầu tiên. Nếu cùng một giá trị xuất hiện nhiều lần, phương thức không tự động trả về tất cả vị trí.

Những điểm này đặc biệt quan trọng khi đưa indexOf() vào điều kiện if. Kiểm tra với -1 sẽ rõ ràng và an toàn hơn việc kiểm tra kết quả theo cách dễ nhầm giữa vị trí đầu tiên và trạng thái không tìm thấy.

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Hàm indexOf() trong JavaScript.

  • ★★★★★ ★★★★★
  • 0 Bình luận
Trần Thị Vân | Content Creator Web Mới
Trần Thị Vân
Trần Thị Vân là Content Creator tại Web Mới, phụ trách nghiên cứu, biên soạn nội dung và chia sẻ kiến thức về website, SEO, lập trình cùng các xu hướng công nghệ
Đánh giá
Chia sẻ nội dung đánh giá của bạn về Hàm indexOf() trong JavaScript
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
Đánh giá của bạn
Tên *
Email
Số điện thoại *
Bình luận, Hỏi đáp
Yêu Cầu Báo Giá
Gửi trang web mẫu cần làm theo, chúng tôi sẽ báo giá đến bạn từ Email (tanlucit09@gmail.com - Bùi Tấn Lực) hoặc Zalo (Lực IT - 0398259259) !