ES6 箭头函数+...剩余参数+...扩展运算符

箭头函数

箭头 =>
函数

在ES6中，可以使用箭头函数代替常规函数
A.参数列表

//1.没有参数
        //es5
        // function fn() {
        //     console.log('hello world');
        // };        
        // var fn = function () {
        //     console.log('hello world');
        // };

        //es6
        // let fn = () => {
        //     console.log('hell world');
        // }
        // fn();
        //2. 一个参数
        // let fn = function (a) {
        //     console.log(a);
        // }
        //es6
        // let fn = (a) => {
        //     console.log(a);
        // }
        //若只有一个参数，则可以省略()   特殊情况
        //简化为：
        // let fn=a=>{
        //     console.log(a);;
        // }
        // fn(10);
        //3.两个参数
        // let fn=function(a,b){
        //     console.log(a,b);
        // }
        // //es6
        // let fn=(a,b)=>{
        //     console.log(a,b);
        // }
        //多参
        let fn=(a,b,c)=>{
            console.log(a+b+c);
        }
        fn(10,2,30);

B.函数返回值

//函数的返回值
        //函数体有返回值
        //1.函数体有多条语句组成
        // let fn = function (a, b) {
        //     console.log(a, b);
        //     return a + b;
        // };
        //es6
        // let fn=(a,b)=>{
        //     console.log(a,b);
        //     return a+b;
        // }

        // console.log(fn(10,20));
        //2.函数体只有一句，且是返回值语句，可以省略{},return
        // let fn = function (a, b) {
        //     return a + b;
        // }
        //es6  普通改造
        // let fn = (a, b) => {
        //     return a + b;
        // }
        // console.log(fn(10, 20));
        //可以简化
        let fn = (a, b) => a + b;
        console.log(fn(10, 20));
        let fn1=a=>a;

特殊情况：函数只有一句，return语句，返回值是对象：
     // let fn=()=>{name:'jack',age:20};//认为{}是函数体的{}
        //方案一：
        // let fn = () => {
        //     return {
        //         name: 'jack',
        //         age: 20
        //     };
        // };

        //方案二：
        let fn=()=>({name:'jack',age:20});//将对象看做一个整体
        // let fn=()=>[10,20];
        console.log(fn());

普通函数与箭头函数的区别：

1）箭头函数不能使用arguments，(使用rest参数)
2）箭头函数不能作为构造函数
3）箭头函数不能作为事件函数(this指向)
4）对象的方法也不能使用箭头函数（this指向）
5）箭头函数不能通过call和apply来改变this指向
6）ES5中this指向调用者，ES6中this指向上下文对象（父作用域对象的this指向）(定义时的作用域对象)

剩余参数（rest参数）

rest参数，用法：…变量名
注意：剩余参数，需要出现在函数的参数位置
功能：将接收到参数封装为一个数组

注意：rest参数只能出现在参数列表中的最后一个位置

扩展运算符

用法： …变量名
功能：它是剩余参数的逆运算（打散）
它可以打散所有的可遍历(iterator)的集合,例如：数组、对象、字符串、DOM集合、Set、Map…