flatMap() javascript bạn đã biết chưa?

Hê lô lại là mình đây 😆. Hôm nay chúng ta cùng tìm hiểu về một method khá hay trong Javascript nhé! cùng xem method flatMap() giúp ích gì cho chúng ta nhé 👌.

flatMap() Javascript

Method flatMap() trong Javascript sẽ giúp chúng ta lặp qua các phần tử của mảng, sau đó đưa các phần tử của mảng này trở về cùng một cấp (flatten) và trả về một mảng mới.

Để hiểu rõ hơn về method này chúng ta cùng xem một ví dụ nhé 👌.

const vehicles = [
  {
    name: "car",
    symbol: "🚙",
    companies: ["Toyota", "Ferrari", "Ford", "Jaguar"],
  },
  {
    name: "bicycle",
    symbol: "🚲",
    companies: ["Ares", "Kuwahara"],
  },
  {
    name: "train",
    symbol: "🚆",
    companies: [],
  },
  {
    name: "scooter",
    symbol: "🛴",
    companies: ["Besrey"],
  },
];

Yêu cầu đưa ra là chúng ta sẽ phải lấy danh sách companies trong mỗi phần tử của mảng trên, kết quả sẽ nhìn như sau:

const companies = ["Toyota", "Ferrari", "Ford", "Jaguar", "Ares", "Kuwahara", "Besrey"];

Để giải quyết yêu cầu đưa ra chúng ta có thể dùng các method như map, foreach,... qua một vài bước chúng ta sẽ có kết quả như trên. Trong phạm vi bài viết này mình sẽ hướng dẫn các bạn dùng flatMap() để giải quyết nhanh chóng yêu cầu trên nhé 🤩.

Với flatMap() chúng ta đơn giản sẽ làm như sau:

const companies = vehicles.flatMap(vehicle => vehicle.companies);

Kết quả của chúng ta là một mảng đã flat. Nếu dùng map bình thường chúng ta sẽ thu được kết quả:

[
    [
        "Toyota",
        "Ferrari",
        "Ford",
        "Jaguar"
    ],
    [
        "Ares",
        "Kuwahara"
    ],
    [],
    [
        "Besrey"
    ]
]

Đây cũng là điểm khác biệt giữa map vs flatMap.

Method flatMap() giống với khi sử dụng kết hợp map() và flat() với depth = 1. Các bạn có thể dùng flatMap() hoặc kết hợp map() vs flat() kết quả sẽ như nhau.

Ở vd trên nếu ta sử dụng map() vs flat() sẽ như thế này:

const companies = vehicles.map(vehicle => vehicle.companies).flat();
// hoặc vehicles.flatMap(vehicle => vehicle.companies);

Kết luận

Hy vọng bài viết sẽ giúp ích được cho các bạn. Chúng ta sẽ cùng tìm hiểu về các method hữu ích khác của Javascript trong các bài viết sắp tới nhé.

Cảm ơn các bạn đã dành thời gian đọc bài viết 🤞🎉.