当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 聊聊 ES6 中的箭头函数

聊聊 ES6 中的箭头函数

2019年05月26日  | 移动技术网IT编程  | 我要评论

首先来两点：

  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

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网