提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  后端

当前栏目

Es6箭头函数

ES6 函数 箭头
2023-09-14 09:05:15 时间

箭头函数是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>

运行结果
在这里插入图片描述

相关文章