ES6 箭头函数

普通的函数与箭头函数

const elements = ['AB','BCD','CFG','DHZED']; 

普通的函数

elements.map(function(element){
    return element.length;
});

修改为箭头函数

elements.map(element=>{
    return element.length;
})

只有一个return时 可省略return 关键词和花括号

elements.map(element=>element.length);

因为我们只需要 length 属性，所以可以使用参数解构
需要注意的是字符串 "length" 是我们想要获得的属性的名称，而 lengthFooBArX 则只是个变量名，
可以替换成任意合法的变量名
elements.map(({length: len})=>len);

不绑定this

在箭头函数出现之前，每个新定义的函数都有它自己的this，在构造函数的情况下是一个新的对象，在严格模式的函数调用中时undefined，如果该函数被作为对象方法调用则为基础对象，this很烦。

function A() {
    var that = this;
    that.a = 0;
    console.log("A"+that.a);
    setInterval(function B(){
        that.a++;
        console.log("B"+that.a);
    },1000)
}

function A() {
    this.a = 0;
    console.log("A"+this.a);
    setInterval(()=>{
        this.a++;
        console.log("B"+this.a);
    },1000)
}

var f = function(v){
    return v + "xxx";
}
//转换 =>
var f = v => v + "xxx";

由于箭头函数没有自己的this,则通过apply 或者 call (改变this指向)第一个参数无效

var testcall = {
    t: 0,
    add: function(a){
       var f = v => v + this.t;
       return f(a);
    },
    addbyCallArrow: function(a){
        var f = v => v + this.t;
        var b = {
            t: 2
        }
        return f.call(b,a);
    },
    addCall: function(a){
        var f = function(v){
            return v + this.t;
        }
        var b = {
            t: 2
        }
        return f.call(b,a)
    }
}

console.log(testcall.add(2))
console.log(testcall.addbyCallArrow(2))
console.log(testcall.addCall(2))

函数对象中使用出现的问题

var obj = {
    a: 1,
    b: function(){
        console.log(this.a,this)
    },
    c: ()=> console.log(this.a,this)
}
obj.b()
obj.c()

箭头函数 不绑定 arguments

var f = function(a){
    console.log(arguments.length+ arguments[0])
}

var ff = a=> console.log(arguments.length+ arguments[0]) //异常 arguments is not defined

//剩余参数语法允许我们将一个不定数量的参数表示为一个数组。
var fff = (...a)=> console.log(a.length+a[0])

箭头函数不能用作构造器，所有不能和new 一起使用

var f = () => console.log('test new')
new f(); // f is not a constructor

var ff = function(){
    console.log('test new')
}
new ff();

箭头函数没有prototype 属性

var f = () => {};
console.log(f.prototype); //undefined

yield 箭头函数无法使用

yield是ES6的关键词，使生成函数执行暂停，yield关键字的后面的表达式的值返回给生成器的调用者。他被认为是一个基于生成器的版本的return关键字。
yield关键字实际返回一个IteratorResult 迭代器对象，他有两个属性，value和done 别代表返回值和是否完成。
yield无法单独工作，需要配合generator(生成器)的其他函数，如next，懒汉式操作，展现强大的主动控制特性。
next() 传参是对yield整体的传参，否则yield类似于return

返回对象字面量

var f = ()=>{a:1} //undefined 不正确，因为这是因为花括号（{} ）里面的代码被解析为一系列语句（即 foo 被认为是一个标签，而非对象字面量的组成部分）

var f = ()=>({a:1}) //正确 需要使用（）包含起来

//参数和箭头之间不可以换行
var f = ()
    => ({a:1}) //error

//解析规则，需要将箭头函数当作一个总体
var f = "xx" || (()=>2); //ok
var f = "xx" || ()=>2; //error