函数的进阶——箭头函数

先来看看普通函数是怎么用的  

箭头函数基本语法

箭头函数（也叫 Arrow Function）

在小括号里写参数，基本语法如下：

    const fn = (a, b) => {

      console.log(a + b)

    }

    fn(1, 2)

1.如果箭头函数没有参数, 必须要写小括号, 多个参数也需要写小括号

 const fn = (a, b) => {

      console.log('我是箭头函数')

    }

    fn()

2.如果箭头函数只有一个参数可以省略括号

 const fn = a => {

      console.log('我是箭头函数', a)

    }

    fn(10)

3.返回值还是 return, 但如果箭头函数只有一行代码, 并且返回值就是这行代码的结果, 可以省略大括号 + return

    const fn = a => {

      console.log('我是箭头函数', a)

      return 123

    }

    // 计算 123 + 456 后返回结果

    const fn = a => 123 + 456

    console.log(fn(10))

举例说明：

需求：map 实现, xxx 真是个人才, 放到新数组中

用基本函数实现：

 let arr = ['小薇', '小霖', '小文', '小豪']

    const newArr = arr.map(function(item) {

     return item + '真是个人才'

     })

   console.log(newArr)

用箭头函数实现：

 let arr = ['小薇', '小霖', '小文', '小豪']

    const newArr = arr.map(item => item + '真是个人才')

    console.log(newArr)

特殊注意事项:

   1. 返回的结果如果是对象，应该怎么写呢？

const fn = () => ({ name: '小龙', age: 28 })

    console.log(fn())

 2. 箭头函数没有 arguments 但是支持剩余参数

 剩余参数必须用小括号包裹

 // 2. 箭头函数没有 arguments 但是支持剩余参数

    // // 剩余参数必须用小括号包裹

1. 箭头函数的this指向

    // function 函数的 this 指向

    // 不出意外的情况下 this 永远指向调用者

    let fn = function() {

      console.log(this) // window

    }

    fn()

    const btn = document.querySelector('button')

    btn.addEventListener('click', function() {

      console.log(this)

    })

箭头函数的 this 指向和当前作用域的 this 指向一样, 他没有自己的 this 指向

箭头函数的 this 取决于当前箭头函数定义的位置, 不看是谁调用的箭头函数

let arrowFn = () => {

      console.log(this)

    }

    arrowFn()

 一般事件处理函数不要用箭头函数, 因为普通的 function 更容易让我们找到事件源

btn.addEventListener('click', () => {

      console.log(this)

    })

 事件处理函数最好不要用箭头函数

    document.querySelector('button').addEventListener('click', function() {

      // document.querySelector('button').style.color = 'yellow'

      // this.style.color = 'green'

      // setTimeout(function() {

      //   console.log(this) // this 指向 window, 因为定时器属于 window 对象, 定时器的函数也由 window 触发

      //   this.style.color = 'green'

      // }, 5000)

      // 此处最好使用箭头函数

      setTimeout(() => {

        this.style.color = 'green'

      }, 5000)

    })

可能大家会有个困惑

如何去记忆到底该用箭头函数还是普通 function?

推荐这样记忆——默认优先考虑箭头函数, 不行了就换 function😁

结束啦！祝你开心每一天❤️