我記得在寫 JavaScript 文章的時候，寫的最開心的就是陣列系列方法 ( 不知道為什麼，大概是很多實做吧？ )，寫完以後自己其實想了很久接下來呢？還有什麼是特別想研究的嗎？後來如大家所看到的，我開始了基礎觀念之旅。

基礎觀念的部分自己其實沒有寫得很順利，可能是因為太多專有名詞，我反而在理解上比較吃力，就在我也不知道自己還有多少基礎觀念要寫的時候，同學突然分享一篇陣列方法，我突然覺得終於可以休息一下暫停基礎觀念了QQ，讓我們來實做吧!!

什麼是 flatMap()

flatMap() 是 flat() 和 map() 兩種方法的混合體，運作的過程比較像是 map() 執行每一個元素，然後再使用 flat() 展開；flatMap() 回傳的是一個新陣列，因此不影響到原陣列。

這裡先看一下 flat() 的範例，flat() 方法用來展開陣列中的組合，如下：

const animals = ['duck', 'chick', ['cow','horse', 'goat']];
console.log(animals.flat()); // ['duck', 'chick', 'cow','horse', 'goat']

我們額外說明一下 flat() 方法，他預設是展開一個陣列，如果希望展開更多陣列，可以代入參數，範例為 flat() 預設為 1 的時候：

const animals = ['duck', 'chick', ['cow',['horse'], 'goat']];
console.log(animals.flat()); // ['duck', 'chick', 'cow',['horse'], 'goat']

接著來看看，當我們代入參數 2 以及代入 Infinity 的情況：

const animals = ['duck', 'chick', ['cow',['horse'], 'goat']];
console.log(animals.flat()); // ['duck', 'chick', 'cow', 'horse', 'goat']

// Infinity 意思為無限水平
const animals = ['duck', 'chick', ['cow',['horse'], 'goat']];
console.log(animals.flat()); // ['duck', 'chick', 'cow', 'horse', 'goat']

代入 Infinity 參數的時候，可以看到即使不設定展開的層數，也會自動全部被展開。

接著我們回到 flatMap() 方法，上面說到 flatMap() 是 flat() 和 map() 兩種方法的混合體，因此他既可以對每個元素做運算，也可以展開陣列，比較不一樣的地方是 flatMap() 方法只能展開一個陣列；先來看一下 flatMap() 方法的簡易範例：

['My duck', 'is cute'].flatMap(words => words.split(' '))
//[ 'My', 'duck', 'is', 'cute' ]

從這個簡易範例來看，他確實可以做到跟 flat() 方法一樣的事。

flatMap() 方法實戰

我還沒有實際寫到 flatMap() 方法，因此先借網路大神們的範例來與各位討論；究竟在實戰上，flatMap() 方法會怎麼被使用：

const response = {
  "status": "success",
  "products": [
    {
      "name": 'One Plus 7T',
      "categories": ['Technology', 'Mobile', 'SmartPhone'],
      "description": 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
      "rating": '4.5'
    },
    {
      "name": 'MacBook Pro 2018',
      "categories": ['Technology', 'Computer', 'Laptop'],
      "description": 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
      "rating": '4.8'
    },
    {
      "name": 'LG Monitor 221G',
      "categories": ['Technology', 'Monitor'],
      "description": 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
      "rating": '4.3'
    }
  ]
}

上面這一段的情境是我們要為產品創建一個下拉選單，於是這邊我們會有三個步驟要處理：

1. 抓取產品的類別
2. 展開資料裡的陣列
3. 從陣列中抓取唯一的值

範例中只有使用 flatMap() 方法抓取並展開資料，然後使用 set() 方法取出唯一值：

const { products } = response;
const allCategories = products.flatMap((product) => {
  return product.categories;
});

const uniqueCategories = [...new Set(allCategories)];

console.log(uniqueCategories);
// Expected Output: ["Technology", "Mobile", "SmartPhone", "Computer", "Laptop", "Monitor"]

不知道大家有沒有覺得這個新方法蠻簡潔又迅速呢？這邊感謝同學的分享，讓我又能多學到一個方法~

參考資料：

What is flatMap in JavaScript? And how made my code cleaner
Array.prototype.flatMap()