扩展运算符
1.改变函数调用
   var students = ['Abby','Andy'];
   var otherStudents = ['Jane','Tom'];
   students.push(...otherStudents);
   console.log(students); // Abby Andy Jane Tom

2.数组构造
   var parts = ['shoulders', 'knees'];
   var lyrics = ['head', ...parts, 'and', 'toes'];
   console.log(lyrics)// ['head', 'shoulders, 'knees', 'and', 'toes']

3.数组解构
   var students = ['Abby', 'Andy', 'Jane', 'Tom'];
   var somestudents, otherStudents;
    [somestudents, ...otherStudents] = students ;
    console.log(somestudents); // Abby
    console.log(otherStudents); // Andy Jane Tom

4.将类数组对象转换成数组
   var nodeList = document.querySelectorAll('div');
   var array = [...nodeList];

5.React 里面的延展属性（Spread Attributes）
   var props = {};
    props.foo = x;
    props.bar = y;
    var component = <Component {...props} />;
    它能被多次使用，也可以和其它属性一起用。注意顺序很重要，后面的会覆盖掉前面的。
     var props = { foo: 'default' };
     var component = <Component {...props} foo={'override'} />;
     console.log(component.props.foo); // 'override'

剩余操作符
1.获取参数
function fn(a, b, ...args) {
   return args.length;
}
fn(1, 2, 3, 4, 5 ); // 传进来的参数的个数 3
其中第一个形参 a 对应的是 1,第二个形参 b 对应的 2,…args 表示的就是[3, 4, 5]。

2.与 arguments 的不同
    arguments 想要变成数组，可以通过 Array.prototype.slice.call 方法，使用剩余操作符可以避免将 arguments 转为数组的麻烦。这种用法和上面 扩展运算符的用法还有点异曲同工之妙。
     // 下面的代码模拟了剩余数组
    function fn1(a, b){
       var args = Array.prototype.slice.call(arguments, fn1.length);
       console.log(args.length);
    }
    // 现在代码可以简化为这样了
    function fn2(a, b, ...args) {
       console.log(args.length);
    }
    fn1(1,2,3); // 1
    fn2(1,2,3); // 1

扩展运算符与剩余操作符的区别
关于扩展运算符与剩余操作符之间的区别，简单地说，在某种程度上，剩余操作符和扩展运算符相反，扩展运算符会“展开”数组变成多个元素，剩余操作符会收集多个元素和“压缩”成一个单一的元素。