javaScript中的箭头函数
箭头函数是ES6中新增的内容对于初学者来说可能会有很多疑惑,大括号和括号有什么区别呢?看了好多博客,讲的都是模棱两可,今天我来为大家献上干货,看完这个绝对能很好的掌握箭头函数。
首先明确箭头函数有两种不同的括号,功能是不一样的,例如下面的代码 后面是小括号的箭头函数默认只有一行代码,默认有返回,后面是大括号的默认是代码段,默认没有返回值,需要手动添加return
const f2=(a,b)=>(a+b)
const f =(a,b)=>{
const c =a+b
return c
}
这是对于js初学者来说最容易忽略的地方,这两中代码的功能是一样的,但是第一个是小括号并且没有return,第二个有return且有大括号,那么区别到底在哪里呢?下面为大家讲解,看完这个以后让你彻底掌握箭头函数。
先说第一种
看下面代码案例
//函数功能是求a+b的值
const f2=(a,b)=>(a+b)
//也可以写成
const f2 =(a,b)=>a+b
//控制台输出
console.log(f2(2,4))
上面的代码控制台会输出6这是因为箭头函数后面没有大括号默认只有一行代码,并且会返回后面表达式的值(所以只有一行也可以省略小括号)
第二种
第二种是截然不同的,对比起来就很容易理解,看下面代码
//同样求a+b的和
const f =(a,b)=>{
const c =a+b
}
//控制台输出
console.log(f(1,2))
这回控制台输出就不是3了,是undefine ,原因是用大括号函数就默认不是一行代码了,它默认没有return。 将代码改成下面这样
//同样求a+b的和
const f =(a,b)=>{
const c =a+b
return c
}
//控制台输出
console.log(f(1,2))
这回控制台输出就是3了,大括号默认是代码段,没有返回值,我们把它的计算结果c返回就可以了
下面的代码给读者拓展
<div id="test1" ></div>
<div id="test2"></div>
const con1 =()=> (<div>
<p >我是标签p</p>
</div>)
const con2 =()=>{
return(<div>
<p >我是标签p2</p>
</div>)
}
ReactDOM.render(con1(),document.getElementById('test1'))
ReactDOM.render(con2(),document.getElementById('test2'))
同样的第一个会自动返回组件,第二个则需要添加return,如果没有return就无法把组件加载到test2中