es6笔记4^_^function

一、function默认参数

　　现在可以在定义函数的时候指定参数的默认值了，而不用像以前那样通过逻辑或操作符来达到目的了。
　　es5

function sayHello(name){
        //传统的指定默认参数的方式
        let name1 = name||'hubwiz';
        return 'Hello'+name1;
    }

　　运用ES6的默认参数

function sayHello2(name='hubwiz'){
        return `Hello ${name}`;
    }
    function sayHello3(name='张三',age=19){
       return `大家好，我叫${name},今年${age}岁`+'
' +"大家好，我叫"+name+",今年"+age;
    }
  console.log(sayHello());//输出：Hello hubwiz
    console.log(sayHello('汇智网')); //输出：Hello 汇智网
    console.log(sayHello2());  //输出：Hello hubwiz
    console.log(sayHello2('汇智网'));
    console.log(sayHello3());//输出：Hello 汇智网
    console.log(sayHello3('nick',26));

二、rest参数

　　rest参数（形式为“...变量名”）可以称为不定参数，用于获取函数的多余参数，这样就不需要使用arguments对象了。
　　rest参数搭配的变量是一个数组，该变量将多余的参数放入数组中。

function add(...values) {
    console.log(...values);//1 2 3
    console.log(values);//[1,2,3]
    let sum = 0;
    for (var val of values) {
        sum += val;
    }
    return sum;
}
console.log(add(1, 2, 3));

　　不定参数的格式是三个句点后跟代表所有不定参数的变量名。比如以上示例中，...values 代表了所有传入add函数的参数。

三、扩展运算符

　　扩展运算符（spread）是三个点（...）。它好比rest参数的逆运算，将一个数组转为用逗号分隔的参数序列。该运算符主要用于函数调用。

　　它允许传递数组或者类数组直接做为函数的参数而不用通过apply。

    let people=['张三','李四','王五'];
//sayHello函数本来接收三个单独的参数people1，people2和people3
    function sayHello4(people1,people2,people3){
        console.log(`Hello ${people1},${people2},${people3}`);
    }
//但是我们将一个数组以拓展参数的形式传递，它能很好地映射到每个单独的参数
    sayHello4(...people);   //输出：Hello 张三,李四,王五
//而在es5，如果需要传递数组当参数，我们需要使用函数的apply方法
    sayHello4.apply(null,people);   //输出：Hello 张三,李四,王五

四、箭头函数

　　箭头函数是使用=>语法的函数简写形式。这在语法上与 C#、Java 8 和 CoffeeScript 的相关特性非常相似

    let array = [1, 2, 3];
//传统写法
    array.forEach(function(v) {
        console.log(v);
    });
//ES6
    array.forEach(v => console.log(v));
//它们同时支持表达式体和语句体。与（普通的）函数所不同的是，箭头函数和其上下文中的代码共享同一个具有词法作用域的this。
    let evens = [1,2,3,4,5];
    let fives = [];
// 表达式体
    let odds = evens.map(v => v + 1);
    let nums = evens.map((v, i) => v + i);
    let pairs = evens.map(v => ({even: v, odd: v + 1}));

// 语句体
    nums.forEach(v => {
        if (v % 5 === 0){
        fives.push(v);
    }
});
    console.log(fives);

　　具有词法作用域的 this

    let bob = {
        _name: "NICK",
        _friends: ["Amy", "Bob", "Cinne", "Dylan", "Ellen"],
        printFriends() {
            this._friends.forEach(f => console.log(this._name + " knows " + f));
        }
    }
    bob.printFriends();

例子：
　　es6

let test = (x, y) => {x++; y--; return x+y};

　　相当于es5

function test(x, y) {
    x++;
    y--;
    return x + y;
}

　　this问题

class Animal {
    constructor(){
        this.type = 'animal'
    }
    says(say){
        setTimeout(function(){
            console.log(this.type + ' says ' + say)
        }, 1000)
    }
}
var animal = new Animal()
animal.says('hi')  //undefined says hi

　　运行上面的代码会报错，这是因为setTimeout中的this指向的是全局对象。所以为了让它能够正确的运行，传统的解决方法有两种：
　　第一种是将this传给self,再用self来指代this

function says(say) {
    var self = this;
    setTimeout(function () {
        console.log(self.type + ' says ' + say)
    }, 1000)
}

　　第二种方法是用bind(this),即

    function says(say){
        setTimeout(function(){
            console.log(this.type + ' says ' + say)
        }.bind(this), 1000)
    }

　　但现在我们有了箭头函数，就不需要这么麻烦了：

class Animal2 {
    constructor(){
        this.type = 'animal'
    }
    says(say){
        setTimeout( () => {console.log(this);
            console.log(this.type + ' says ' + say)
        }, 1000)
    }
}
    var animal2 = new Animal2();
    animal2.says('hi') ; //animal says hi

箭头函数有几个使用注意点。
1.函数体内的this对象，即绑定定义时所在的对象，而不是使用时所在的对象。
　　并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有自己的this，它的this是继承外面的，因此内部的this就是外层代码块的this。
2.不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。
3.不可以使用arguments对象，该对象在函数体内不存在。
上面三点中，第一点尤其值得注意。this对象的指向是可变的，但是在箭头函数中，它是固定的。
　　 此篇终，待续……