ES6入门之函数的扩展

函数的扩展分为以下3个部分：

1 为函数参数指定默认值
2 函数的 rest 参数
3 箭头函数

---

• 为函数参数指定默认值，在ES5中只能变通的写法：

function fn(a, b){
  a = a || 10;
  b = b || 20;
  console.log(a + b);
}
fn(); //30
fn(0, 10); //20

当传入0是js会将a解析为false，直接将默认值赋给了a，这也给代码留下了隐藏bug；
ES6可以在函数声明时定义默认值：

function fn(a = 10, b = 20){
  console.log(a + b);
}
fn(); //30
fn(0, 10);//10

• rest 参数形式为（“...变量名”），用于获取函数的多余参数，这样就不需要使用arguments对象了。rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中。
  举例来说明：
  在ES5中我们获取所有传入的参数需要使用arguments对象

  function sum(){
  var args = arguments;
  var res = 0;
  for(var i=0; i<args.length; i++){
    res += args[i];
  }
  console.log(res); //15
  }
  sum(1, 2, 3, 4, 5);

ES6中我们可以使用rest参数来获取，并且ES6不推荐使用arguments对象。

function sum( ...arr){
  var res = a;
  for(var i=0; i<arr.length; i++){
    res += arr[i];
  }
  console.log(res); //15
}
sum( 1, 2, 3, 4, 5);

rest参数支持在前面增加参数，
function sum( a, ...arr){。。。}
sum( 10,1, 2, 3, 4, 5);
这样写也是没有问题的。

注：后面是不允许添加参数的，js会直接报错。

• 使用“箭头”（=>）定义函数

const fn = a => a; //箭头函数写法
const fn2 = function (a){   //ES5原有写法
  return a;
};
console.log(fn(1)); //1
console.log(fn2(2)); //2

上面代码演示了一个最基本的箭头函数的写法。
如果需要传入多个参数，执行多行代码时，我们需要将参数用（）括起来，代码块部分用{}括起来：

const fn = (a, b) => {
  a = a * 2;
  b = b * 2;
  return a + b;
};

如果需要返回一个对象或者是多个值得时候我们需要把返回值（）括起来：

const fn = (a, b) => ({a, b});
console.log(fn(1, 2)); //{a: 1, b: 2}

箭头函数的简单应用：

var arr = [5, 2, 3, 4, 1];
arr.sort(function (a, b){ //ES5原有写法
  return a - b;
});
console.log(arr); // [1,2,3,4,5]
arr.sort((a, b) => a - b); // 箭头函数写法
console.log(arr);// [1,2,3,4,5]

箭头函数用起来是不是很简单，可以少写不少代码。但是使用时需要注意一下几点：

1. 箭头函数体内没有自己的this对象，所以在使用的时候，其内部的this就是定义时所在环境的对象，而不是使用时所在环境的对象
   举例说明：

    function fn(){
    setTimeout(function (){
      console.log(this); //window对象
    }, 1000);
    setTimeout(() => {
      console.log(this); //obj
    },1000);
    }
    var obj = {a: 1};
    fn.call(obj); 
   

说的直白一点在上面fn函数中，fn的this就是箭头函数内的this。
所以不能给箭头函数使用 call apply bind 去改变其内部的this指向。

2 箭头函数体内没有arguments对象，如果要用，可以用Rest参数代替。

function fn(){
  setTimeout(() => {
    console.log(arguments); //[1, 2, 3, callee: function, Symbol(Symbol.iterator): function]
  }, 1000)
}
fn(1, 2, 3);

打印出来的是fn函数arguments，
如何使用rest参数代替：

const fn = (...arr) => arr;
console.log(fn(1, 2, 3, 4)); //返回一个数组[1,2,3,4]

3.不可以当作构造函数，不可以使用new命令，否则会抛出一个错误。

const Fn = (a, b) => a + b;
const f = new Fn(1, 2); //报错  Fn is not a constructor

注意以上3点我们就应该能愉快的使用箭头函数了。

以上都是个人理解如有不对之处还望指正交流！