es6-函数扩展以及扩展运算符

港控/mmm° 2022-11-21 03:59 247阅读 0赞

# 函数扩展以及扩展运算符 #

故心故心故心故心小故冲啊

--------------------

### 文章目录 ###

*  函数扩展以及扩展运算符
 *  一、函数扩展
 *  二、扩展运算符
 *  总结

--------------------

# 一、函数扩展 #

//函数扩展
        //函数默认参数
        //ES5写法
        function fun(x,y){    
            y = y || '10';
            console.log(x,y);
        };
        fun(123);
    
        //ES6写法(减少代码的数量) 参数变量是默认声明的，所以不能用let或const再次声明。
        function fun(x,y ="10"){    
            console.log(x,y);
        };
        fun(123);
    
        //rest参数 用法:...变量名 注意:用于形参上面,获取函数的多余参数
        //ES6 引入 rest 参数（形式为`...变量名`），用于获取函数的多余参数，这样就不需要使用`arguments`对象了
        function fun(...item){ 
            //console.log(arguments[1])
            console.log(item)   // [1, 2, 3, 4, 5, 6]
        };
        fun(1,2,3,4,5,6)
    
        //注意，rest 参数之后不能再有其他参数（即只能是最后一个参数），否则会报错。
        function fun(a,...b){ 
            console.log(a);  //1
            console.log(b);  //[2,3,4]
      }
      fun(1,2,3,4)
    
      //扩展题一
      function fun(a,b,...c){ 
            c.push(a);
            console.log(c);   //[3, 4, 1]
        }
        fun(1,2,3,4)
        //扩展题二 求参数的和
        function add(...values){ 
            var sum = 0;
            for(var v of values){    //values[i]
                sum+=v;
            };
            return sum;
        };
        var n = 10;
        var a = 20;
        add(n,1,2,3,4,5,a,7,8)
    
    
        //箭头函数 简化函数的定义
        let f = v => v;    //变量名 = 参数 => 函数体
        var f = function(v){ 
            return v
        }
        
        //当参数为空时或者参数多个时需要写()
        //参数为空
        let f = () => 12345;
        var f = function(){ 
            return 12345
        }
    
        //参数多个
        let f = (n1,n2) => n1+n2;
        var f = function(n1,n2){ 
            return n1+n2
        }
    
        //由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加上括号，否则会报错。
        // 报错
        let getTempItem = id => {  id: id, name: "Temp" };
        // 不报错
        let getTempItem = id => ({  id: id, name: "Temp" });
        
        //经常使用
        var a = [1,2,3,4].filter(function(item){ 
            return item>3
        });
        var a = [1,2,3,4].filter(item=>item>3);
    
        //默认值
        function fun(x,y ="10"){    
            console.log(x,y);
        };
        var fun = (x,y='10')=>{ console.log(x,y)}
    
        //解构
        function move({ x = 0, y = 0} = { }) {    
                return [x, y];
        }
        var move = ({ x = 0, y = 0} = { })=>[x, y];
    
        move({ x: 3, y: 8}); 
    
        //rest参数
        var fun = function(...item){ 
           return item
        };
        var fun = (...item) => item;
        fun(1,2,3,4,5)
    
        //扩展题 如果函数体返回对象，添加()
        function fun(a,b){ 
            return { name:a,id:b}
        };
        fun(1,2);
    
        var fun =(a,b) => ({ name:a,id:b});
        fun(1,2);
    
    
        //注意点
        //1、箭头函数不能当作构造函数， 不可以使用new 命令
        //箭头函数中，this指向固定化，本身是没有自己的this,所以不能用作构造函数
        var Fun = ()=>{ 
            this.name = '1'
        };
        var f1 = new Fun()   //Fun is not a constructor
    
        //2、箭头函数没有原型 对象
        function fun(){ }
        fun.prototype;
        
        var fun2 =()=>{ }
        fun2.prototype;
    
        //3、不可以使用arguments对象 该对象在函数体内不存在 替代 rest
        var fun = ()=>{ 
            console.log(arguments[1]) //arguments is not defined
        };
        fun(1,2,3);
        //替代 rest
        var fun = (...item)=>{ 
            console.log(item[1]) 
        };
        fun(1,2,3);
    
        //4、this指向 由于箭头函数不绑定this,它会捕获其所在上下文的this的值，作为自己的this值(函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。)
        var str = 'global';
        var obj = { 
            str:'private',
            getStr:function(){ 
                console.log(this.str)
            }
        };
        obj.getStr();   //运行者（调用者）为obj, this指向obj
        var a = obj.getStr;
        a();  //global
    
    
        var str = 'global';
        var obj = { 
            str:'private',
            getStr:()=>{ 
                console.log(this.str)  //绑定的是定义者
                //箭头函数的表现为getStr的value,它在obj对象中,obj的执行上下文就是window,
                //this.str 实际就是window.str 输出‘global’
            }
        };
        obj.getStr();   //global
    
    
        //call() apply() bind() 对于this毫无影响
        var n = 10;
        function f(){ 
            return this.n
        };
        var obj ={ 
            n:8,
            f2:f
        };
        var obj2 = { 
            n:99
        }
        console.log(obj.f2.call(obj2));   //99
    
        //箭头函数
        var n = 10;
        var f=()=> this.n;
        var obj ={ 
            n:8,
            f2:f
        };
        var obj2 = { 
            n:99
        }
        console.log(obj.f2.call(obj2));  //10

# 二、扩展运算符 #

//...扩展运算符 将一个数组转为用逗号分隔的参数序列
        //1、数组合并
        let arr1 = [0, 1, 2];
        let arr2 = [3, 4, 5];
        //arr1.concat(arr2);
        let arr3 = [...arr1,...arr2];  //
       // ...[1,2,3] = 1,2,3
       //或者直接arr1.push(...arr2); 
       
       //2、参数
       function add(x, y) { 
            return x + y;
        }
        const numbers = [4, 5];
        add(...numbers) 
    
        //3、rest参数与扩展运算符的结合
        function f(...items) {    //...items rest参数
            console.log(items);  //[-1,0,1,2,3]
            console.log(...items);  //-1,0,1,2,3
        }
        const args = [0, 1];
        f(-1, ...args, 2, ...[3]);   //f(-1,0,1,2,3)
    
    
        const [first, ...rest] = [1, 2, 3, 4, 5];
        first // 1
        rest  // [2, 3, 4, 5]
    
    
        //ES5 在字符串中的应用 
        var s1 = "hello";
        console.log(s1.split(''));
        //ES6的用法
        [...'hello']   //['h','e','l','l','o']
    
        //深浅拷贝
        //深拷贝
        let a = [1,2];
        let a2 = [...a];
        a2[0] = 100;
        console.log(a);
    
        //对象中的运用
        let o1 = { id:1};
        let o2 = { name:2};
        let o3 = { ...o1,...o2};  //{id:1,name:2};
        let o4 = { ...o1,o2}; //{id:1,o2:{name:2}};
    
    
        let fun = () => 123;
        let obj4 = { ...o3,fun};
       //相当于
        obj4 = { 
            id:1,
           name:2,
           fun:function(){ 
               return 123
           }
       }

# 总结 #

函数扩展:  
  
1.es6的写法相比于大大减少了代码量  
  
2.rest参数 …变量名 用于获取函数的多余参数,只能作为最后一个参数,否则报错  
  
3.箭头函数 ()=>\{\} 当参数为空时或者参数多个时需要写()  
  
注意点:  
(1)、箭头函数不能当作构造函数,不可以使用new 命令.  
箭头函数中，this指向固定化，本身是没有自己的this,所以不能用作构造函数  
(2)、箭头函数没有原型 对象  
(3)、不可以使用arguments对象 该对象在函数体内不存在 替代 rest  
(4)、this指向 由于箭头函数不绑定this,它会捕获其所在上下文的this的值，作为自己的this值  
(5)、箭头函数中call() apply() bind() 对于this毫无影响

--------------------

扩展运算符:  
  
1…扩展运算符 将一个数组转为用逗号分隔的参数序列