Es6箭头函数
箭头函数是Es6新增加的一个语法特性，在简化编码方面，有着巨大亮点。
下文就是我对于箭头(=>)函数的定义与实用说明。
用法一（无参数）
定义语法
var a = 10;
var f = () => a;
// 等价于
var f = function(){return a;}测试代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script>
var a = 10;
f = ()=> a;
console.log(f());
</script>
<body>
</body>
</html>运行结果：
用法二（含有参数）
定义语法
var add = (a, b) => a + b;
// 等价于
var add = function(a, b){return a + b;}
console.log(add(1, 1))测试代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script>
var add = (a, b) => a + b;
// 等价于
var add = function(a, b){return a + b;}
console.log(add(1, 1))
</script>
<body>
</body>
</html>运行结果
用法三（箭头函数的代码块大于一行）
定义语法
var add = (a, b) => {a = a + 1; return a + b;}
// 等价于
var add = function(a, b){
a = a + 1;
return a + b;
}测试代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script>
var add = (a, b) => {a = a + 1; return a + b;}
// 等价于
var add = function(a, b){
a = a + 1;
return a + b;
}
console.log(add(1,2));
</script>
<body>
</body>
</html>运行结果
用法四（返回的是对象）
定义语法
let temp = stu => ({
id:1,
name:"lihua"
});
// 等价于
temp = {
id:1,
name:"lihua"
}测试代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script>
let temp = stu => ({
id:1,
name:"lihua"
});
// 等价于
temp = {
id:1,
name:"lihua"
}
console.log(temp);
</script>
<body>
</body>
</html>运行结果
用法五（与map结合）
定于语法
// 这个正常写法需要写到上面 不然语法报错
[1,2,3].map(function (x) {
return x + x;
});
// =>函数写法
y = [1,2,3].map(x => x + x)测试代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script>
// 这个正常写法需要写到上面 不然语法报错
[1,2,3].map(function (x) {
return x + x;
});
// =>函数写法
y = [1,2,3].map(x => x + x)
console.log(y)
</script>
<body>
</body>
</html>运行结果
用法六（与setTimeout结合）
定义语法
function foo(){
setTimeout(() => {
console.log('id:', this.id);
},10000) // 这里设置10s之后出现结果
}
var id = 21;
foo.call({id:42});测试代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script>
function foo(){
setTimeout(() => {
console.log('id:', this.id);
},10000) // 这里设置10s之后出现结果
}
var id = 21;
foo.call({id:42});
</script>
<body>
</body>
</html>运行结果
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2025-01-20，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
