js中的箭头函数

最新推荐文章于 2025-07-12 21:20:41 发布

原创最新推荐文章于 2025-07-12 21:20:41 发布 · 1.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#js 箭头函数

前端同时被 2 个专栏收录

80 篇文章

订阅专栏

javascript

22 篇文章

订阅专栏

本文详细介绍了ES6中引入的箭头函数，包括其语法特性与使用场景。箭头函数简化了函数定义，提供了两种格式：单表达式格式和多语句格式。文章通过实例对比了普通函数与箭头函数的异同，展示了箭头函数如何简化代码。

ES6标准新增了一种新的函数：Arrow Function（箭头函数）。

x => x * x

上面的箭头函数相当于：

function (x) {
    return x * x;
}

箭头函数相当于匿名函数，并且简化了函数定义。箭头函数有两种格式，一种像上面的，只包含一个表达式，连{ ... }和return都省略掉了。还有一种可以包含多条语句，这时候就不能省略{ ... }和return：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>js中的箭头函数</title>
	</head>
	<body>
		<script>
			// 普通函数
			function getSum(x,y){
				return x+y;
			}
			var sum1 = getSum(1,2);
			console.log(sum1);
			// 结果是3 
			
			// 箭头函数
			(a,b) => a+b;
			var fn = (a,b)=>a+b;
			console.log(fn(1,2));
			// 结果是3
			
			// 箭头函数相当于匿名函数,简化了函数定义;
			// 箭头函数有2种格式,1. x=>x*x  只包含一个表达式 省略了{...}和return   2.包含多条语句,不能省略{...}和return
			x => {
				if(x>5){
					return x-5;
				}else{
					return x;
				}
			}
			var fn2 = x => {
				if(x>5){
					return x-5;
				}else{
					return x;
				}
			};
			// 打印值是25
			console.log(fn2(30));
			
			// 若参数不是1个,那么就要用()括起来
			(x,y)=>{
				if(x>5&&x<10){
					return x+y;
				}else{
					return x-y;
				}
			}
			var fn3 = (x,y)=>{
				if(x>5&&x<10){
					return x+y;
				}else{
					return x-y;
				}
			};
			console.log(fn3(1,4));
			// ps如果是要返回一个对象,那么下面的做法是错误的
// 			x=>{
// 				"value":x
// 			}
			// 会报错 Uncaught SyntaxError: Unexpected token :
			//需要修改成如下
			x => ({
				"value":x
			})
			
		</script>
	</body>
</html>