学Node.js开发前你需要掌握箭头函数即=＞

最新推荐文章于 2025-06-04 15:15:11 发布

L蓝镜J

最新推荐文章于 2025-06-04 15:15:11 发布

阅读量480

点赞数

分类专栏： Node.js 文章标签： node.js es6

版权

7 篇文章

订阅专栏

本文介绍了JavaScript ES6中的箭头函数，包括其简洁的语法，如何处理单个参数、多个参数的情况，以及返回值的处理。特别强调了当返回值为对象时，需要避免省略大括号以防止解析错误。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这是之前的写法：

<script>
window.onload = function(){

	var fun1 = function(){
		console.log("以前的写法");
	}
	fun1();

}
</script>

输出结果：

然后我们来看看箭头函数 => 的写法：

<script>
window.onload = function(){

	var fun2=()=>{
		console.log("箭头函数的写法");
	}
	fun2();

}
</script>

要点：

其实就是把 function 移到了 () 的后面，并且将 function 变为了 =>

扩展知识1：

如果箭头函数有一个参数的时候，() 可以省略，例如：

<script>
window.onload = function(){

	var fun3=a=>{
		console.log(a);
	}
	fun3(666);

}
</script>

输出结果：

如果箭头函数有两个以上的参数时，() 不能省略，例如：

<script>
window.onload = function(){

	var fun3=(a,b)=>{
		console.log(a+b);
	}
	fun3(50,100);

}
</script>

输出结果：

有 return 返回值时，之前的写法：

<script>
window.onload = function(){
	var fun4=()=>{
		return 1000;
	}
	var res = fun4();
	console.log(res);
}
</script>

输出结果：

其实箭头函数中有 return 返回值时，{} 和 return 关键字都可以省略

<script>
window.onload = function(){
	var fun4=()=>2000;
	var res = fun4();
	console.log(res);
}
</script>

输出结果：

如果 return 返回的是一个对象时，尤其要注意！

原始写法：

<script>
window.onload = function(){
	var fun5=()=>{
		return {a:1,b:2};
	}
	var res=fun5();
	console.log(res.a);
}
</script>

输出结果：

省略 {} 和 return 关键字后的写法：

<script>
window.onload = function(){
	var fun5=()=>{a:1,b:2};
	var res=fun5();
	console.log(res.a);
}
</script>

输出结果：

看！报错了！

因为省略了 {} 后，程序会把对象 {a:1,b:2} 的花括号误认为是函数自身的花括号。

所以，这时还要用简写的方式的话，就需要在外层再套一对 ()，如下所示：

<script>
window.onload = function(){
	var fun5=()=>({a:1,b:2});
	var res=fun5();
	console.log(res.b);
}
</script>

输出结果如下：

正常了！

以上就是箭头函数 => 的一些值得注意的地方，我们下节再见：）