ES6--箭头函数和三点运算符

r囧r小猫 2022-12-06 04:20 146阅读 0赞

基本语法：  
没有参数：()=>console.log(‘xxxx’);不能省略小括号  
一个参数：i=>i+2;可以省略  
大于一个参数：(i,j) => i+j;不能省略小括号  
函数体不用大括号：默认返回结果  
函数体如果有多个语句，需要用\{\}包围，若有需要返回的内容，需要手动返回  
使用场景，用来定义多个回调函数  
特点：  
1，简洁  
2.箭头函数没有自己的this,它的this不是调用的时候决定的，而是在定义的时候决定的  
3.扩展理解：箭头函数的this看外层是否有函数  
如果有，外层函数的this就是内部函数的this  
若没有，则this指向window  
例：

// let fun = function(){
            //     console.log("你好");
            // }
            //形参情况
            let fun = ()=>console.log("你好");
            fun();
            let fun1 = a=>console.log(a);
            fun1('aaa');
            let fun2 = (a,b)=>console.log(a,b);
            fun2(25,100);
            //函数体情况
            let fun4 = (x,y)=>x+y;//可省略的大括号只有一条语句，会自动返回结果值
            // let fun4 = (x,y)=>{return x+y};
            console.log(fun4(100,200));
            //函数不止一条语句时，{}不能省略
            let fun5=(x,y)=>{
                console.log(x,y);
               return x+y;
            }
           console.log(fun5(100,50));
            let btn4 = document.getElementById("btn4");
            let btn5 = document.getElementById("btn5");
            btn4.onclick=()=>{
                alert(this);//window
            };
            let obj3={
                name:"箭头函数",
                getIt(){
                    btn5.onclick=()=>{
                alert(this);//obj
            };
                }
            //     getIt:()=>{
            //         btn5.onclick=()=>{
            //     alert(this);//window
            // };
                // }
            };
            obj3.getIt();

三点运算符:  
1.rest(可变)参数，用来取代arguements，但比他灵活，只能是最后部分形参参数  
2.扩展运算符  
let arr1 = \[1,3,5\]  
let arr2 = \[2,…arr1,6\];  
arr2.push(…arr1);

例：

// function foo1(a,b){
            //     console.log(arguments);//arguments是伪数组，没有forEach等方法
            //     //arguemnts.callee;//函数本身
            // }
            function foo1(...value){//如果前面还有实参，则value是剩下的参数，它必须放到最后
                console.log(value);
                value.forEach(function(item,index){
                    console.log(item,index)
                });
            }
            foo1(21,23);
            let arr4 = [1,5];
            let arr5 = [2,3,4];
            arr4 = [1,...arr5,5];
            console.log(arr4);
            console.log(...arr4);//将数取出来·
            /*
                形参默认值，当不传入参数时用形参里面的默认值
            */
            function Point(x=1,y=2){
                this.x = x;
                this.y = y;
            }
            let point = new Point();
            console.log(point);