es6 函数的使用

参数的默认值

先来看一下原先的写法：

function demo(n){
    var name=n||'aa'//默认
    console.log(name);
}
demo('bb') // bb
demo() // aa
demo(null) // aa
demo('') // aa

可以看到以上方法不能0之类的话，隐式转化后布尔类型是FALSE的，会还用默认值

es6:

function demo(n='aa'){//es6的默认值
    console.log(n);
}
demo('bb') // bb
demo(0) // 0
demo(null) // null
demo(nudefined) // 报错

改成es6后默认值，只有在传入undefined时，才会触发默认值赋值，传入其他值，也可以正常的解析出来，供我们使用了，在我们指定默认值了之后，不能再函数再定义同名的值，并且我们书写默认值时，指定默认值的变量必须放到最后一项，否则默认值不会生效，少传参的一项也会undefined，或者直接指定第二个参数是undefined,但是不够简洁，一般情况不会这样写

function demo(a,b='b',c){//es6的默认值需要写到参数的最后
    console.log(a);
    console.log(b);
    console.log(c);
}
demo(0,null) // 0 null undefined
demo(0,undefined,null) // 0 b null
demo(undefined) // undefined b undefined

不定参数

不定参数用来表示不确定参数个数，形如，...变量名，由...加上一个具名参数标识符组成。具名参数只能放在参数组的最后，并且有且只有一个不定参数。

function sum(num,...arr){ //...必须是最后一个参数
    console.log(num)  // 1
    arr.forEach(function(item){
        num+=item
    })
    console.log(num); // 10
}
sum(1,2,3,4)

通过例子，很清晰能看到，在 扩展运算符（...）之前的变量是正常的赋值，当定义的变量用完后，剩下的参数存在 ...arr 中

注：不定参数并不是适合所有的函数使用，只在特定的情境下会比较适用，比方说刚刚案例中的求和函数，就十分适合把参数收集起来放在数组中进行求和，在适当的情况下使用它可以事半功倍，减少代码量，提高开发效率。不定参数必须在最后一项，否则报错

箭头函数

箭头函数是ES6给我们介绍一种全新的定义函数的方式，就是用箭头符号（=>），故得名为箭头函数。具体语法直接来看案例：

// 基本语法
var fn = (a,b=10) => {
    return a + b
}
console.log(fn(1)) // 11

// 只有一个参数时可以省略()，函数体只有一行解析为 return+语句，并且可以省略{}
var fn1 = a => a
console.log(fn1(1)); // 1
// fn1 等同于 f
// var f = function(a){
//  return a;
// }

// 没有参数只写一个(),函数体不想return的话，加上{}
var fn2 = () => {console.log('fn2执行了，但是没有返回值')};
console.log(fn2()); // undefined

var fn3 = (a,b) => a+b
console.log(fn3(1,1)); // 2

// 想要返回对象，因为{}和箭头函数语法冲突，需要再包一层()
var fn4 = (a,b) => ({name:a,age:b})
console.log(fn4('zs',18)); // {name: 'zs', age: 18}

箭头函数的特点

1、箭头函数体中的 this 对象，是定义函数时的对象，而不是使用函数时的对象。直接看例子

// 在全局挂载一个 age 100
var age = 100

let sayFn = function() {
    console.log(this.age)
}

let obj = {
    age: 18,
    that:this,
    say: sayFn
};

let obj1 = {
    age: 18,
    that:this,
    say: () => {
        console.log(this.age);
    }
};

let obj2 = {
    age:20,
    say: function() {
        (()=>console.log(this.age))()
    }
};

sayFn() // 100
console.log(obj.that); // window
obj.say() // 18
console.log(obj1.that); // window
obj1.say(); // 100
obj2.say(); // 20

这样就可以直观的看到，普通函数和箭头函数this指向的不同

obj2和obj1的this一样，但是里面的箭头函数的this指向的是 obj2.say的this也就是obj2

并且但是在箭头函数中，this是固定的。

// 回调函数
var obj = {
    age: 18,
    sayHello: function () {
      setTimeout(function () {
        console.log(this.age);
      });
    }
};
var age = 20;
obj.sayHello();  // 20
 
var obj1 = {
    age: 18,
    sayHello: function () {
      setTimeout(()=>{
        console.log(this.age);
      });
    }
};
var age = 20;
obj1.sayHello();  // 18

2、箭头函数不能作为构造函数，不能使用new ，会抛出一个错误

3、箭头函数没有arguments，如果要用，可以用 rest (...) 参数代替

4、不可以使用yield命令，因此箭头函数不能用作 Generator 函数

5、因为this指向不变，箭头函数通过call和apply调用，只会传入参数

6、箭头函数没有原型对象