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}岁`+'\n' +"大家好，我叫"+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对象的指向是可变的，但是在箭头函数中，它是固定的。
　　 此篇终，待续……

巴特西

es6笔记4^_^function

一、function默认参数

二、rest参数

三、扩展运算符

四、箭头函数

具有词法作用域的 this

this问题

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

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

最新文章

热门文章