当前位置：网站首页 > 技术文章 > 正文

Arrow Functions—箭头函数（箭头函数语法）

myzbx 2025-07-23 16:44 6 浏览

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

在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 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

JS 箭头函数

上一篇：JavaScript函数揭秘:命名函数与箭头函数的区别大公开!
下一篇：es6中函数默认参数、箭头函数、剩余参数-讲解

Arrow Functions—箭头函数（箭头函数语法）

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

8.7k star，一款超炫酷的动态可视化大屏项目

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

说下你的vue项目的目录结构，该怎么划分?

这么牛逼的cursor功能，赶紧用起来

用上Vue3，你真的变了吗?（vue3 key）

20个免费音乐音效下载网站，无版权素材商业影片也可用

什么是“恒定光圈”，什么是“浮动光圈”?-摄影早自习第331

comfyui安装MimicMotion扩展，AI跳舞动作模仿