Стрелочные функции в JavaScript

1. Стрелочные функции

Новая функция в ES6, функция стрелки. Используйте стрелку для определения функции.

let fn = ( ) => {  }

Стрелочная функция выше эквивалентна

 let fn = function () { }

2. Объявить стрелочную функцию

 let fn = (形参) => {  函数体 }

3. Функция вызова

fn(实参)

4. Сокращение стрелочных функций

① Опускать круглые скобки, если есть только один формальный параметр

    let add = (n) => {
      return n + n
    }
    console.log(add(2))  //4

② Опускать фигурные скобки, если тело кода содержит только один оператор.

    let pow = (n) => n * n
    console.log(pow(3))  //9

5. Характеристики стрелочных функций

①это статично и всегда указывает на это под областью, где объявлена ​​функция

② Объекты не могут быть созданы как конструкторы.

    let Person = (name, age) => { this.name = name ， this.age = age }
    let p = new Person('zs', 18)
    console.log(p)//报错Person is not a constructor

③Переменные Argnments не могут быть использованы (сохраните фактические параметры)

 Обычная функция

    function fun(a, b) { console.log(arguments) }
    fun(1, 2)  //Arguments(2) [1, 2, callee: ƒ, Symbol(Symbol.iterator): ƒ]

стрелочная функция

    let fn = (a, b) => { console.log(arguments) }
    fn(1, 2)  //arguments is not defined

6. Сценарии применения

①Нажмите на div, цвет изменится через 2 секунды.

    let div = document.querySelector('div')
    div.addEventListener('click', function () {
      setTimeout(function () {
        this.style.backgroundColor = 'pink'
      }, 2000)
    })

Для нас неприемлемо использовать это для изменения атрибутов стиля. Поскольку это указывает на проблему, после щелчка будет сообщено об ошибке «Невозможно установить свойства неопределенного (настройка« backgroundColor »)». Консоль напечатает это, которое указывает на окно, а окно здесь не имеет атрибута стиля, поэтому style.backgroundColor сообщит об ошибке.

На этом этапе для выполнения этого требования можно использовать стрелочные функции.

    let div = document.querySelector('div')
    div.addEventListener('click', function () {
      setTimeout(() => {
        // console.log(this)
        this.style.backgroundColor = 'pink'
      }, 2000)
    })

На этом этапе ошибок не будет. Поскольку используется стрелочная функция, this стрелочной функции является статическим и указывает на значение this в области видимости, в которой она была объявлена.Она объявлена ​​во внешней области, поэтому это указывает на вызов события внешней функции или div, вы можете найти div и изменить его значение style.backgroundColor.

② Возврат четных элементов из массива

Когда мы используем обычные функции:

    let str = [1, 22, 45, 76, 36, 47, 19]
    let result = str.filter(function (item) {
      if (item % 2 === 0) {
        return true
      } else {
        return false
      }
    })
    console.log(result)//[22, 76, 36]

 Использование стрелочных функций упрощает написание кода:

    let str = [1, 22, 45, 76, 36, 47, 19]
    let result = str.filter(item => { item % 2 === 0 })
    console.log(result)//[22, 76, 36]

Резюме: Стрелочные функции подходят для обратных вызовов, которые не имеют к этому никакого отношения, обратных вызовов методов для таймеров и массивов. Не подходит для обратных вызовов, связанных с этим, обратных вызовов событий и методов объекта.