专栏首页Micro_awake webes6(三):es6中函数的扩展(参数默认值、rest参数、箭头函数)

es6(三):es6中函数的扩展(参数默认值、rest参数、箭头函数)

1.函数可以设置参数默认值

1 function test1(x,y=1){
2       console.log(x,y)
3     }
4     test1(10)//10 1

2.rest参数:形式为...变量名

1 function test2(a,...b){
2       for(let i of b){
3         a+=i
4       }
5       console.log(a)
6     }
7     // 说明传入的参数是一个一个的传入,而不是数组形式
8     test2(100,1,2,3) //106
9     test2(100,[1,2,3,4])//1001,2,3,4

注意:如果有rest参数,那么它一定是最后一个参数

1 function test3(a,...b,c){}//Uncaught SyntaxError: Rest parameter must be last formal parameter

功能形如 “rest参数的逆运算”:

1 function test21(a,b){
2       console.log(a+b)
3     }
4     // ...后面跟上数组好比是rest参数的逆运算
5     test21(...[1,2])//3

3.箭头函数(=>)

例一:

1 var test4=v => v
2     // 相当于
3     // var test4=function (v){
4     //   return v
5     // }
6     console.log(test4(100))//100

例二:

1 var test5=()=>1
2     // 相当于
3     // var test5=function (){
4     //   return 1
5     // }
6     console.log(test5())//1

例三:

1 var test6=(num1,num2)=>num1*num2
2     // 相当于
3     // var test6=function (num1,num2){
4     //   return num1+num2
5     // }
6     console.log(test6(2,6))//12

注意:大括号被解释成代码块,所以返回对象时要加上圆括号,否则报错

1 // var test7=()=>{name:1,age:100}//报错
2     var test7=()=>({name:1,age:100})//正确写法
3     console.log(test7())//{name: 1, age: 100}

如果函数代码块内有多条语句,用上大括号

1 var test8=(n1,n2)=>{return n1+n2}
2     console.log(test8(1,10))//11
3     var test9=(n1,n2)=>{ let a=n1*n2+n2*n2; console.log(a)}
4     test9(1,10)//110

重点!注意:箭头函数中this指向的是定义时所在的对象,不同于普通函数this指向的是运行时所在对象

 1 function Test10(){
 2       this.name='apple',
 3       this.num=10,
 4       setTimeout(()=>{
 5         //箭头函数this始终指向定义时所在对象,即Test10
 6         console.log('arrow function',this.num+1)
 7       },1000);
 8       setTimeout(function(){
 9         //普通函数在下面这种情况下,指向了全局对象window;严格模式下指向undefined
10         // 闭包
11         console.log('normal function',this.num+1)
12       },1000)
13     }
14     let te=new Test10()
15 //arrow function 11    
16 //normal function NaN

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JavaScript(五):函数(闭包,eval)

    1.函数的申明:三种方法: function命令 函数表达式:变量赋值 Function构造函数 1 //method 1: function命令 2 fu...

    用户1149564
  • JavaScript OOP(一)之构造函数与new命令

     面向对象编程:Object Oriented Programming,简称OOP。 典型的oop语言,如hava、c++,存在着类的概念,类就是对象的模板 (...

    用户1149564
  • javascript(三):对象

     对象(object)是javascript中很重要的数据类型。对象是“键值对”的集合,同时也是无序的。(注意:对象结尾处有分号) 1 var ob1={ ...

    用户1149564
  • 06JavaScript作用域与对象

    即使我们在定义这个函数之前调用它,函数仍然可以工作。这是因为在 JavaScript 中执行上下文的工作方式造成的。

    Dreamy.TZK
  • [第13期] 掌握前端面试基础系列一: ES6

    这里我们可以看到, 第一行中的a虽然还没声明, 但是我们用起来却不会报错。这种情况, 就是变量声明的提升。

    用户6900878
  • ES6 学习笔记之函数的拓展

    本文记录了一些 ES6 函数相关的改动,比较重要的就是箭头函数及箭头函数内部 this 的变化,其他一些不常见的概念我也仅仅是看了看,并没有实际操作测试效果。待...

    我与梦想有个约会
  • JS面向对象笔记二

    注意点:当构造函数里面有return关键字时,如果返回的是非对象,new命令会忽略返回的信息,最后返回时构造之后的this对象;   如果return返回的是与...

    tandaxia
  • 横扫 JS 面试核心考点

    Javascript是前端面试的重点,本文重点梳理下Javascript中的常考知识点,然后就一些容易出现的题目进行解析。限于文章的篇幅,无法将知识点讲解的面面...

    grain先森
  • 【面试】386- JavaScript 面试 20 个核心考点

    Javascript是前端面试的重点,本文重点梳理下 Javascript 中的常考基础知识点,然后就一些容易出现的题目进行解析。限于文章的篇幅,无法将知识点讲...

    pingan8787
  • 中高级前端高频面试题分享

    代码比较简单,我们只是在setTimeout的方法里面又调用了一次setTimeout,就可以达到间歇调用的目的。

    前端迷

扫码关注云+社区

领取腾讯云代金券