javascript箭头函数浅谈

js箭头函数

以下对箭头函数的简单性质进行阐释

一:使用形式

html部分:

    <p id="demo1">p>
    <p id="demo2">p>
    <p id="demo3">p>

js部分:

    /*
    普通函数:function(){}
    箭头函数: () => {}
    */

    let yc = ['fat','English','stupid'];

    // 普通函数
    var yc_quality = yc.map(function(value){
     
        return value += ' ';
    });
    document.getElementById("demo1").innerHTML = yc_quality;

    // 箭头函数 1 :箭头函数是匿名的,用完就扔
    var yc_quality = yc.map((value) =>{
     
        return value += ' ';
    });
    document.getElementById("demo2").innerHTML = yc_quality;

    // 箭头函数 2 :当传入参数只有一个时,括号可以省略,表达式同理
    var yc_quality = yc.map(value => value += ' ');  //这里不应该有return,只有一个表达式时会自动返回箭头后的结果
    document.getElementById("demo3").innerHTML = yc_quality;

运行结果:
javascript箭头函数浅谈_第1张图片

this的探讨

html部分:

    <button>普通函数按钮</button>
    <p id="demo4"></p>
    <button>箭头函数按钮</button>
    <p id="demo5"></p>

js部分:

 //箭头函数:this相关
    var normalButton = document.getElementsByTagName('button')[0]; //获取DOM
    var arrowButton = document.getElementsByTagName('button')[1];
    var normalP = document.getElementById('demo4');
    var arrowP = document.getElementById('demo5');
    let normalFun = function(){
       // 定义函数,找到this的对象
        normalP.innerHTML = '普通函数:' + this;
    }
    let arrowFun = function(){
     
        arrowP.innerHTML = '箭头函数:' + this;
    }
    normalButton.addEventListener('click',normalFun,false);  //给按钮添加监听
    arrowButton.addEventListener('click',arrowFun,false);

javascript箭头函数浅谈_第2张图片

完整代码

<!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>

<body>
    <p id="demo1"></p>
    <p id="demo2"></p>
    <p id="demo3"></p>
    <button>普通函数按钮</button>
    <p id="demo4"></p>
    <button>箭头函数按钮</button>
    <p id="demo5"></p>
</body>
<script>
    /*
    普通函数:function(){}
    箭头函数: () => {}
    */

    let yc = ['fat', 'English', 'stupid'];

    // 普通函数
    var yc_quality = yc.map(function (value) {
     
        return value += ' ';
    });
    document.getElementById("demo1").innerHTML = yc_quality;

    // 箭头函数 1 :箭头函数是匿名的,用完就扔
    var yc_quality = yc.map((value) => {
     
        return value += ' ';
    });
    document.getElementById("demo2").innerHTML = yc_quality;

    // 箭头函数 2 :当传入参数只有一个时,括号可以省略,表达式同理
    var yc_quality = yc.map(value => value += ' '); //这里不应该有return,只有一个表达式时会自动返回箭头后的结果
    document.getElementById("demo3").innerHTML = yc_quality;

    //箭头函数:this相关
    var normalButton = document.getElementsByTagName('button')[0]; //获取DOM
    var arrowButton = document.getElementsByTagName('button')[1];
    var normalP = document.getElementById('demo4');
    var arrowP = document.getElementById('demo5');
    let normalFun = function () {
      // 定义函数,找到this的对象
        normalP.innerHTML = '普通函数:' + this;
    }
    let arrowFun = () => {
     
        arrowP.innerHTML = '箭头函数:' + this;
    }
    normalButton.addEventListener('click', normalFun, false); //给按钮添加监听
    arrowButton.addEventListener('click', arrowFun, false);
</script>

</html>

你可能感兴趣的:(前端基础,javascript)