TIL:ES 6矢印関数



実は今週の初学の内容です.ブログはいい加減で書けない.
週末に書いていない内容を復習して、書いてみてください.😙
昨日、オブジェクト向けプログラミングを勉強してから、矢印関数をもう一度見て、EZのように感じました.
やはり一度難しいことをした後は前の内容が簡単に見えます

1.矢印関数


矢印関数表現(arrow function expression)の構文は、関数表現よりも短く、独自のthis、arguments、super、またはnewを有する.targetをバインドしません.矢印関数は常に匿名です.この関数は、非メソッド関数に最も適していることを示します.ジェネレータとして使用できませんMDN矢印関数
引用の説明は分かりにくいので、以下に書いたコードを見て理解したほうがいいです.

関数式

const add = function (x, y) {
  return x + y
}

矢印関数

const add = (x, y) => {
  return x + y
}
関数式の機能を省略することができ、矢印=>の形式で関数を容易に記述することができる.
なお、関数本文にreturnのみの場合は、returnは省略してもよい.{}中括弧も省略可能!!
const add = (x, y) => x + y // O, 정상 작동
const add = (x, y) => { x + y } // X, undefined 리턴
()の括弧を使うことができます!一般式の「かっこ」と同じ
const add = (x, y) => (x + y)   // O, 정상 작동
ただし、関数の式が2行より多い場合は、省略ではなくretun、カッコを使用することが望ましい.
(はい、そうです.省略された関数を見ると、実は急によく見えません.😅)
// 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)
}

2.矢印関数(モジュール)


矢印関数は、キャビネットが非常に良いことを示します!!

関数式

const adder = function(x) {
  return function(y) {
    return x + y
  }
}
adder(5)(7) // 12

矢印関数


functionをスキップ
const adder = (x) => {
  return (y) => {
    return x + y
  }
}
returnをスキップ(一番奥から)
returnを省略するときは括弧を使わない!!
const adder = x => {
  return y => x + y
}
最後に残った部分も全部省略!!
const adder = x => y => x + y
一列きれいに!

3.矢印関数のthis


(実は、この部分はまだ分かりません)

  • 矢印関数にはこの項目はありません.

  • 矢印関数はコンストラクション関数として使用できません.(newと合わせてXを使用)

  • パラメータはサポートされていません
  • の最後の部分


    簡単で明瞭な関数式を書くには、矢印関数は本当に便利な文法のようです.
    しかし,複雑なコードにおいて矢印関数のみを用いてすべての内容を省略できる場合,コードを迅速に理解することは困難である.実は上で表現した関数を見ているだけで、実は私は一目で理解しにくいです.
    いずれにしても、新しい文法を学んで、習慣的によく使って、努力して熟知します.
    最後の矢印関数は、さらに学習する必要があります.(まだわからない)😭😭😭)