本篇文章给大家带来的内容是关于es6中箭头函数的解析（附示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
概述箭头函数有两个作用：
更简短的写法
不绑定this
语法一表览()=>{}()=>{console.log('arrow');return null}()=>'hello'(num1, num2)=>num1+num2num=>++num()=>({name:'arrow'})
写法正规一点
let add = (num1, num2)=>{   return num1 + num2}add(1, 2)
声明了一个add变量，该变量是一个加法函数，该函数有两个形参：num1、num2，返回值为这两个参数相加的结果
单参数
let  increment = num=>{    return num + 1}
上面声明了一个increment变量，该变量是一个自增函数，该参数只有一个形参num，返回值为该参数自增1，因为只有一个参数，所以可以省略箭头函数参数列表的()
无参数
let now = () => {    return date.now()}let now==>{} // uncaught syntaxerror: unexpected token ==
上面声明了一个now变量，该变量是一个函数，可以获取当前时间戳，因为不需要参数，所以参数列表置空，但是这种情况下不能将()省略，否则将导致语法错误
单一返回值
let now = () =>  date.now()
上面函数还可以简写为以下方式，因为函数体只有一句话，所以可以省略{}和return
单一返回值：返回对象字面量
虽然箭头函数可以省略{}和return，但是在返回一个对象字面量的时候要格外注意，如果是像下面的写法，虽然在语法检查的时候不会报错，但是和你所期望的可能不太一样，比如这里，你希望得到的数据是{name:'hello'}，但是结果却是undefined。
let data=()=>{name:'hello'} // 不会报错 console.log(data()) // undefined
为什么呢？用babel解析一下
可以发现，被解析成了
var data = function data() {  name: 'hello';};
并没有return，对比4的例子
所以，其实{name:'hello'}被解析成了函数体，{}是函数的{}，而不是对象的{}，而name:'hello'被解析成了语句，这种语句不常用，却是满足js语法的，叫做标签，案例：
var str = ;loop1:for (var i = 0; i < 5; i++) { if (i === 1) { continue loop1; } str = str + i;}console.log(str); // 0234
所以如果箭头函数需要返回单一的对象字面量，需要加对()
let data=()=>({name:'hello'})
不绑定this看下面一种情况
function person() {  this.age = 0;  setinterval(function growup() {    console.log(this.age)  }, 1000);}var p = new person();
通常，我们希望在setinterval的回调函数中访问person的变量，比如age，但是每个新定义的函数都有自己的this，所以这里的this是growup的this，并不是person的this，这将导致this.age将会得到undefined，为了解决这种问题，我们通常会使用折中的解决方案：
function person() {  this.age = 0;  var that=this  setinterval(function growup() {    console.log(that.age)  }, 1000);}var p = new person();
用一个临时变量that来持有this，避免使用growup的this，这个时候就轮到箭头函数上场了：
function person() {  this.age = 0;  setinterval(()=> {    console.log(this.age)  }, 1000);}var p = new person();
在箭头函数中，是不会绑定this的，也就是他没有自己的this，所以这个时候，他的this，就是person的this。这就是所谓的箭头函数不绑定this，而在我看来，回调函数就是箭头函数最好的归宿。
babel解析之后的结果其实还是老方法：
use strict;function person() {  var _this = this;  this.age = 0;  setinterval(function () {    console.log(_this.age);  }, 1000);}var p = new person();
注意箭头函数支持默认参数
let add = (num1 = 0, num2) => num1 + num2
箭头函数支持剩余参数
let add = (...numlist) => numlist.reduce((n1, n2) => n1 + n2)
箭头函数支持参数列表解构
let f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;
箭头函数不支持arguments，如果要使用arguments，推荐上面的剩余参数的写法
// 栗子1var arguments = [1, 2, 3];var arr = () => arguments[0];arr(); // 1// 栗子2function foo(n) {  var f = () => arguments[0] + n; // 隐式绑定 foo 函数的 arguments 对象. arguments[0] 是 n  return f();}foo(1); // 2// 栗子3function foo() {   var f = (...args) => args[0];   return f(2); }foo(1); // 2
object.defineproperty()会出现意料之外的影响
'use strict';var obj = {  a: 10};object.defineproperty(obj, b, {  get: () => {    console.log(this.a, typeof this.a, this);    return this.a+10;    // 代表全局对象 'window', 因此 'this.a' 返回 'undefined'  }});
无法和new一起使用
var foo = () => {};var foo = new foo(); // typeerror: foo is not a constructor
没有prototype
var foo = () => {};console.log(foo.prototype); // undefined
解析顺序有影响
let callback;callback = callback || function() {}; // okcallback = callback || () => {};      // syntaxerror: invalid arrow-function argumentscallback = callback || (() => {});    // ok
以上就是es6中箭头函数的解析（附示例）的详细内容。