高階関数:フィルターを使用して、マップし、より保守性の高いコードを削減します

ソース:Unsplash

高階関数は、コードをより宣言的にすることにより、JavaScriptゲームを強化するのに役立ちます。つまり、短く、シンプルで、読みやすいです。

これらの機能をいつどのように使用するかを知ることが不可欠です。これにより、コードの理解と保守が容易になります。また、関数を簡単に組み合わせることもできます。これは合成と呼ばれ、ここでは詳しく説明しません。この記事では、JavaScriptで最もよく使用される3つの高階関数について説明します。これらは.filter()、. map()、および.reduce()です。

フィルタ

18歳以上の人を除外したい人のリストを受け入れるコードを書くことを想像してください。

リストは次のようになります。

const people = [
 {名前:「John Doe」、年齢:16}、
 {名前:「トーマスコール」、年齢:19}、
 {名前:「Liam Smith」、年齢:20}、
 {名前:「ジェシーピンクマン」、年齢:18}、
];

18歳以上の人を選択する1次関数の例を見てみましょう。ECMAScript標準または略してES6の一部である矢印関数を使用しています。これは、関数を定義する短い方法であり、関数の入力をスキップして、いくつかの括弧、中括弧、セミコロンを返すことができます。

const peopleAbove18 =(コレクション)=> {
  const results = [];
 
  for(let i = 0; i  = 18){
      results.push(person);
    }
  }
  結果を返す;
};

18〜20歳のすべての人を選択したい場合はどうでしょうか。別の関数を作成できます。

const peopleBetween18And20 =(コレクション)=> {
  const results = [];
 
  for(let i = 0; i  = 18 && person.age <= 20){
      results.push(person);
    }
  }
  結果を返す;
};

あなたはすでに多くの繰り返しコードをここで認識しているかもしれません。これは、より一般的なソリューションに抽象化できます。これら2つの機能には共通点があります。これらは、リストを反復処理し、指定された条件でフィルタリングします。

「高階関数は、1つ以上の関数を引数として取る関数です。」— Closurebridge

より宣言的なアプローチである.filter()を使用して、以前の機能を改善できます。

const peopleAbove18 =(コレクション)=> {
  返品コレクション
    .filter((person)=> person.age> = 18);
}

それでおしまい!この高階関数を使用することで、多くの余分なコードを削減できます。また、コードを読みやすくします。物事がどのようにフィルタリングされるかは気にしません。ただフィルタリングしたいだけです。この記事の後半で関数の結合について説明します。

地図

同じ人のリストと、その人がコーヒーを飲むのが好きかどうかを示す名前の配列を見てみましょう。

const coffeeLovers = [「John Doe」、「Liam Smith」、「Jessy Pinkman」];

命令的な方法は次のようになります。

const addCoffeeLoverValue =(コレクション)=> {
  const results = [];
 
  for(let i = 0; i 
    if(coffeeLovers.includes(person.name)){
      person.coffeeLover = true;
    } else {
      person.coffeeLover = false;
    }
 
    results.push(person);
  }
 
  結果を返す;
};

.map()を使用して、これをより宣言的にすることができます。

const incrementAge =(コレクション)=> {
  return collection.map((person)=> {
    person.coffeeLover = coffeeLovers.includes(person.name);
 
    帰還者;
  });
};

繰り返しますが、.map()は高階関数です。関数を引数として渡すことができます。

減らす

この関数は、いつどのように使用するかを知っていれば気に入るはずです。
.reduce()の素晴らしい点は、上記の関数のほとんどを使用して作成できることです。

最初に簡単な例を見てみましょう。私たちはすべての人々の年齢を要約したいと思います。繰り返しますが、命令型アプローチを使用してこれを行う方法を見ていきます。基本的にコレクションをループし、年齢とともに変数を増やします。

const sumAge =(コレクション)=> {
  let num = 0;
 
  collection.forEach((person)=> {
    num + = person.age;
  });
 
  return num;
}

そして、.reduce()を使用した宣言的アプローチ。

const sumAge =(コレクション)=> collection.reduce((sum、person)=> {
 return sum + person.age;
}、0);

.reduce()を使用して、.map()および.filter()の独自の実装を作成することもできます。

const map =(コレクション、fn)=> {
  return collection.reduce((acc、item)=> {
    return acc.concat(fn(item));
  }、[]);
}
constフィルター=(コレクション、fn)=> {
  return collection.reduce((acc、item)=> {
    if(fn(item)){
      return acc.concat(item);
    }
 
    return acc;
  }、[]);
}

これは最初は理解しにくいかもしれません。しかし、.reduce()が基本的に行うことは、コレクションと初期値を持つ変数で開始することです。次に、コレクションを反復処理し、変数に値を追加(または追加)します。

マップ、フィルター、リデュースの組み合わせ

これらの機能が存在することは素晴らしいことです。しかし、良い点は、JavaScriptのArrayプロトタイプに存在することです。これは、これらの機能を一緒に使用できることを意味します!これにより、再利用可能な関数を簡単に作成し、特定の機能を記述するために必要なコードの量を減らすことができます。

.filter()を使用して18歳以下の人を除外することについて説明しました。 。
これらの3つの手順を実際に組み合わせたコードを作成してみましょう。

const people = [
 {名前:「John Doe」、年齢:16}、
 {名前:「トーマスコール」、年齢:19}、
 {名前:「Liam Smith」、年齢:20}、
 {名前:「ジェシーピンクマン」、年齢:18}、
];
const coffeeLovers = [「John Doe」、「Liam Smith」、「Jessy Pinkman」];
const ageAbove18 =(person)=> person.age> = 18;
const addCoffeeLoverProperty =(person)=> {
 person.coffeeLover = coffeeLovers.includes(person.name);
 
 帰還者;
}
const ageReducer =(sum、person)=> {
 return sum + person.age;
}、0);
const coffeeLoversAbove18 =人々
 .filter(ageAbove18)
 .map(addCoffeeLoverProperty);
const totalAgeOfCoffeeLoversAbove18 = coffeeLoversAbove18
 .reduce(ageReducer);
const totalAge = people
 .reduce(ageReducer);

命令的な方法でそれを行うと、多くの繰り返しコードを書くことになります。

.map()、.reduce()、および.filter()を使用して関数を作成するという考え方により、作成するコードの品質が向上します。しかし、それは多くの読みやすさも追加します。関数内で何が起こっているのかを考える必要はありません。分かりやすいです。

次はどこへ行きますか?

高階関数について何かを学んだので、以下の記事がおもしろいかもしれません。

読んでくれてありがとう! :)

この記事を楽しんだ場合は、❤の下のハートボタンを押してください。それは私にとって大きな意味があり、他の人が物語を見るのに役立ちます。

Twitterで挨拶する