第五小节:箭头函数

2017-12-07  本文已影响0人  Janicerant

        今天我们来看一下ES6中新增加的箭头函数,使用箭头函数有三个好处:1.简单的语法 2.可以隐式返回 3.匿名函数

<script>
    const number = [5, 6, 13, 0, 1, 18, 23];

    const double = number.map(function (number) {
        return number*2;  
    });
    const double2 = number.map((number) => {
        return number*2;  //箭头函数
    });
    console.log(double2);
</script>

        图上的两种方式结果都是一样的啦。当然,如果函数中只有一个参数的时候就可以去掉箭头前的那对括号啦,有多个参数的话,还是要用到括号的,并且参数间用逗号隔开,如果没有参数的话也要保留这对括号的。

 const double2 = number.map(number => {
        return number*2;
    });

总的来说就是:删掉function关键字,加上一个大箭头,没有参数加括号,一个参数可选择,多个参数逗号分隔。

2.隐式返回

        我们先来说一下什么是显示返回。显示返回就是return关键字加上你想返回的内容,那么箭头函数的隐式返回就是删掉return关键字,然后把他们移到一行来,然后删掉一对大括号。如下图:

 const double2 = number.map(number => number*2);

        这样在我们只是想要返回一些东西的时候特别有用,将几行的代码转换成一行的代码,增强了代码的可读性。还有一点就是箭头函数都是匿名函数,在说匿名函数前先来说一下命名函数,命名函数就是function关键字加上函数的命名名称,命名函数在需要递归和解除事件绑定的时候特别有用。

<script>
    function greet(name) {
        alert(`hello ${name}`);   //命名函数
    }
    const greet = name => {alert(`Hello ${name}`)};//匿名函数

    greet('lucy');

    console.log(double2);
</script>
上一篇 下一篇

猜你喜欢

热点阅读