针对JavaScript（ES6）中的箭头函数详解

针对JavaScript（ES6）中的箭头函数详解

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中

总结
后面是小括号的箭头函数默认只有一行代码，默认有返回
后面是大括号的默认是代码段，默认没有返回值，需要手动添加return