es6之箭头函数

一、箭头函数的特点

1.能够使函数的写法更简洁（一行写完一个函数）

2.函数返回值可以被隐式返回（不需要写return了）

3.不重新绑定this的值

二、箭头函数的样子

    const doubleValue = value => {
      return value * 2
    }
    console.log(doubleValue(3)) //6

1.没有参数时（）圆括号必写

    const greeting = () =>  console.log("hello")
    greeting()  //hello

2.只有一个参数时（）圆括号可以省略；当函数只有一行时，可以把return和{}花括号去掉（跟函数中的参数个数没关系）

    const printName = name =>  "你好" + name

    console.log(printName("张三")) 　　//你好张三

3.两个参数时

    const add = (a, b) => a + b
    console.log(add(0.1,0.2)) //0.30000000000000004

三、练习

1.给定一个数组，循环遍历这个数组中的每个元素并输出，输出的时候带上一些字符串（使用es5的map）

   const companies = ["google","huawei","samsung"]
    const result  = companies.map( company => company + "is a company")
    console.log(result)
    //  ["googleis a company", "huaweiis a company", "samsungis a company"]

2.给定一组年龄，筛选出年两大于18的（使用es5的filter）

   const ages = [14,19,21]
    const result2 = ages.filter(age => age > 18)
    console.log(result2)    //[19, 21]

四、箭头函数的应用场景：普通函数会重新绑定this的值,箭头函数不会重新绑定this的值

（所以，当我们想要重新绑定this就用普通函数，不想重新绑定this,就用箭头函数）

看个案例~：页面上有个按钮，点击按钮会变大

    #wrap{
      width: 100%;
    }
    #the-button{
      display: block;
      margin: 50% auto;
    }
    .bigger{
      padding: 20px;
      transition: padding 2s;
    }

  <div id="wrap">
    <button id="the-button">click me</button>
  </div>

普通函数写法如下：当点击按钮时，按钮确实是变大了（当前的this指向的是按钮）

 document.getElementById("the-button").addEventListener("click",function(){
      this.classList.add("bigger")
    })

当我们把这个函数改写成箭头函数以后呢？会报错，（当前的按钮指向的是window，虽然是按钮调用的它）

  document.getElementById("the-button").addEventListener("click",() => {
      this.classList.add("bigger")
    })

现在又有一个新的需求：当按钮变大以后，改变按钮中的值。你可能会这样写

   document.getElementById("the-button").addEventListener("click",function(){
      this.classList.add("bigger")
      // 使用定时器来控制按钮变大以后再更改文字
      setTimeout(function(){
        this.innerHTML = "clicked"
      },2000)
    })

但是结果往往出人意料，按钮中的值没有被改变！这是什么原因呢？大家来看一下这个定时器，这个定时器中有一个函数没有被调用，所以函数中的this指向的是window,

所以文字没有改变。

解决办法：我们使用一个变量在定时器之前保存一下这个this,

    document.getElementById("the-button").addEventListener("click",function(){
      this.classList.add("bigger")
      var that = this
      // 使用定时器来控制按钮变大以后再更改文字
      setTimeout(function(){
        that.innerHTML = "clicked"
      },2000)
    })

酱紫就ok辣~

但是问题又来了，每次都这么麻烦，有什么好的解决办法吗？当然有！箭头函数大法来了！！！

他来了 他来了 他带着箭头函数走来了*********************

    document.getElementById("the-button").addEventListener("click",function(){
      this.classList.add("bigger")
      // 使用定时器来控制按钮变大以后再更改文字
      setTimeout(() => {
        this.innerHTML = "clicked"
      },2000)
    })

总结：

当不牵扯到this问题的时候使用箭头函数，当使用到this的时候还是乖乖的使用普通函数吧~~

 

我是前端小白，如有错误欢迎指出。

加油，奥里给！