ECMA6学习-函数传参 和 箭头函数使用

本编主要介绍ECMA6中函数的新扩展的一些传参功能,以及箭头函数的使用

函数传参的新玩法

主要新功能：

1. 函数的参数可以设置默认值（示例1）

2. 函数中可以使用rest形参参数（...变量名），该语法主要用于获取多余的参数。（示例2）

3. 在函数调用时也可传入带扩展运算符（...变量名）的实参，该语法可将不定个数参数，分为独立参数.（示例3）

    //示例1：默认参数
    function Point(x = 0, y = 0){
        this.x = x;
        this.y = y;
    }
   
    var new Point();
    //p = { x:0, y:0 }
   
    //示例2：rest 参数获取示例
    function push(array,...items){
        items.forEach(function(item){
            array.push(item);
            console.log(item);
        })
    }
    var a = [];
    push(a,1,2,3);
   
    //示例3：
    function add(x,y){
        return x + y;
    }
    var numbers = [4,38];
    add(...numbers); //42
   

箭头函数玩法

语法：

• 变量名 = 参数 => 返回值;
• 变量名 = （参数）=> 函数体;

使用注意：

1. 不需要参数或多个参数时，使用括号（）包起来。 （示例1）

2. 函数体为单条语句可省略{} ，多条语句则不可省略，并尽量明确返回值。 （示例2）

3. 箭头函数中的this直接指向为定义时的对象，与传统function声明的函数中的this不一样。（示例3）

    1. 书写一个最简洁的箭头函数表达式
    var f = v => v;
   
    2. 不给参数或多个参数
    var f = () => 5;
    var sum = (num1, num2) => num1 + num2;
    var sum = (num1, num2) => {
        num1 ++;
        num2 ++;
        return num1 + num2;
    };
   
    3. �箭头函数this与funciton声明中的this
   
    // 嵌套function 中的this ，调用giftPicker将出错。
    let gift = {
        gifts : ['teddy bear','spiderman','dinosaur','thomas loco'],
        giftPicker :function(){
            return function(){
                let pickedNumber = Math.floor(Math.random() * 6);
                return this.gifts[pickedNumber];   //此处的this将指向window,而不是gift对象
            };
        }
    };
   
    // 箭头函数中的 this 不飘移，可正常调用giftPicker
    let gift = {
        gifts : ['teddy bear','spiderman','dinosaur','thomas loco'],
        giftPicker :function(){
            return () => {
                let pickedNumber = Math.floor(Math.random() * 6);
                return this.gifts[pickedNumber];   //此处的this是gift对象
            };
        }
    };
   

本文为我个人学习ECMA6的笔记，内容及案例多为书本抄写，未做代码正确性测试，内容仅供参考，不保证文中观点的及代码的正确性。