Phương thức Array.prototype.flatMap() trong JavaScript

flatMap() - Kết hợp map() và flat()

Phương thức flatMap() (ES2019) thực hiện việc map từng phần tử qua một hàm callback, sau đó làm phẳng (flatten) kết quả với độ sâu 1. Nó tương đương với arr.map(...).flat() nhưng hiệu quả hơn.

Cú pháp

arr.flatMap(callback(currentValue[, index[, array]])[, thisArg])

Ví dụ minh họa

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Array flatMap()</title>
    <style>
        body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
        .sample { font-size: 18px; font-weight: 500; font-family: monospace; }
        button { padding: 8px 16px; cursor: pointer; }
    </style>
</head>
<body>
    <h1>JavaScript Array flatMap()</h1>
    <div class="sample"></div>
    <button class="btn-demo">CHUYỂN ĐỔI</button>
    <h3>Nhấn nút để chuyển mảng lồng nhau thành mảng phẳng</h3>

    <script>
        const fillEle = document.querySelector(".sample");
        const btn = document.querySelector(".btn-demo");
        
        // Mảng lồng nhau (nested array)
        let arr = ["bò", ["bò đực", "sư tử", "hổ"], "cừu"];
        
        // Hiển thị mảng gốc
        fillEle.innerHTML = 'Mảng gốc: ' + JSON.stringify(arr);

        btn.addEventListener("click", () => {
            // flatMap: map mỗi phần tử rồi làm phẳng depth 1
            arr = arr.flatMap(x => x);
            fillEle.innerHTML = 'Mảng sau flatMap: ' + JSON.stringify(arr);
        });
    </script>
</body>
</html>

Cách hoạt động chi tiết

// Mảng gốc
["bò", ["bò đực", "sư tử", "hổ"], "cừu"]

// Bước 1: Map - callback trả về chính phần tử
"bò"           → "bò"           (string, không phải mảng)
["bò đực"...]  → ["bò đực"...]  (mảng)
"cừu"          → "cừu"          (string)

// Bước 2: Flat depth 1
["bò", "bò đực", "sư tử", "hổ", "cừu"]

So sánh với map() + flat()

// Cách cũ
const result = arr.map(x => x).flat();

// Cách mới (tối ưu hơn)
const result = arr.flatMap(x => x);

Ứng dụng thực tế

// Tách câu thành từ (mỗi câu map thành mảng từ, rồi gộp lại)
const sentences = ["Hello world", "JavaScript is great"];
const words = sentences.flatMap(s => s.split(" "));
// ["Hello", "world", "JavaScript", "is", "great"]

// Lọc và biến đổi cùng lúc (trả về mảng rỗng để loại bỏ)
const numbers = [1, 2, 3, 4, 5];
const doubledEvens = numbers.flatMap(n => n % 2 === 0 ? [n * 2] : []);
// [4, 8]

Lưu ý

• Chỉ làm phẳng 1 cấp độ (depth = 1). Cần depth > 1 thì dùng map().flat(depth).
• Callback phải trả về mảng (hoặc giá trị có thể chuyển thành mảng). Trả về giá trị đơn lẻ sẽ bị bọc trong mảng.
• Không thay đổi mảng gốc, trả về mảng mới.