Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> JavaScript

Cách tìm kiếm phần tử trong mảng JavaScript

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/falseChỉ cần biết CÓ/KHÔNG
indexOf()Index (số) hoặc -1Cần vị trí, tìm từ đầu
lastIndexOf()Index hoặc -1Cần vị trí, tìm từ cuối
find()Phần tử đầu tiên khớpTìm object/điều kiện phức tạp
findIndex()Index đầu tiên khớpCần vị trí object khớp điều kiện
filter()Mảng các phần tử khớpCầ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 Set hoặc Map (O(1)).
  • find() dừng sớm khi tìm thấy (short-circuit), filter() duyệt hết.