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的笔记,内容及案例多为书本抄写,未做代码正确性测试,内容仅供参考,不保证文中观点的及代码的正确性。

推荐阅读更多精彩内容