es6中扩展运算符在函数参数的运用以及箭头函数的一点知识

1、利用扩展运算符将函数的arguments类数组对象转换成数组：

  

function sum() {
  // let  args = Array.prototype.slice.call(arguments); (传统方法)
  // let args = [...arguments];
  let [...args] = arguments;
  console.log(args);  
}
sum(1,2,321,4354,'fdafsd');

或者更直接：(准确来讲，此处应该将"...args"中的"..."称之为剩余参数，它和扩展运算符一样是三个点，根据场景的不同，这三个点的操作符的作用在切换，简单的说，剩余参数是做聚合用的，扩展运算符是做展开的，例如我们在操作一个数组的时候，[1,2,...[1,2,3]]这里的点点点的作用是将内层数组展开放到外层数组里即[1,2,1,2,3]，这种情况下“...”称之为扩展运算符，而在下图的函数参数处，“...”起到一个聚合作用，它是将函数传入的所有参数组合成为一个数组，这种情况下“...”称之为剩余参数)

function sum(...args) {
  // let  args = Array.prototype.slice.call(arguments); (传统方法)
  // let args = [...arguments];
  // let [...args] = arguments;
  console.log(args);  
}
sum(1,2,321,4354,'fdafsd');

剩余参数除了以上用法，还可以这样用：

function op(type,...nums) { //注意剩余参数必须放在最后一位 (type,name,...nums）是不行的
  console.log(type);
  console.log(nums);
}

 op('sum',1,23,454,3,67,234);

可根据type参数的不同，对后续参数做不同的处理，注意，剩余参数必须放在最后一位！

2、箭头函数

箭头函数没有arguments类数组对象，也没有函数的this指向

可以利用扩展运算符（此处应准确称之为剩余参数）来起到函数中的arguments对象的作用：

const log = (...args) => {
  console.log(args);
};
log(1,2,3);

因为箭头函数没有this,所以在很多情况下，就可以避免傻傻分不清this的用法而产生的一些bug的问题了：

const xiaoming = {
  name:'xiaoming',
  age:null,
  getAge:function() {
    let _this = this;
    //...ajax
    setTimeout(function() {
      _this.age = 14;
      console.log(_this);    
    },1000);
  }
}

xiaoming.getAge();

//箭头函数的使用，免除保留this的操作，更简洁

const xiaoming = {
  name:'xiaoming',
  age:null,
  getAge:function() {
    // let _this = this;
    //...ajax
    setTimeout(() => {
      this.age = 14;
      console.log(this);    
    },1000);
  }
}

xiaoming.getAge();