JavaScript の flatMap とは?そして、どのようにして私のコードをよりきれいにしましたか

組み込み関数の JavaScript を見て、次のように考えたことはありませんか?

I understand what this is but I do not know where I can use this.

Array.flatMap() について読んだとき、まさにこの考えが頭に浮かびました. .そこで、日々のコーディングとビオラでのアプリケーションを探し始めました!!ユースケースを見つけました.この投稿では、最初に Array.flatmap() を確認します.次に、実際の問題でそれをどのように使用したかを見てください.

Array.flatMap とは正確には何ですか?

FlatMap is a mix of two words which are derived from latin words blah blah blah...

冗談だ.
Array.flatMap Array.flat は 2 つの配列メソッドの混合物です.と Array.map .個人的には、

Array.flatネストされた配列を平坦化するために使用されます.例えば

const names = ['Amit', 'Karishma', 'Kunal', ['Pankaj', 'Rahee']];

console.log(names.flat());
// expected output: ["Amit", "Karishma", "Kunal", "Pankaj", "Rahee"]

Array.map各配列要素に対して操作を実行して値を返すことにより、新しい配列を作成するために使用されます.例えば

const names = ['Amit', 'Karishma', 'Kunal', 'Pankaj', 'Rahee'];
const everyOneLovesDogs = names.map((name) => {
  return `${name} loves dogs`;
});

console.log(everyOneLovesDogs);
// expected output: ["Amit loves dogs", "Karishma loves dogs", "Kunal loves dogs", "Pankaj loves dogs", "Rahee loves dogs"]

ご想像のとおり、Array.flatMap配列をマップし、返された配列内のネストされた配列をフラット化します. flatMap の簡単な例は次のようになります.

const usersWithInterests = [
  {
    name: 'Amit',
    interests: ['Cricket', 'Music'],
  },
  {
    name: 'Karishma',
    interests: ['Drawing', 'Reading'],
  },
  {
    name: 'Pranav',
    interests: ['Crafting', 'Biking'],
  }
];

const interests = usersWithInterests.flatMap((user) => {
  return user.interests;
});

console.log(interests);
// Expected Output: ["Cricket", "Music", "Drawing", "Reading", "Crafting", "Biking"]

現実の問題で Array.flatMap をどのように使用したか?

製品のカテゴリのドロップダウンを作成する必要がある機能に取り組んでいました. getProducts からの実際の応答API は次のようになります.

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'
    }
  ]
}

製品オブジェクトには、値が配列に格納されるキーとしてカテゴリがあります.

だから私は3つのことをしなければならなかった

各製品からカテゴリを取得

その配列をフラット化

配列から一意の値を取得します.

最初の 2 つのタスクに 2 つの別々の関数を使用する代わりに、1 つの関数を使用しました: Array.flatmap .次に、その配列に設定操作を適用して、一意の値を取得しました.

最終的なコード スニペットは次のようになります.

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"]

結論
Array.flatMap も応募していただけると幸いです.それらが適合し、よりクリーンなコードを生成する場合.このような興味深い情報については、引き続きご注目ください.それまで、Happy Coding !!

この記事は originally published here でした. .このような興味深い読み物については、visit my blog を参照してください. .