JS高次関数


一級オブジェクトの関数の特徴
  • 変数に割り当てることができます.
  • の他の関数のパラメータ(パラメータ)に渡すことができます.
  • は、他の関数の結果によって返されることができる.
  • 1)データ処理のように関数(string,number,boolean,array,object)を処理できることを示す
    2)変数に格納できるので、配列内の要素またはオブジェクトの属性値として格納することもできます.
    高次関数
    高次関数:함수를 인자(argument)로 받거나 함수를 리턴하는 함수コールバック関数
    パラメータとして別の関数が受信された場合、
  • 関数を返すと
  • になります.
    パラメータとして
  • 関数を受け入れ、関数を返すと
  • となる.
    内蔵高次関数
    デフォルトでは、JavaScriptに組み込まれている高次関数では、いくつかの配列方法が高次関数に対応しています.
    1.配列のフィルタリング方法
    特定の条件を満たすアレイ内の要素のみをフィルタするフィルタ方法.
  • のフィルタ基準としての特定の条件は、関数としてフィルタ方法としてのパラメータ伝達
  • である.
  • フィルタリング方法は配列中の要素をパラメータとしてのコールバック関数に再伝達し、コールバック関数は伝達された配列中の要素(条件に従って)を受け入れ、「真」(true)または「偽」(false)
  • を返す.
  • 配列の各要素は、特定の論理(関数)に基づいて、事実(ブール値)のときに個別に分類(フィルタ)される
  • .
    // 함수 표현식
    const isEven = function (num) {
      return num % 2 === 0;
    };
    
    let arr = [1, 2, 3, 4];
    // let output = arr.filter(짝수);
    // '짝수'를 판별하는 함수가 조건으로서 filter 메소드의 인자로 전달됩니다.
    let output = arr.filter(isEven);
    console.log(output); // ->> [2, 4]
    
    const isLteFive = function (str) {
      // Lte = less then equal
      return str.length <= 5;
    };
    
    arr = ['hello', 'code', 'states', 'happy', 'hacking'];
    // output = arr.filter(길이 5 이하)
    // '길이 5 이하'를 판별하는 함수가 조건으로서 filter 메소드의 인자로 전달됩니다.
    let output = arr.filter(isLteFive);
    console.log(output); // ->> ['hello', 'code', 'happy']
    詳細については、MDN-filterメソッドを参照してください。
    2.配列のマッピング方法
    map()メソッドは、所与の関数を呼び出す結果を配列内の各要素に集約し、新しい配列を返します.
  • アレイ内の各要素は、特定の論理(関数)によって別の要素(map)
  • として指定する.
    const cartoons = [
      {
        id: 1,
        bookType: 'cartoon',
        title: '식객',
        subtitle: '어머니의 쌀',
        createdAt: '2003-09-09',
        genre: '요리',
        artist: '허영만',
        averageScore: 9.66,
      },
      {
        id: 2,
        // .. 이하 생략
      },
      // ... 이하 생략
    ]; // 만화책의 모음
    
    const findSubtitle = function (cartoon) {
      return cartoon.subtitle;
    }; // 만화책 한 권의 제목을 리턴하는 로직(함수)
    
    const subtitles = cartoons.map(findSubtitle); // 부제의 모음
    詳細については、MDN-mapメソッドを参照してください。
    3.配列のreduceメソッド
    reduce()メソッドは、アレイ内の各要素に対して所与のreducer関数を実行し、結果値を返します.
    arr.reduce(function(accumulator, currentValue, currentIndex, array){ 
    ......
    },initialValue);
    1)アキュムレータ(acc)
    2)現在値(cur)
    3)現在のインデックス(idx)-オプション
    4)ソースアレイ(src)-オプション
    5)初期値(init)-オプション
    initialValueが指定されていない場合、reduce()はインデックス1からコールバック関数を実行し、最初のインデックスをスキップしたinitialValueが指定されている場合はインデックス0から開始します.
    reduceは、複数のデータを1つのデータに濃縮するために使用される(reduce)
    アレイ内の各要素は、特定の凝縮方法(関数)に従って所望の形状に凝縮されます(減少します).
    const cartoons = [
      {
        id: 1,
        bookType: 'cartoon',
        title: '식객',
        subtitle: '어머니의 쌀',
        createdAt: '2003-09-09',
        genre: '요리',
        artist: '허영만',
        averageScore: 9.66,
      },
      {
        id: 2,
        // .. 이하 생략
      },
      // ... 이하 생략
    ]; // 단행본의 모음
    
    const scoreReducer = function (sum, cartoon) {
      return sum + cartoon.averageScore;
    }; // 단행본 한 권의 평점을 누적값에 더한다.
    
    let initialValue = 0 // 숫자의 형태로 평점을 누적한다.
    const cartoonsAvgScore = cartoons.reduce(scoreReducer, initialValue) / cartoons.length; 
    // 모든 책의 평점을 누적한 평균을 구한다.
    reduceの独特な使い方
    1)配列を文字列とする
    function joinName(resultStr, user) {
      resultStr = resultStr + user.name + ', ';
      return resultStr;
    }
    
    let users = [
      { name: 'Tim', age: 40 },
      { name: 'Satya', age: 30 },
      { name: 'Sundar', age: 50 }
    ];
    
    users.reduce(joinName, '');
    2)配列をオブジェクトとする
    function makeAddressBook(addressBook, user) {
      let firstLetter = user.name[0];
    
      if(firstLetter in addressBook) {
        addressBook[firstLetter].push(user);
      } else {
        addressBook[firstLetter] = [];
        addressBook[firstLetter].push(user);
      }
    
      return addressBook;
    }
    
    let users = [
      { name: 'Tim', age: 40 },
      { name: 'Satya', age: 30 },
      { name: 'Sundar', age: 50 }
    ];
    
    users.reduce(makeAddressBook, {});
    詳細については、MDN-reduceメソッドを参照してください。