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

小胖

发布于 2018-06-27 17:56:16

4560

发布于 2018-06-27 17:56:16

背景：在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' };
};

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2018.02.17 ，如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度