本编主要介绍ECMA6中函数的新扩展的一些传参功能,以及箭头函数的使用
函数传参的新玩法
主要新功能:
函数的参数可以设置默认值(示例1)
函数中可以使用rest形参参数(...变量名),该语法主要用于获取多余的参数。(示例2)
-
在函数调用时也可传入带扩展运算符(...变量名)的实参,该语法可将不定个数参数,分为独立参数.(示例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)
函数体为单条语句可省略{} ,多条语句则不可省略,并尽量明确返回值。 (示例2)
-
箭头函数中的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的笔记,内容及案例多为书本抄写,未做代码正确性测试,内容仅供参考,不保证文中观点的及代码的正确性。