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

函数扩展以及扩展运算符

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

---

---

一、函数扩展

 //函数扩展
    //函数默认参数
    //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…扩展运算符 将一个数组转为用逗号分隔的参数序列