ES6新特性（三） 函数扩展

目录

一、函数的参数默认值

二、剩余参数（rest参数）

三、扩展运算符

四、箭头函数

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

一、函数的参数默认值

　　1.1. 方法的形参可以赋默认值，在调用方法时，如果没有与之对应的实参则使用形参的默认值。

　　1.2. 赋默认值的形参的后面不能有普通形参（没有赋默认值的形参）。

　　　　1.2.1. 默认值只在没有传参或者参数为undefined时使用默认值，如果参数为null,则不适用默认值。

    //函数的参数默认值
    //赋默认值的形参在普通参数的后面
    function method(id,name,age=18,sex='男'){//形参有四个
        console.log(id,name,age,sex);//1 "张三" 20 "男"
    }
    method(1,'张三',20);
            
    //赋默认值的形参在普通形参的前面，这种写法是错误的
    function method2(id,name,age=18,sex){//声明默认值的形参在没有声明默认值的形参的前面
        console.log(id,name,age,sex);//1 "张三" "女" undefined
    }
    method2(1,'张三','女');

　　1.3. 函数参数默认值作用域的问题。

　　　　当函数形参默认值是函数中的某个形参，而该形参名与外部所声明的变量名同名，此时默认值所采用的值是函数中的形参，而不是外部的变量。

    //函数形参默认值的作用域问题
    let a = 15;
    function method(a,b=a){
        console.log(a,b);//输出 ：10 10
    }
            
    method(10);

 

 

二、剩余参数（rest参数）

　　2.1. 剩余参数的声明是在函数形参前用三个点，当函数实参数量大于形参数量时，剩余的实参将放入一个数组中，而这个数组就是剩余参数。

　　2.2. 剩余参数必须是最后一个形参，否则会编译报错。

　　下列代码中的 ...name  就是剩余参数

    //剩余参数（rest参数）
    //剩余参数必须是最后一个形参
    function method(age, ...name){
                
        console.log(age,name);//输出：12  ["zhangsan", "lisi", "wangwu"]
                
        for(let value of name){//将这个数组进行遍历
            console.log(value);//'zhangsan' 'lisi' 'wangwu'
        }
                
    }
            
    method(12,'zhangsan','lisi','wangwu');

 　　2.3. 解构与剩余参数搭配使用

　　在下列代码中，arr数组解构给了两个变量，a变量对应数组的第一个元素， 剩余参数b对应后面的所有元素，所以b也是个数组。

    //解构与剩余参数搭配使用
    let arr = [1,2,3,4,5];
            
    let [a,...b] = arr;
    console.log(a,b);// a:1  b:[2,3,4,5]

 

 

三、扩展运算符。

　　3.1. 扩展运算符可以将数组拆分成以逗号分隔的参数序列。

　　　　这里用console.log()输出拆分后的数组， 由于console.log()可以接收多个参数，各参数用逗号分隔，而拆分后的数组是以逗号分隔的参数序列，所以console.log(...arr)实际上就是输出了拆分后的值，而逗号已经被console.log()解析为分隔符了。

    //扩展运算符
            
    let arr = [1,2,3,4,5];
    //...arr;            //1,2,3,4,5
    console.log(...arr);// 1 2 3 4 5

　　3.2. 扩展运算符与前面的剩余运算符的作用正好相反，剩余运算符是将多个参数合并成一个数组，扩展运算符是将一个数组拆分成以逗号分隔的参数序列。

 

 

四、箭头函数

　　4.1. 箭头函数是ES6新增的一种简洁的定义函数的方式，它与普通函数不同，箭头函数不绑定this。

//箭头函数与普通函数的区别
let obj = {
    age:12,
    say:() =>{
        console.log(this.age);//undefined
    }
}
            
            
let obj2 = {
    age :10,
    say:function(){
        console.log(this.age);//10
    }
}
            
obj.say();//调用箭头函数
obj2.say();//调用普通函数

 

　　4.2. 箭头函数不绑定this,如果在箭头函数中使用this，它将指向箭头函数所定义的作用域中的this，也就是说：箭头函数定义在哪，箭头函数中的this就指向哪。

　　　　在下列代码中，obj对象的say方法是一个箭头函数，箭头函数中使用this调用age属性，由于箭头函数不绑定this，又因为obj 是个对象不是作用域，所以当箭头函数中使用this关键字调用age属性时，调用的是外部声明的全局变量age，也就是window对象的age。

var age = 10;//全局变量 age

let obj = {
    age:20,
    say:() => {
        console.log(this.age);//输出：10
    }
}
            
obj.say();