关于es2015箭头函数的大括号代码块部分的一点理解

背景:在react中,遍历一个数组,生成一系列input插入dom

错误代码:

{phones.map((phone, index) => {
    <div key={index}>{index}</div>
})}

控制台源码:

phones.map(function (phone, index) {
    _react2.default.createElement(
        'div',
        { key: index },
        index
    );
})

这里只是创建了元素节点,并没有return返回dom节点,结果页面没有插入创造的dom节点。

正确代码:(去掉大括号)

{phones.map((phone, index) => 
    <div key={index}>{index}</div>
)}

控制台源码:

phones.map(function (phone, index) {
    return _react2.default.createElement(
        'div',
        { key: index },
        index
    );
})

这里有return,结果页面插入dom节点。

实践:

不使用大括号,arrow function默认添加return。 而使用大括号,就只是一个代码块,so arrow function的return不会添加,需要的话必须手动添加。

一般使用箭头函数时,代码块部分只有一条语句时,不使用大括号:

var sum = (num1, num2) => num1 + num2
//同样的写法
var sum = (num1, num2) => { return num1 + num2 }

等同于

var sum = function(num1, num2) {
  return num1 + num2;
};

如果有多条语句,使用大括号,同时使用return(否则没有返回值):

var sum = (n1, n2) => {
  console.log(n1);
  return n1 + n2
}

使用箭头函数返回对象:必须在对象外面加上括号,否则就只是个代码块,从而就不会返回对象了:

var sum = () => ({name: 'a'})

等同于

var sum = function sum() {
  return { name: 'a' };
};

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏221-B

python正则表达式的部分特殊符号

\w - 匹配字母或数字或下划线或汉字(3.x版本可以匹配汉字,但2.x版本不可以) \s - 匹配任意的空白符 \b - 在正则表达式中表示单词的开头或结尾,...

791
来自专栏专注 Java 基础分享

Java --- JSP2新特性

     自从03年发布了jsp2.0之后,新增了一些额外的特性,这些特性使得动态网页设计变得更加容易。jsp2.0以后的版本统称jsp2。主要的新增特性有如下...

1859
来自专栏python3

python异常处理--try...except

在python中,用try来测试可能出现异常的语句,然后用except来处理可能出现的异常,try except的表达形式如下:

672
来自专栏python百例

44-列表方法

701
来自专栏nummy

__import__详解

当使用import导入Python模块的时候,默认调用的是__import__()函数。直接使用该函数的情况很少见,一般用于动态加载模块。

692
来自专栏猛牛哥的博客

快手(AAU)更新记录v2.9.1.36

803
来自专栏Hongten

python开发_dbm_键值对存储_完整_博主推荐

============================================

795
来自专栏向治洪

Kotlin语法基础之控制流

Kotlin 的控制流与 Java 的控制流基本相同,只是使用 when 代替了 switch。当然,在 Kotlin中,if 和 when 不仅仅可以作为语句...

1817
来自专栏向治洪

Kotlin语法基础之控制流

Kotlin 的控制流与 Java 的控制流基本相同,只是使用 when 代替了 switch。当然,在 Kotlin中,if 和 when 不仅仅可以作为语句...

2029
来自专栏前端小叙

iview 下拉刷新loadTop报错解决

1142

扫码关注云+社区