美文网首页
3.ECMAScript6(ES6)箭头函数的使用

3.ECMAScript6(ES6)箭头函数的使用

作者: 挤时间学习的阿龙 | 来源:发表于2019-05-03 21:27 被阅读0次
timg (1).jpg

说明
1、简化了函数的书写
操作符:输入的参数=>进行的操作以及返回的值
(颠覆了js以往的传统编码习惯)
2、注意事项:
(1)箭头函数可以代替函数表达式,但不能代替函数声明
(2)箭头函数与this不要同时使用
(ES6中this不会自动指向windows对象了,箭头函数本身没有this,因此this只能是undefined)

1、小案例

(1)ES5的写法
<script type="text/javascript">
        // ES5的写法
        function fun(a,b){
              return a+b
        }
        console.log(fun(20,30))
    </script>
image.png
(2)ES6的写法
<script type="text/javascript">
        // ES6的写法
        diff=(a,b)=>a+b //只有将函数return的时候,才可以把{ }省略
        console.log(diff(30,30))
    </script>
image.png

用箭头函数写一个回调函数

(3)ES5写回调
    <script type="text/javascript">
        let arr=[1,2,3,4]
        //ES5
        arr.forEach(function(a){
            console.log(a)
        })
    </script>
image.png
(4)ES6写回调
    <script type="text/javascript">
        let arr=[1,2,3,4]
        arr.forEach(a=>console.log(a))
    </script>
image.png

相关文章

  • ES6箭头函数简介

    @(JS技巧)[ES6|箭头函数] ES6箭头函数(Arrow Functions) ES6可以使用“箭头”(=>...

  • es6全家桶(二)—— 箭头函数

    es6全家桶(二)—— rest参数、箭头函数 箭头函数 ES6 允许使用“箭头”(=>)定义函数。 var f ...

  • ECMAScript 6 箭头函数

    箭头函数 ES6 允许使用“箭头”(=>)定义函数。 使用注意点 箭头函数有几个使用注意点。 (1)函数体内的th...

  • 箭头函数

    ES6允许使用“箭头”(==>)定义函数。 箭头函数 等同于

  • 关于ES6箭头this的指向问题

    ES6 允许使用 “ 箭头 ” (=>)定义函数。 箭头函数 填 坑。 this的指向是 向上查找 非箭头函数的...

  • 学习 ES 6 箭头函数

    箭头函数的用法 ES6 允许使用“箭头”(=>)定义函数。 箭头函数的一个用处是简化回调函数。 箭头函数 this...

  • 关于箭头函数 this的指向问题

    ES6 允许使用 “ 箭头 ” (=>)定义函数。 箭头函数 填 坑。 this的指向是 向上查找 非箭头...

  • 关于箭头函数 this的指向问题

    ES6 允许使用 “ 箭头 ” (=>)定义函数。 箭头函数 填 坑。 this的指向是 向上查找 非箭头函数的函...

  • ES6入门=>箭头函数

    ES6允许使用“箭头”(=>)定义函数。 使用注意点箭头函数有几个使用注意点。 (1)函数体内的this对象,就是...

  • JavaScript箭头函数

    ES6新语法箭头函数 箭头函数是ES6新语法,因为语法简单、可读性好,所以使用的也很多。箭头函数也是匿名函数,区别...

网友评论

      本文标题:3.ECMAScript6(ES6)箭头函数的使用

      本文链接:https://www.haomeiwen.com/subject/liuznqtx.html