ES6 箭头函数的应用

ES6 箭头函数

 

 

//ES5下的函数

const f1=function(number){

return number*2;

};

console.log(f1(2));

 

//ES6 箭头函数，应用1：简化代码

//单个参数时 1

const f2=number=>{

return number*2;

}

console.log(f2(2));

//单个参数 2

const f3=(number)=>number*2;

console.log(f3(2));

//单个参数 3

const f4=number=>number*2;

console.log(f4(2));

 

//以上不断简化的形式，实现同样的功能

 

//多个参数,需要加上括号。如果执行单条语句可不需要‘{}’和return

const f5=(number1,number2)=>number1+number2;

console.log(f5(2,2));

//多个参数,需要加上括号。如果执行多条语句需要‘{}’和return

const f6=(number1,number2)=>{

sum=number1+number2;

return sum;

}

console.log(f6(2,2));

 

//ES6 箭头函数，应用2：改变this指向

const team={

members:['Tom','Earry'],

teamName:'ES6',

teamSummary:function(){

return this.members.map(member=>{

//箭头函数改变了this的中指向,这里的return后面采用的是ES6的模板字符串

return `${member}隶属于${this.teamName}`;

})

}

};

console.log(team.teamSummary());//打印： ["Tom隶属于ES6", "Earry隶属于ES6"]

 

//而在ES5 中：

const team1={

members:['Tom','Earry'],

teamName:'ES6',

teamSummary:function(){

return this.members.map(function(member){

return `${member}隶属于${this.teamName}`;

})

}

};

console.log(team1.teamSummary()); //打印：["Tom隶属于undefined", "Earry隶属于undefined"]

//因为在map的迭代函数中,外层的this指向已经发生改变，这时可通过 _this=this再在map函数中使用，也可以在map方法后直接再调用

bind(this)绑定this来解决。