关于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' };
};