聊聊 ES6 中的箭头函数

首先来两点:

  1. 当只有一个参数的时候,那么 () 可以省略
  2. 当只有一个 return 的时候,那么 {} 可以省略
  3. 当函数体内只有一条语句的时候,那么 {} 也可以省略

下面来几个简单的例子来对比 ES6 和 ES5:

ES5:

        window.onload = function () {
            alert('abc');
        }

ES6:

window.onload = () => {
    alert('abc');
}

上面这个例子是最普通的,现在让我们传参比较

ES5:

        let show = function (a, b) {
            alert(a + b);
        }
        show(2, 3);

ES6:

        let show = (a, b) => {
            alert(a + b);
        }
        show(2, 3);

现在我们来验证一下圆括号可以省的请况

        let show = a => {
            return a * 2;
        }
        alert(show(12));    

运行结果:

看完了圆括号可以省的情况,现在让我们来验证一下花括号可以省的情况

由于上面这个例子只有一个return ,所以我们还是用这个例子来验证

先来一个错误示范吧(这样会出现语法问题)

        let show = a => return a * 2;
        alert(show(12));

正确示范:

        let show = a => a * 2;
        alert(show(12));

这样运行就成功了

上一个例子是有返回值的情况

下面来讨论没有返回值的时候:

函数体内只有一条语句(可以运行):

        let show = (a, b) => console.log(a + b);
        show(1, 2);

当函数体内有多条语句(现在不加花括号):

        let show = (a, b) => a = a.toString(); b = b.toString(); console.log(a + b);
        show(1, 2);

运行结果:

这样的话,b = b.toString(); 和 console.log(a + b); 就不是函数体内的语句了,而是 全局代码,所以会显示b 没有定义.

所以有多条语句时,要加 画括号
正确示范(正常运行):

        let show = (a, b) => {a = a.toString(); b = b.toString(); console.log(a + b)};
        show(1, 2);// => 3

 

猜你喜欢

转载自www.cnblogs.com/duxiu-fang/p/10923796.html