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

向右看齐 2022-11-24 11:22 180阅读 0赞

## 箭头函数 ##

箭头 =>  
函数

在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…