Tìm kiếm phần tử trong mảng
JavaScript cung cấp nhiều phương thức tìm kiếm mảng, phù hợp với từng nhu cầu:
| Phương thức | Trả về | Dùng khi |
|---|---|---|
includes() | true/false | Chỉ cần biết CÓ/KHÔNG |
indexOf() | Index (số) hoặc -1 | Cần vị trí, tìm từ đầu |
lastIndexOf() | Index hoặc -1 | Cần vị trí, tìm từ cuối |
find() | Phần tử đầu tiên khớp | Tìm object/điều kiện phức tạp |
findIndex() | Index đầu tiên khớp | Cần vị trí object khớp điều kiện |
filter() | Mảng các phần tử khớp | Cần TẤT CẢ phần tử khớp |
Ví dụ minh họa với find()
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tìm kiếm mảng</title>
<style>
body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
.find { font-size: 18px; font-weight: 500; font-family: monospace; }
button { padding: 8px 16px; cursor: pointer; }
</style>
</head>
<body>
<h1>Tìm kiếm phần tử trong mảng JavaScript</h1>
<div class="find"></div>
<button class="btn-demo">TÌM "SƯ TỬ"</button>
<h3>Nhấn nút để tìm "sư tử" trong mảng động vật</h3>
<script>
const fillEle = document.querySelector(".find");
const btn = document.querySelector(".btn-demo");
const arr = ["bò", "sư tử", "bò đực", "hổ"];
fillEle.textContent = 'Mảng: ' + JSON.stringify(arr);
// Hàm điều kiện tìm kiếm
function isLion(animal) {
return animal === "sư tử";
}
btn.addEventListener("click", () => {
// find() trả về PHẦN TỬ đầu tiên thỏa mãn
const found = arr.find(isLion);
fillEle.textContent = 'Tìm thấy: ' + found;
// So sánh với includes()
fillEle.textContent += '\nincludes("sư tử"): ' + arr.includes("sư tử");
// findIndex() - lấy vị trí
fillEle.textContent += '\nfindIndex: ' + arr.findIndex(isLion);
});
</script>
</body>
</html>
Ví dụ nâng cao: Tìm trong mảng Object
const users = [
{ id: 1, name: 'An', age: 20 },
{ id: 2, name: 'Bình', age: 25 },
{ id: 3, name: 'Cường', age: 30 }
];
// Tìm user đầu tiên tuổi > 22
const adult = users.find(u => u.age > 22);
// { id: 2, name: 'Bình', age: 25 }
// Tìm index
const adultIndex = users.findIndex(u => u.age > 22); // 1
// Lọc tất cả user tuổi > 22
const adults = users.filter(u => u.age > 22);
// [{ id: 2, name: 'Bình', age: 25 }, { id: 3, name: 'Cường', age: 30 }]
// Kiểm tra tồn tại (boolean)
const hasAdult = users.some(u => u.age > 22); // true
const allAdult = users.every(u => u.age > 22); // false
Hiệu suất
- Tất cả đều **O(n)** - duyệt tuần tự.
- Cần tìm kiếm nhiều lần trên mảng lớn > dùng
SethoặcMap(O(1)). find()dừng sớm khi tìm thấy (short-circuit),filter()duyệt hết.