聊聊 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