关于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 条评论
登录 后参与评论

相关文章

来自专栏java一日一条

教你在Java接口中定义方法

接下来,SimpleTimeClient类实现了TimeClient接口,具体代码如下:

642
来自专栏java一日一条

教你在Java接口中定义方法

基本上所有的Java教程都会告诉我们Java接口的方法都是public、abstract类型的,没有方法体的。

731
来自专栏积累沉淀

JSON

JSON的全称是”JavaScript Object Notation”,意思是JavaScript对象表示法,它是一种基于文本,独立于语言的轻量级数据交换格式...

2458
来自专栏IMWeb前端团队

打开Promise的正确姿势

引言 最近实践中需要用到大量的异步回调风格代码的编写,作者最近处于同步编程风格转为异步编程风格的状态。同时第一时间遇到了下面提到的代码,第一直觉就是该代码肯定有...

2985
来自专栏Python自动化测试

Python之函数学习(八)

python语言,即可以进行函数式的编程的语言,又是可以进行面向对象编程的语言,所谓函数,简单的理解就是将一些语句集合到一起,这样可以在程序中多次的...

813
来自专栏我的博客

调试小技巧file_put_contents() 和var_export以及var_dump

file_put_contents() 函数把一个字符串写入文件中。 我们要将数组打印到文件中,我们可以使用 <?php $arr = array( ‘...

3304
来自专栏友弟技术工作室

Go 程序的基本结构和要素

示例 package main import "fmt" func main() { fmt.Println("hello, world") } 包...

32311
来自专栏nummy

set与frozenset的区别

同多数语言一样,set表示集合,最重要的特性就是无序,所以Python中的set不支持indexing,但支持len(set),x in set 等操作。 s...

682
来自专栏程序员互动联盟

【答疑释惑】JavaScript解释器是干什么用的?

问题: ? JavaScript解释器主要是干什么用的?他不是一门语言吗? 解答: JavaScript是一门脚本语言,是需要被别人解释执行的,这个别人就是Ja...

2856
来自专栏跟着阿笨一起玩NET

C#修饰符

C#中类及类型成员权限访问修饰符有以下四类:public,private,protected,internal。

782

扫码关注云+社区