JavaScript笔记-箭头函数

最新推荐文章于 2024-06-16 12:11:30 发布

马路野狼

最新推荐文章于 2024-06-16 12:11:30 发布

阅读量173

点赞数

分类专栏： JavaScript 文章标签： javascript js

本文链接：https://blog.csdn.net/qq_40677317/article/details/105551441

版权

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

JavaScript笔记-箭头函数

https://www.liaoxuefeng.com/wiki/1022910821149312基于廖雪峰老师的教程所做的笔记。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>箭头函数操作展示</title>
</head>
<body>

<script>

    /*原函数——一个参数*/
    function square(x){
        return x*x;
    }
    /*等价的箭头函数*/
    var squareArrow=x=>x*x;

    console.log(square(2));//结果为4
    console.log(squareArrow(2));//结果为4

    /*原函数——多个参数*/
    function add(x,y){
        return x+y;
    }
    /*等价的箭头函数*/
    var addArrow=(x,y)=>x+y;//多个参数要用()括起来

    console.log(add(1,2));//结果为3
    console.log(addArrow(1,2));//结果为3

    /*原函数——返回值为一个对象*/
    function getName(){
        return{
            firstName:"Guorui",
            lastName:"Sang"
        }
    }
    /*等价的箭头函数*/
    var getNameArrow=()=>({//没参数，用()代替；返回的对象用{}括起来，防止和标识函数体的花括号搞混
      firstName: "Guorui",
      lastName: "Sang"
    })

    console.log(getName());//返回如上定义的对象
    console.log(getNameArrow());//返回如上定义的对象

    /*原函数——多条语句*/
    function abs(x){
        if(x>=0)
            return x;
        else
            return -x;
    }

    /*等价的箭头函数*/
    var absArrow=(x)=>{
        if(x>=0)
            return x;
        else
            return -x;
    }

    console.log(abs(-11));//结果为11
    console.log(absArrow(-11));//结果为11

    /*小技巧——使用箭头函数可以避免对象的内嵌方法访问不到对象数据的问题*/
    var obj={
        age:20,
        city:"Shenzhen",
        show:function(){//方法
            console.log(this.age);//this指向obj
            let printCity=()=>{
                console.log(this.city);//用箭头函数，此时this指向obj
            }
            printCity();
        }
    }

    obj.show();//结果为20 Shenzhen


</script>
</body>
</html>

马路野狼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript笔记-箭头函数

JavaScript笔记-箭头函数https://www.liaoxuefeng.com/wiki/1022910821149312基于廖雪峰老师的教程所做的笔记。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>箭头函数操作展示...
复制链接

扫一扫