ES6新特性箭头函数

(param1, param2, …, paramN) => { statements }  
(param1, param2, …, paramN) => expression  
         // equivalent to:  => { return expression; }  
  
// 如果只有一个参数，圆括号是可选的:  
(singleParam) => { statements }  
singleParam => { statements }  
  
// 无参数的函数需要使用圆括号:  
() => { statements }

函数简写: 如果函数值计算一个表达式并返回它的值，那么return和花括号都可以省略，并将待计算的额表达式紧跟在参数列表之后

1 语法:如果没有用{ } 将函数体括起来，那么返回值就是函数体执行的结果；

 	var fn = () => 1+2 ;
    console.log(fn);
    console.log(fn());//3
//------------------------------------------------------------------
    var fn1 = (value) =>  value ;//等价于
//  var fn1 = value =>  value ; 如果只传递一个参数，那么括号是可以不写的
    console.log(fn1);
    console.log(fn1(2));//2
//等价于 
	var fn1 = function(value){
   		return  value ;
	}
//----------------------------------------------------------------------
    var fn2 = (a,b) => a+b ;
    console.log(fn2 );
    console.log(fn2(2,3));//5

2 如果使用{ }将函数体括起来，默认返回值undefined;

	var fn1 = (value) =>  {value} ;
    console.log(fn1);
    console.log(fn1(2));//undefined
//等价于
	var fn1 = function(value){
       value ;
	}
    //函数执行完毕默认返回值是undefined ;

 	var fn = () => {return 1+2} ;
    console.log(fn);
    console.log(fn());//3
//----------------------------------------------------------
    var fn1 = (value) =>  {return value} ;
    console.log(fn1);
    console.log(fn1(2));//2
//----------------------------------------------------------
    var fn2 = (a,b) => {return a+b} ;
    console.log(fn2 );
    console.log(fn2(2,3));//5

3 如何用箭头函数自定义对象需要用小括号将花括号包起来；

var obj = (name,age) => ({
       name : name ,
       age:age
   });
console.log( obj("jhon",13));

等价于

var obj = function(name,age){
      return {
          name:name,
          age:age
      }
  }

4 箭头函数的优势

4.1 更简短的函数书写方法

 	var arr=["name",13,"Jim"];
    var newArr = arr.map(function(item){  //注意map函数没有返回值，默认返回值是undefined
        return item.length ;
    });
//等价于
    //var newArr = arr.map(item => item.length )
    console.log(newArr);
//-----------------------------------------------------------------------
 var Flatten = [[1,2],[4,6],[7,9]]
//    var newFaltten = Flatten.reduce(function(a,b){
//        return a.concat(b);
//    },[])
    var newFaltten = Flatten.reduce(
        (a,b) => a.concat(b),
        []
    );

4.2 不绑定this

//看下这个demo setInterval中的函数this默认指向是	window ,所以this.age获取不到值,等价于undefined++,结果是NaN;
function Person (){
        this.age = 0 ;
        setInterval(function(){
          	console.log(this);
            this.age++ ;  
          //点操作优先级最高，相当于先给window对象添加了一个age属性，但是未赋值，默认值是undefined
            console.log(this.age);
        },1000)
    }
    var person = new Person();

//正常我们解决这个问题的办法如下
function Person (){
    this.age = 0 ;
    var _this = this
    setInterval(function(){
        console.log(_this);
        _this.age++ ;
        console.log(_this.age);
    },1000)
}
var person = new Person();

如果我们使用箭头函数箭头函数则会捕获其所在上下文的 this值，作为自己的 this 值

function Person (){
    this.age = 0 ;
    setInterval(() => {
        console.log(this);
        this.age ++ ;
        console.log(this.age);
    },1000);
}
var person = new Person();

5 箭头函数没有自己的 arguments对象

1 2	var fn = () => arguments ; //arguments在箭头函数里面没有任何意义 console.log(fn());// arguments is not defined

1
2
3

//原先的函数声明都是有个arguements对象的
var fn = function(){return arguments}
    console.log(fn());

6 箭头函数可以用作对象的方法(箭头函数内部没有定义this指向，其会根据函数运行确定this指向)

'use strict'
   var name = "Jim";
   var obj= {
       name : 'Jhon',
       fn :() => this.name
   }
 console.log(obj.fn());

对比理解下:箭头函数的this指向其运行环境外围的作用域；

var person = {
    name: "Nicholas",
    sayName() {
        console.log(this.name);
    }
};
personn.sayName() ;//Nicholas

var person = {
    name: "Nicholas",
    sayName:()=> {
        console.log(this.name);
    }
  personn.sayName() ;//undefined

ES6新特性 箭头函数

ES6新特性箭头函数