配列高次関数の理解

配列の高次の関数がどのように動作するかを理解することで、JavaScriptの複雑なループ操作を非常にシームレスにすることができます.
この項で論じられる高次関数は以下の通りです.forEach() , map() , filter() , and reduce() .
この記事の最後には、それぞれの関数がどのようなものを表しているのか、そして問題解決にどのように適用するかを理解します.

配列。forehat ()

ランニング.forEach() 配列のメソッドは、配列内に存在する各要素のコールバック関数を実行します.
コールバック関数は何を操作するかを指定するブロックです.
下のスニペットで.forEach() メソッドはすべてを繰り返しますfriend 中で要素friends 配列を使用して、各文字列を${friend} テンプレートリテラル.

    const friends = ['Chief', 'Somto', 'Elma', 'Zee'];
    friends.forEach(friend => {
      console.log (`I love working with ${friend}`);
    });

    // I love working with Chief
    // I love working with Somto
    // I love working with Elma
    // I love working with Zee

配列。map ()

The .map() メソッドは.forEach() 新しい配列を生成する以外は.

と.map() 既存の配列の各要素を操作することで、新しい配列を作成できます.上の図では、[2,3,4] , そして、マッピングによって、新しい配列は原作のアレーの正方形を含む[4,9,16] .

const ingredients = ['Jam', 'oat', 'lemon', 'lettuce', 'oil', 'fish'];

const newMeal = ingredients.map(ingredient => {
  return ingredient[0];
});

console.log(newMeal); // ['J', 'o', 'l', 'l', 'o', 'f']
console.log(newMeal.join(' ')); //Jollof

上のスニペットではingredients を作成するためにマップされた配列newMeal 配列を返します.装着することにより気づく.join(' ') にnewMeal array 1 i文字列が1つの文字列になります.

配列。filter ()

.filter ()メソッドは似たようなプロパティを共有します.map ()メソッドは、新しい配列を返します.しかし、名前が示すように、配列内の要素を任意の条件に基づいてフィルター処理します.
フィルタリング文字列

const stack = ['desk', 17, 'chair', 5, 'sofa'];
const newStack = stack.filter(item => {
    return typeof(item) === 'string'; 
});

console.log(newStack); //['desk', 'chair', 'sofa']

フィルタリング番号

const stack = ['desk', 17, 'chair', 5, 'sofa'];
const newStack = stack.filter(item => {
    return typeof(item) === 'number'; 
});
console.log(newStack); //[17, 5]

配列。reduce ()

The .reduce() メソッドは配列を繰り返し、単一の値を返します.この値は、任意のデータ構造-番号、文字列、配列などです.
コールバック関数がreduce メソッドを受け入れるaccumulator and currentValue パラメータとして1つの値を返します.
以下のコードスニペットで、reduceメソッドを使用すると、socialMedia 配列の値を取得するためにname プロパティ.
注意:オブジェクト配列上のreduceメソッドを使用する場合、2番目のパラメータ(スニペット内の空の配列のような)を追加する必要があります.

const socialMedia = [
  {name: 'Instagram', url:'jessontel.com'},
  {name: 'twitter', url:'abc.com'}
];

const mediaName = socialMedia.reduce((accumulator,currentValue) => {
  accumulator.push(currentValue.name);
  return accumulator
}, []);

console.log(mediaName); //[ 'Instagram', 'twitter' ]

アナザークイックreduce 例

const expenseList = [1000, 50, 250, 999];
const expenseSum = expenseList.reduce((accumulator, currentValue) => {
  return accumulator + currentValue;
, 0}
);
console.log(expenseSum); // 2,299

上のreduceメソッドの例ではexpenseList 配列はexpenseSum 値2999.
配列の最初の要素は既定のアキュムレータ値で、2番目の要素は現在の値です.

結論

反復子はJavascriptだけではなく、一般的にプログラミングにおいて非常に有用な方法です.それらの各々は、特定の問題を解決し、配列操作を簡単な妙技にする.
読書ありがとう!👋🏽
あなたがこの記事が役に立つとわかるならば、私に知らせて、他の人が利益を得ることができるように、それをあまりにも共有してください.
私と連絡をとってください.