Arrow Functions—箭头函数

我们来一起认识一下箭头函数？

在js中，函数可以用 "arrow" => 定义。

For, example:

第一点:

箭头函数的语法：

const show=(a,b) => a+b;

show(1,5); // 结果返回6

之前，传统的函数定义:

function show(a,b){

return a+b;

}

show(1,5) //结果返回6

第二点:

箭头函数传递一个参数:

const show=a => a+1; // 这样可以，参数不加括号

const show=(a) => a+1; //加上括号也可以，建议加上√

箭头函数不传递参数：

const show=() => 'welcome strive'; //此时圆括号必须加上

第三点:

完整的箭头函数形式:

const show=a =>{

const b=12;

return a+b;

}

show(5); //返回结果 17

const show=(a,b)=>{

return a+b;

}

show(12,5); //返回结果 17

* 箭头函数需要注意的地方:

箭头函数里面不在提供一个arguments对象了

const show= x => console.log(arguments);

show(12.5) // arguments
4000
is not defined

当然还有，caller/callee都不在支持了

关于arguments那个问题，可以解决：

const show=(...arr) => console.log(arr);

show(12,5);

2. 箭头函数里面this也有问题

var name='window-strive';

var obj={

name:'strive',

showName:()=>{

alert(this.name); //结果是 window-strive

}

}

obj.showName();

3. 隐式return

const show= x=> x+1; //类似这种语句没有写return，叫做隐式return

show(1); // 返回结果2

隐式return需要有个注意的地方:

const show=()=>{a:1}; //想返回json，但是这个答案为 undefined

const show=()=>({a:1}); //加上括号了，结果就是 {a:1}

4. 显式return(自己动手写return了)

const show=x=>{

return x+1;

}

show(1); //结果为2

总结一下:

箭头函数的语法:

x=>y; // 隐式的return

x=>{return y}; //显式的return

(x,y,z) => {....} //多个参数

(()=>{ // 自执行匿名函数 IIFE

//....code

})();

最后在附上 箭头函数的兼容性:

Chrome	Edge	Firefox	Internet Explorer	Opera	Opera Mini	Safari
45	12	22	/	32	/	10