欢迎您访问电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格
您现在的位置是：首页 > 编程 > 

Es6箭头函数

2025-07-21 21:50:21
Es6箭头函数 箭头函数是Es6新增加的一个语法特性，在简化编码方面，有着巨大亮点。下文就是我对于箭头(=>)函数的定义与实用说明。用法一（无参数）定义语法代码语言：javascript代码运行次数：0运行复制var a = 10; var f = () => a; // 等价于 var f = function(){return a;}测试代码代码语言：javascript代码运行次

Es6箭头函数

箭头函数是Es6新增加的一个语法特性，在简化编码方面，有着巨大亮点。

下文就是我对于箭头(=>)函数的定义与实用说明。

用法一（无参数）

定义语法

代码语言：javascript代码运行次数：0运行复制
var a = 10;
var f = () => a;
// 等价于
var f = function(){return a;}

测试代码

代码语言：javascript代码运行次数：0运行复制
<!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;
    cole.log(f());
</script>
<body>
    
</body>
</html>

运行结果：

用法二（含有参数）

定义语法

代码语言：javascript代码运行次数：0运行复制
var add = (a, b) => a + b;
// 等价于
var add = function(a, b){return a + b;}
cole.log(add(1, 1))

测试代码

代码语言：javascript代码运行次数：0运行复制
<!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;}
    cole.log(add(1, 1))
</script>
<body>
    
</body>
</html>

运行结果

用法三（箭头函数的代码块大于一行）

定义语法

代码语言：javascript代码运行次数：0运行复制
var add = (a, b) => {a = a + 1; return a + b;}
// 等价于
var add = function(a, b){
    a = a + 1;
    return a + b;
}

测试代码

代码语言：javascript代码运行次数：0运行复制
<!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;
    }
    cole.log(add(1,2));            
</script>
<body>
    
</body>
</html>

运行结果

用法四（返回的是对象）

定义语法

代码语言：javascript代码运行次数：0运行复制
let temp = stu => ({
        id:1,
        name:"lihua"
    });
// 等价于
 temp = {
    id:1,
    name:"lihua"
}

测试代码

代码语言：javascript代码运行次数：0运行复制
<!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"
    }    
    cole.log(temp);            
</script>
<body>
    
</body>
</html>

运行结果

用法五（与map结合）

定于语法

代码语言：javascript代码运行次数：0运行复制
// 这个正常写法需要写到上面 不然语法报错
    [1,2,].map(function (x) {
        return x + x;
    });

    // =>函数写法
    y = [1,2,].map(x => x + x)

测试代码

代码语言：javascript代码运行次数：0运行复制
<!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,].map(function (x) {
        return x + x;
    });

    // =>函数写法
    y = [1,2,].map(x => x + x)

    cole.log(y)
   
</script>
<body>
    
</body>
</html>

运行结果

用法六（与setTimeout结合）

定义语法

代码语言：javascript代码运行次数：0运行复制
function foo(){
        setTimeout(() => {
            cole.log('id:', this.id);
        },10000)  // 这里设置10s之后出现结果
    }
   var id = 21;
   ({id:42});

测试代码

代码语言：javascript代码运行次数：0运行复制
<!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(() => {
            cole.log('id:', this.id);
        },10000)  // 这里设置10s之后出现结果
    }
   var id = 21;
   ({id:42});
</script>
<body>
    
</body>
</html>

运行结果

本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。 原始发表：2025-01-20，如有侵权请联系 cloudcommunity@tencent 删除语法htmlmetavar函数

#感谢您对电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格的认可，转载请说明来源于"电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格

本文地址：http://www.dnpztj.cn/biancheng/1154385.html

相关标签：无
上传时间： 2025-07-20 04:20:14

上一篇：面试题：网络分层结构

下一篇：电脑空间不足清理

推荐阅读

留言与评论（共有 15 条评论）
注册新账号 登录
本站网友 快递实名制
19分钟前 发表
].map(function (x) { return x + x; }); // =>函数写法 y = [1
本站网友 慧琳
25分钟前 发表
"lihua" }); // 等价于 temp = { id
本站网友 若水生花爽肤水
3分钟前 发表
2
本站网友 10010联通话费查询
26分钟前 发表
name
本站网友 简阳租房信息
5分钟前 发表
b) => a + b; // 等价于 var add = function(a
本站网友 腰俞
2分钟前 发表
在简化编码方面
本站网友 沈阳夏宫
8分钟前 发表
initial-scale=1.0"> <title>Document</title> </head> <script> var add = (a
本站网友 威士忌多少度
28分钟前 发表
].map(function (x) { return x + x; }); // =>函数写法 y = [1
本站网友 千里光的功效与作用
11分钟前 发表
2
本站网友 yamei
13分钟前 发表
"lihua" }); // 等价于 temp = { id
本站网友 说明书翻译
8分钟前 发表
b) => {a = a + 1; return a + b;} // 等价于 var add = function(a
本站网友 u盘启动盘制作
9分钟前 发表
b) => a + b; // 等价于 var add = function(a
本站网友 忧郁症的治疗方法
3分钟前 发表
Es6箭头函数 箭头函数是Es6新增加的一个语法特性
本站网友 网络工程师培训机构
25分钟前 发表
b) => {a = a + 1; return a + b;} // 等价于 var add = function(a