3.ECMAScript6（ES6）箭头函数的使用

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