JavaScript Day 23. flatMap()

我记得在写 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()