设为首页 加入收藏

TOP

聊聊 ES6 中的箭头函数
2019-09-17 18:59:22 】 浏览:26
Tags:聊聊 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

 

】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇JavaScript 中那些关于坐标和距离.. 下一篇页面性能优化办法有哪些?

最新文章

热门文章

Hot 文章

Python

C 语言

C++基础

大数据基础

linux编程基础

C/C++面试题目