ES6

箭头函数的目的是 简化函数的定义,语法糖

一般情况下,最简单的写法就是方法return一个值

 // ES6 : 
let f = v => v;
//ES5
var f = function(v){ return v }

其次就是各种情况应该如何去写箭头函数

//无参数转化

var f = function (){

      return 123

  }

  let f = () => 123

 

//多个参数

 var f = function (a,b){

      return a+b

  }

  let f = (a,b) => a+b

 

 //如果返回值是对象

  var f = function (a,b){

      return {a:a,b:b}

  }

  let f = (a,b) => { //不知道的情况下,可以直接蒋es5中的函数内容复制

      return {a:a,b:b}

  }

  let f = (a,b) => ({a:a,b:b}) //加括号

 

//如果返回值是函数

 let f = (a,b) => { //不知道的情况下,可以直接蒋es5中的函数内容复制

      return function(){a:a,b:b}

  }

 let f = (a,b) => { //不知道的情况下,可以直接蒋es5中的函数内容复制

      return a()

  }

 

 

//无返回值的情况

  let f2 = v =>{

      if(v>=5){

          //...

      }

  }

 

注意事项,不是所有情况都能使用

1. 箭头函数不能当作构造函数,不可以使用new

let f = (a,b) => ({a:a,b:b})

  var Fun = name =>{

      this.name = name;

  }

  var f1 = new Fun();//error

2. 箭头函数没有原型对象

3. 不能使用Arguments 对象,但是可以使用rest代替

  

function fun3(){

      console.log(arguments[2])

  }

  fun3(1,2,3,4,56,);

  var fun3 =() =>{

      console.log(arguments[2]);//error

  }

  //代替argument是rest参数

  var fun3 = (...value) =>{

      console.log(value[2])

  }

4. this指向,箭头函数的this始终指向函数声明时所在的作用域下的this值,而普通函数的this是指向的调用的对象

//ES5 普通情况
var
str = 'abc';//全局变量 var obj = { //定义一个对象 str:'xyz', //对象中的属性 getStr:function(){//对象中的方法 console.log(this.str); } } obj.getStr();//xyz 调用者是obj var z = obj.getStr; z();//abc 调用者是window

如果把obj稍作修改成箭头函数,那么this的指向是不同 的

//ES6 情况
var str = 'abc';//全局变量 var obj = { //定义一个对象 str:'xyz', //对象中的属性 getStr:()=>{//对象中的方法 console.log(this.str); } } obj.getStr();//abc 因为箭头函数永远指向定义他的对象的层级,例如obj是window定义的,所以此时的this指向window

4. 箭头函数适用于 与this无关的回调,例如定时器,数组的方法回调

     箭头函数不适用与this 优化的回调,事件回调,对象方法(不适用不等于不能)

原文地址:https://www.cnblogs.com/ningxin/p/14463180.html