JavaScript矢印関数(矢印関数)

11995 ワード
Arrow_Function JavaScript TIL テキストリンク
これまでは関数式や宣言式で関数を書くことに慣れていましたが、矢印関数を使う習慣を身につけなければなりません.
矢印関数とは?
矢印関数(arrow function)は、関数キーを矢印にインデントすることによって関数を表す別の方法である.ES 6が新たに導入された.
関数式
const add = function (x,y) {
  return x+y;
}
矢印関数
const add = (x,y) => {
  return x+y;
}
矢印関数フィーチャー
1)関数本文に戻り文のみが存在する場合は、戻りを省略できます
関数bodyにreturn文のみが存在する場合は、returnを省略してreturnを使用できます.この場合、カッコ({})も省略して正常に動作します.
//정상 
const add = (x,y) => x + y;
add(4,5); //리턴값 : 9

//비정상
const add = (x,y) => { x + y }; 
add2(4,5);  //리턴값 : undefined
2)かっこは使用可能
return省略の場合は中括弧も省略すべきですが、小括弧で表すことができます.(optional)
const add = (x, y) => (x + y);
add(3,2); //리턴값 : 5
関数の式が2行より多い場合は、returnを省略するのではなく、カッコ(curlybrace)とreturnを明確に書くことが望ましい.
関数式
const getStudentAvg = function (arr) {
  return arr.filter(function(person) {
    return person.job === 'student';
  }).reduce(function(sum, person) {
    return sum + person.grade
  }, 0);
}
矢印関数
// bad
const getStudentAvg = arr => arr.filter(person => person.job === 'student').reduce((sum, person) => (sum + person.grade),0);

// good
const getStudentAvg = arr => {
  return arr.filter(person => person.job === 'student').reduce((sum, person) => (sum + person.grade),0);
}
矢印関数の例
矢印関数は、エンクロージャを表すときに視覚的に優れています.
関数式
const adder = function(x) {
  return function(y) {
    return x+y;
  }
}

adder(5)(7); //12
矢印関数
逐次適用
削除
  • functionキーワード
    • const adder = (x) => {
  return (y) => {
    return x+y;
  }
}
    消去
  • 内側戻り
    returnを省略する場合も、括弧を外します.
    関数にパラメータが1つしかない場合は、カッコを省略して
    • に書き込む
    const adder = x => {
  return y => x+y;
}
  • 残余収益を排除
    • const adder = x => y => x+y;
    Androidアプリはしばらく操作していないか、画面をクリックして広告をポップアップしていないか、画面をクリックして特定の操作をしていない.
    Delegateモードの理解