es6函数的扩展

1.参数的默认值
在开发中，给函数参数指定默认值，是很普遍很常见的需求。
原理：如果运算符 || 左边为true就直接返回左侧的值，否则返回右侧的值。

但是需要注意的是：参数对应的布尔值不能为false（比如：数字0，空字符串等转换成布尔值就是false），这就使得传统的实现方式存在一定的缺陷。

// 传统方式
function person(name,age){
    var name = name || 'lichao';
    var age = age || 18;
    console.log(name);
    console.log(age)
 }
 person('',0)  // 这里我传的参数为空和0，转换成布尔值的时候都为false，所以打印的是lichao和18。这并没有达到我想要的效果，这种方式存在缺陷

lichao
18

// es6方式
 function person1(name = 'lichao',age = 18){
    console.log(name);
    console.log(age)
 }
 person1('',0)  // 通过es6的方式设置函数的默认参数可以很好的解决问题。 只有不传或者传入undefined的时候才会触发默认值赋值。传0和null都不会触发。
''
0

需要注意的是：
1.当传递参数为多个的时候，设置默认值的参数一定要放在最后，也就是有默认值的参数后面不能再跟不需默认值的参数了。
2.函数的参数是默认声明的，声明过的变量，就不用let 或 const关键字再次声明，否则会报错。

// 错误的写法
function person1(name = 'lichao',age){
    console.log(name);
    console.log(age)
 }
// 思考一下其实也是能明白的。假设person1（0），那此时打印的是name = 0，age = undefined。这样设置默认值还有什么意义吗？


// 正确的写法
function person1(name,age = 18){
    console.log(name);
    console.log(age)
 }

// 在函数内再次声明与参数同名的变量
 function person1(name,age = 18){
    let name = 'ye'
    console.log(name);  //Identifier 'name' has already been declared
    console.log(age)
 }

2.rest参数
作用：获取函数剩下部分的参数。

function person2(...list){
    console.log(list)
}
person2(2,3,6,8)
// [2, 3, 6, 8]

// 此时的res为0。list就是将除了res以外的所有参数获取到  list是一个数组
function person2(res,...list){
    console.log(list)
}
person2(0,2,3,6,8) // [2, 3, 6, 8]

需要注意的是：rest参数必须是函数的最后一个参数，后面不能再跟其他参数。

// 错误的写法
function person2(res,...list,num){
    console.log(list)
} 
person2(0,2,3,6,8,100)  // 就会报错 Rest parameter must be last formal parameter
// 这段英文的意思是rest参数必须是最后一个形式参数

// 正确的写法
function person2(res,num,...list){
    console.log(list)
} 
person2(0,2,3,6,8,100)

3.扩展运算符
上面讲到的rest参数，它的表示法使用…（三个点），它除了用在rest参数中，还有其他的用途，我们称这种表示法为扩展运算符。他一般结合数组使用，把数组的元素用逗号分隔开来，组成一个序列。

function person3(a,b){
    console.log(a,b)
}

var arr = [2,3];
person3(...arr) // 2,3

// ...扩展运算符的作用不仅仅可以这样，还可以用它来合并数组
var arr = [2,3];
var arr1 = [4,5,6];
console.log([...arr,...arr1]) // [2,3,4,5,6]

作用：它可以将一个数组转成一个对应的参数数列。

4.箭头函数
箭头函数是es6一种全新的定义函数的方式，就是用箭头符号（=>），因此称为箭头函数。

    //传统写法
    var sum = function(a) {
       return  a ;
    };

    //箭头函数写法
    var sum = a => a    //当函数体里面只有一条语句的时候可以用这种简写方法  

    // 当函数的参数为多个的时候，用括号将参数括起来
        // es5函数的书写方式
        var person = function (a,b){
            console.log(a,b)
        }
        person(1,2) // 1,2

        // es6箭头函数
        var person1 = (a,b)=> console.log(a,b)
        person(3,4) //3,4

// 这里的a,b代表的是传进去的参数，箭头=>后面的部分代表的是函数体

通过箭头函数代替了传统函数的匿名函数，减少了不少的代码量。

箭头函数的this指向问题

       name = 'xiaobai';
        var person3 = {
            name:'lichao',
            showName(){
                console.log(this)//这里的this指的是对象
                function aaa(){
                    console.log(this.name)
                }
                aaa()
            }
        }
        person3.showName() // xiaobai 此时的指向的是window

        // 使用箭头函数de时候
        name = 'xiaobai';
        var person3 = {
            name:'lichao',
            showName(){
                let aaa = ()=>console.log(this.name)
                aaa()
            }
        }
        person3.showName()  // 此时的this指向的是person3

箭头函数中的this指向的是定义时的this，而不是执行时的this。

总结：es6为函数的扩展为以下几点：参数的默认值（解决不能传false，0，空字符串的缺陷，只有真正传的值为undefined或者不传的时候才会触发默认赋值）、rest参数（必须放在最后）、扩展运算符（…，将数组转换为一个对应的参数序列）、箭头函数。

本文章参考微信公众号：web前端教程