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

array.flatMap() - Giới thiệu

Lưu ý: Bài viết này trùng lặp nội dung với ID 1003057783 (Array.prototype.flatMap()). Cả hai đều đề cập đến cùng một phương thức flatMap() của mảng.

Phương thức flatMap() được giới thiệu trong ES2019, cho phép map từng phần tử và làm phẳng (flatten) kết quả với độ sâu 1 trong một lần gọi.

Ví dụ minh họa (cải tiến)

<!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; white-space: pre-wrap; }
        button { padding: 8px 16px; cursor: pointer; }
    </style>
</head>
<body>
    <h1>JavaScript Array flatMap()</h1>
    <div class="sample"></div>
    <button class="btn-demo">THỰC HIỆN flatMap()</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");
        
        let arr = ["bò", ["bò đực", "sư tử", "hổ"], "cừu"];
        
        // Hiển thị mảng gốc với định dạng đẹp
        fillEle.textContent = 'Mảng gốc:\n' + JSON.stringify(arr, null, 2);

        btn.addEventListener("click", () => {
            // flatMap: map từng phần tử x → x, sau đó flat depth 1
            arr = arr.flatMap(x => x);
            fillEle.textContent = 'Mảng sau flatMap():\n' + JSON.stringify(arr, null, 2);
        });
    </script>
</body>
</html>

Ví dụ nâng cao: Xử lý dữ liệu thực tế

// Dữ liệu: đơn hàng chứa nhiều sản phẩm
const orders = [
    { id: 1, items: ['Áo', 'Quần'] },
    { id: 2, items: ['Mũ'] },
    { id: 3, items: ['Giày', 'Tất', 'Váy'] }
];

// Lấy danh sách tất cả sản phẩm (flatMap thay cho map + flat)
const allItems = orders.flatMap(order => order.items);
console.log(allItems); 
// ["Áo", "Quần", "Mũ", "Giày", "Tất", "Váy"]

// Lọc và biến đổi: chỉ lấy đơn hàng có >1 sản phẩm, trả về tên in hoa
const bigOrders = orders
    .filter(o => o.items.length > 1)
    .flatMap(o => o.items.map(item => item.toUpperCase()));
console.log(bigOrders); 
// ["ÁO", "QUẦN", "GIÀY", "TẤT", "VÁY"]

Đặc điểm chính

• Hiệu suất: Tốt hơn arr.map(fn).flat() vì chỉ duyệt mảng một lần.
• Depth cố định: Chỉ làm phẳng 1 cấp. Cần depth > 1 thì dùng flat(depth) riêng.
• Callback trả về: Nên trả về mảng. Trả về giá trị đơn → được bọc trong mảng [value].
• Không biến đổi gốc: Trả về mảng mới.

Polyfill đơn giản

if (!Array.prototype.flatMap) {
    Array.prototype.flatMap = function(callback, thisArg) {
        return Array.prototype.concat.apply([], this.map(callback, thisArg));
    };
}