箭头函数用法及和ECMA5数组方法结合

1.箭头函数用法

箭头函数：新潮的函数写法
【注】适当的省略函数中的function和return关键字

各种形式的箭头函数

  //1.无参数，无返回值
  function show(){
      alert("hello world");
  }
  var show = () => {
      alert("hello world");
  }
  
  //2.有一个参数，无返回值
  function xxx(num){
      alert(num);
  }
  var xxx = num => {
      alert(num);
  }

  //3.有一个参数，有返回值
  function add(x){
      return x + 10;
  }
  var add = x => {
      return x + 10;
  }

  //4.多个参数，有返回值
  function show(x,y){
      return x + y;
  }

  var show = (x,y) => {
      return x + y;
  }
  
  //【注】当代码语句只有一条时，可以去掉return并省略大括号

2.箭头函数和ECMA5数组方法结合

/* 
      filter  过滤
      map	  遍历
  */
 var arr = [10,20,30,40,50];
 
 // 传统函数写法
 var newArr = arr.filter(function(item){
      return item > 20;
 });
 
 // 箭头函数写法
 var newArr = arr.filter(item => item > 20); // [30,40,50]
 var newArr = arr.map(item => item * 1.3); // [13, 26, 39, 52, 65]

3.箭头函数要注意的部分

1.箭头函数，不能用new
2.箭头，如果返回值是一个对象，一定要包裹();

// 传统函数写法
function show(){
    return{
        username: 'xxx'
    }
}
// 箭头函数写法，注意省略return和大括号后返回一个对象，对象外要包裹()
var show = () => ({username: 'xxx'});

3.箭头函数中的this，指向的是上一层函数的主人

var person = {
    username: '钢铁侠',
    // 传统函数写法
    show: function(){
        alert(person.username); // 钢铁侠
        alert(this.username); // 钢铁侠
    },
	// 箭头函数写法
    show: () => {
    alert(person.username); // 钢铁侠
    alert(this.username); //undefined 因为this指向了window
  }
}