Hàm findIndex() trong JavaScript
Trần Thị Vân
- 956
- 29/08/2025
Chức năng của Hàm findIndex() trong JavaScript
Hàm findIndex() trong JavaScript dùng để lấy khóa (key) của phần tử đầu tiên trong mảng thỏa một điều kiện đưa ra, khóa (key) hay còn gọi là chỉ số (index), nếu không tìm được phần tử nào thỏa điều kiện thì sẽ trả về -1.
Code Hàm findIndex() trong JavaScript
Hàm findIndex() dùng function trong JavaScript
// Lấy khóa(key) của phần tử đầu tiên thỏa điều kiện >30
var mang = [10,20,45,35,40,30];
document.write(mang.findIndex(laySo)); // Kết quả: 2 (phần tử có khóa(key) thứ 2 là vị trí đầu tiên thỏa điều kiện), phần tử này có giá trị 45
function laySo(phantu) {
return phantu >30;
}
<script>
// Lấy khóa(key) của phần tử đầu tiên thỏa điều kiện >30
document.write("<b>Lấy khóa(key) của phần tử đầu tiên thỏa điều kiện >30</b><br>");
var mang = [10,20,45,35,40,30];
document.write(mang.findIndex(laySo)+"<br>"); // Kết quả: 2 (phần tử có khóa(key) thứ 2 là vị trí đầu tiên thỏa điều kiện), phần tử này có giá trị 45
function laySo(phantu) {
return phantu >30;
}
// Lấy khóa(key) của phần tử đầu tiên thỏa điều kiện >50
document.write("<b>Lấy khóa(key) của phần tử đầu tiên thỏa điều kiện >50</b><br>");
var manghai = [10,20,45,35,40,30];
document.write(manghai.findIndex(laySoHai)); // Kết quả: -1 vì không có phần tử nào thỏa điều kiện
function laySoHai(phantu) {
return phantu >50;
}
</script>
Kết quả:
Lấy khóa(key) của phần tử đầu tiên thỏa điều kiện >30
2
Lấy khóa(key) của phần tử đầu tiên thỏa điều kiện >50
-1
Hàm findIndex() không dùng function trong JavaScript
// Lấy khóa(key) của phần tử đầu tiên thỏa điều kiện >30
var mang = [10,20,45,35,40,30];
document.write(mang.findIndex(phantu => phantu >30)); // Kết quả: 2 (phần tử có khóa(key) thứ 2 là vị trí đầu tiên thỏa điều kiện), phần tử này có giá trị 45
<script>
// Lấy khóa(key) của phần tử đầu tiên thỏa điều kiện >30
document.write("<b>Lấy khóa(key) của phần tử đầu tiên thỏa điều kiện >30</b><br>");
var mang = [10,20,45,35,40,30];
document.write(mang.findIndex(phantu => phantu >30)+"<br>"); // Kết quả: 2 (phần tử có khóa(key) thứ 2 là vị trí đầu tiên thỏa điều kiện), phần tử này có giá trị 45
// Lấy khóa(key) của phần tử đầu tiên thỏa điều kiện >50
document.write("<b>Lấy khóa(key) của phần tử đầu tiên thỏa điều kiện >50</b><br>");
var manghai = [10,20,45,35,40,30];
document.write(manghai.findIndex(phantu => phantu >50)); // Kết quả: -1 vì không có phần tử nào thỏa điều kiện
</script>
Kết quả:
Lấy khóa(key) của phần tử đầu tiên thỏa điều kiện >30
2
Lấy khóa(key) của phần tử đầu tiên thỏa điều kiện >50
-1
Khi nào nên dùng hàm findIndex() trong JavaScript?
findIndex() phù hợp khi bạn cần xác định vị trí của phần tử đầu tiên trong mảng đáp ứng một điều kiện cụ thể. Giá trị nhận được là chỉ số của phần tử, vì vậy bạn có thể tiếp tục sử dụng vị trí này để kiểm tra, cập nhật hoặc xử lý dữ liệu.
Điểm đáng chú ý là hàm chỉ trả về vị trí của phần tử đầu tiên tìm thấy. Nếu không có phần tử nào phù hợp, kết quả sẽ là -1. Điều này giúp bạn dễ dàng phân biệt giữa trường hợp tìm thấy và không tìm thấy dữ liệu.
Tìm vị trí phần tử đầu tiên thỏa điều kiện
Khi mảng chứa nhiều đối tượng hoặc dữ liệu cần kiểm tra theo một tiêu chí cụ thể, findIndex() giúp xác định nhanh vị trí cần xử lý mà không phải tự viết vòng lặp.
Chẳng hạn, bạn có danh sách sản phẩm và muốn tìm vị trí của sản phẩm có mã xác định. Hàm sẽ lần lượt kiểm tra từng phần tử cho đến khi gặp phần tử đầu tiên thỏa điều kiện.
const products = [
{ id: 101, name: "Laptop" },
{ id: 205, name: "Bàn phím" },
{ id: 309, name: "Chuột" }
];
const index = products.findIndex(product => product.id === 205);
console.log(index);
Kết quả là 1, vì sản phẩm có id bằng 205 nằm ở vị trí thứ hai trong mảng. Trong JavaScript, chỉ số của mảng bắt đầu từ 0.
Cách dùng này đặc biệt hữu ích khi bạn không chỉ muốn biết dữ liệu có tồn tại mà còn cần vị trí cụ thể của dữ liệu để thực hiện thao tác tiếp theo.
Phân biệt findIndex() với find() và indexOf()
Ba phương thức findIndex(), find() và indexOf() đều có thể được sử dụng để tìm kiếm trong mảng nhưng trả về những loại kết quả khác nhau.
| Phương thức | Kết quả trả về | Phù hợp khi |
|---|---|---|
| findIndex() | Vị trí của phần tử | Cần biết phần tử nằm ở chỉ số nào |
| find() | Phần tử đầu tiên thỏa điều kiện | Cần lấy trực tiếp dữ liệu tìm được |
| indexOf() | Vị trí của giá trị được tìm | Cần tìm một giá trị cụ thể bằng phép so sánh trực tiếp |
Ví dụ, nếu cần lấy toàn bộ đối tượng sản phẩm có mã 205, find() sẽ phù hợp hơn. Ngược lại, nếu muốn biết sản phẩm đó đang đứng ở vị trí nào để thay đổi hoặc xóa phần tử, findIndex() sẽ thuận tiện hơn.
indexOf() thường phù hợp với các giá trị đơn giản như chuỗi hoặc số. Với dữ liệu cần kiểm tra theo thuộc tính của từng đối tượng, findIndex() linh hoạt hơn vì cho phép xây dựng điều kiện tìm kiếm.
Xử lý trường hợp findIndex() trả về -1
Khi không có phần tử nào đáp ứng điều kiện, findIndex() trả về -1. Đây là giá trị cần kiểm tra trước khi sử dụng chỉ số để thao tác với mảng.
const users = [
{ id: 1, name: "An" },
{ id: 2, name: "Bình" }
];
const index = users.findIndex(user => user.id === 10);
if (index !== -1) {
console.log("Tìm thấy tại vị trí:", index);
} else {
console.log("Không tìm thấy người dùng");
}
Việc kiểm tra -1 giúp tránh xử lý nhầm khi dữ liệu không tồn tại. Đây cũng là cách sử dụng an toàn hơn khi mảng được lấy từ API, biểu mẫu hoặc nguồn dữ liệu có thể thay đổi.
Nếu mục tiêu chỉ là kiểm tra một phần tử có tồn tại hay không, bạn không nhất thiết phải dùng findIndex(). Nhưng nếu cần cả vị trí để tiếp tục thao tác, đây là phương thức ngắn gọn và phù hợp.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Hàm findIndex() trong JavaScript.
- 0 Bình luận
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 *