zoukankan      html  css  js  c++  java
  • es6 箭头函数

    一、在es6中函数的定义和es5之间有明显区别。不需要关键字function 来进行定义,使用=>来指向函数。

    不可以new也就是做构造函数以及没有arguments参数。箭头函数的this是在定义的时候确定指向 这和es5不一样,es5是 谁调用他,他就指向谁。

    1         document.addEventListener('click',ev=>{
    2             setTimeout(()=>{
    3                 console.log(this)
    4             },1000)
    5         })

    输出:window。

    箭头函数this的指向是当时定义的父级作用域确定,计时器父级作用域而事件函数是箭头函数,他的this指向是由父级作用域,而他父级是document 它的作用域是window。所以输出window。这地有点绕。

    如果将事件函数改为普通匿名函数 就会指向document。

    1         document.addEventListener('click',function(){
    2             setTimeout(()=>{
    3                 console.log(this)
    4             },1000)
    5         })

    输出:document。

    因为普通匿名函数的指向是在被调用的时候确定的,而调用的时候是由document所以,他的指向是document,而箭头函数指向是由定义父级作用域,而父级是作用域是document所以执行document。

    好处:这样我们不必定义额外的变量去获取这个值,而是直接指向我们需要的对象。

    如果我们使用普通匿名函数的时候,this的输出是window 如果想获取document需要定义变量获取。

    1      document.onclick=function(){
    2             var  that=this;
    3             var setId=setTimeout(function(){
    4                     console.log(this);
    5                     console.log(that)
    6             },1000)
    7         }

    输出:this   window

               that  document

    语法:()=>{}

    1)、没参数情况:

    1         var  a=()=>2;
    2         console.log(a());

    注意:没有参数的时候,其中()不可以省略。 如果不写{}的时候,=>后面跟的是表达式即返回一个明确值,表示表达式为函数的返回值。

    2)、单个参数的情况:

    1         var sing=a=>2*a;
    2         console.log(sing(2));

    注意:单个参数的时候()小括号可以省略。

    3)返回值为一个对象,需要在返回值的加上小括号,因为{}在箭头函数认为是代码块即执行的函数体。需要用小括号()来让js解析成表达式。

    1         var obj=()=>({'a':2});
    2         console.log(obj());

     4)当有多条执行语句的时候,需要使用{}来表示。自定义返回值。

    1      var myfunc=(a)=>{
    2             a>100?a=200:a=10;
    3             return a;
    4         }
    5         console.log(myfunc(121))

    5)做为事件的handle

    1         document.addEventListener('click',ev=>{
    2             console.log(ev);
    3         })

    6)其他js函数中的参数为匿名函数。比如数组排序回调。

    1         var arr=[3,21,2,4,1].sort((a,b)=>{
    2             if(a>b){
    3                 return -1;
    4             }else{
    5                 return 1;
    6             }
    7         })
    8         console.log(arr);

    7)使用箭头函数,this被固定 他的指向就是他父级作用域,而普通匿名函数的,this的指向就是谁调用他就指向谁。

     1 //箭头函数
     2         var  obj={
     3 
     4             data:[1,2,3,4],
     5             check:()=>{
     6                 console.log(this);
     7                 return this.data;
     8             }
     9         }
    10         console.log('arrow'+obj.check())
    11 
    12 //普通箭头函数
    13         var  objNoArr={
    14             daxxta:[2,3,4],
    15             check:function(){
    16                 console.log(this);
    17                 return this.daxxta;
    18             }
    19         }
    20         console.log('noarrow'+objNoArr.check())

    注意:在箭头函数中,他的父级是obj  作用域是当前window。所以this指向就是当前window。

    而普通匿名函数,this指向为被调用对象,而objNoArr调用check函数所有this指向为objNoArr对象。

    所以我们在使用时候,一般箭头函数和普通匿名函数结合在一起使用,以便来获取当前操作对象。

    1 var  obj={
    2     name:'ok',
    3     init:function(){
    4         document.addEventListener('click',ev=>console.log(this.name))
    5     }
    6 }
    7 obj.init()

     二、es6 函数扩展:

    1、形参赋予默认值,在函数体里不能用let、const 再次赋值,会报错。

    1 var  testFunc=(a=2)=>{
    2     console.log(a)
    3 }
    4 testFunc();

    2、参数列表 rest  在箭头函数中没有arguments这个类数组接收形参。er是通过 ...argsname 来进行接收 类似于java 接收不固定参数一样,如果确定参数也可以这样写 a,....arrs  形参a接收第一个参数,而后面的arrs接收其他参数,arrs是数组而不是类数组,具备数组所有方法。

    1 let   testFuc=(...arrs)=>{
    2     console.log(arrs);
    3     console.log(  arrs instanceof Array)
    4 }
    5 testFuc(1,2,3,4)

    1 let   testFuc=(a,...arrs)=>{
    2     console.log(a,arrs);
    3     console.log(  arrs instanceof Array)
    4 }
    5 testFuc(1,2,3,4)

     而es5的匿名函数的是通过arguments来接收,arguments  是类非数组。

    1 var  testMyFunc=function(a,b,c){
    2      console.log(arguments);
    3      console.log( arguments instanceof Array)
    4  }
    5  testMyFunc(1,2,3)

     三、es6 函数扩展:

    1)函数默认值。在es6中可以定义默认值,以前我们在处理函数默认值的时候是用a||2 在a为0或者空字符串的时候 也被处理成默认值,es6可以直接使用function(a=2){}和python java处理的默认值类似。

    1         var  a=function(a=2){
    2             console.log(2)
    3         }
    4         a();

    2)我们定义对象的时候,有时候定义函数的时候,fn:function(){} 这种形式,可以直接写成 fn(){}  定义其他的属性的也可以直接简写。

    1         var c=11;
    2         var obj={
    3             c,
    4             a(){
    5             console.log(c)
    6         }
    7         }
    8         obj.a();
    9         console.log(obj.c);

    默认省略key值 c  其实是:c:c  a:function(){console.log(c)}

    注意的是:这是在对象属性中的定义!!!

     四、扩展运算符:

    使用三点:...来合并数组和对象。

    1     <script>
    2         let  arr1=[1,2,3,4];
    3         let arr2=[3,4,56];
    4         let arr3=[...arr1,...arr2];
    5         console.log(arr3);
    6         let obj1={a:2,b:3};
    7         let obj2={c:45,a:3};
    8         console.log({...obj1,...obj2});
    9     </script>

    主要在合并对象的时候,出现相同的key的时候,谁在后面 ,谁覆盖前面相同的key对应的值。

  • 相关阅读:
    Maven 环境的配置
    zTree的简单例子
    plsql免安装客户端的配置
    HDU 1232 畅通工程
    HDU 5698 瞬间移动
    Codeforces 1015E1 Stars Drawing (Easy Edition)
    Codeforces 784B Santa Claus and Keyboard Check
    Codeforces 500C New Year Book Reading
    NSarray 赋值 拷贝 等问题记录
    UINavigationController 操作记录
  • 原文地址:https://www.cnblogs.com/evilliu/p/9994690.html
Copyright © 2011-2022 走看看