ECMAScript中的箭头函数

ECMAScript中的箭头函数


  ECMAScript6中允许使用箭头(=>)表示函数,使用箭头函数使得

      代码更加简洁,使用箭头函数时,对 this 的关联。函数内置 this 的值,取决于箭头函数在哪儿定义,

      而非箭头函数执行的上下文环境。使得ES编程时摆脱this作用域问题的困扰,避免多次使用bind(this),绑定this的作用域。


      箭头函数的使用方法:

     

  1.箭头函数中传一个参数

         JS函数实现:

         let func=function(n){

           console.log(n);

     }

         func1(2); //2

         箭头函数实现:

         let func1=n=> console.log(n);

     func1(3);//3

      2.箭头函数中不传参数

      JS函数实现:

         let func2=function(){

          return 5;

     }

        箭头函数实现:

        let func2=()=> 5;

        console.log(func2());//5

      3.箭头函数传递多个参数

        JS函数实现:

        let func3=function(a,b){

      a+=5;

      return a+b;

    }

        箭头函数实现:

    let func3=(a,b)=> {

      a+=5;

      return a+b;

    };

     console.log(func3(3,4));//12

      4.箭头函数返回对象

    箭头函数返回对象是需要加括号()

    let initObj=id=>({id:id,name:"default"});

    console.log(initObj);//{id:3,name:'default'}

  5.对象的结解构赋值

    let full=({first,last})=>first+" "+last;

    console.log(full({first:"Maicha",last:"kerry"}));//Maicha kerry

  6.map集合遍历处理

    console.log([1,4,5,2].map(n=>n*2));//[2,8,10,4]

  7.sort排序(升序)

    onsole.log([1,4,5,2].sort((a,b)=>a-b);//[1,2,4,5]
箭头函数是ES6(ECMAScript 2015)引入的一种函数表达式的新写法,它提供了一种更简洁的函数书写方式。箭头函数的基本语法如下: ```javascript 参数列表 => { 函数体 } ``` 其,箭头(=>)前是参数列表,可以包含零个或多个参数;箭头后面是函数体,可以是一条语句或者是花括号内的多条语句。 箭头函数有几种不同的形式: 1. 如果参数只有一个,可以省略参数外的圆括号: ```javascript (参数) => { 函数体 } // 简写为 参数 => { 函数体 } ``` 2. 如果没有参数,使用空圆括号表示: ```javascript () => { 函数体 } ``` 3. 如果函数体只有一条返回语句,可以省略花括号和return关键字: ```javascript 参数 => 表达式 // 等同于 => { return 表达式; } ``` 4. 如果箭头函数不需要返回值,或者返回一个对象字面量,需要用圆括号包围对象字面量: ```javascript 参数 => ({ 属性名: 值 }) ``` 下面是一些具体的例子: ```javascript // 无参数的箭头函数 () => { return "Hello World"; } // 单个参数的箭头函数,可省略参数的圆括号 singleParam => { return singleParam; } // 多个参数的箭头函数 (param1, param2) => { return param1 + param2; } // 没有参数的箭头函数 () => { return { key: 'value' }; } // 单个表达式的箭头函数,自动返回表达式的结果 param => param * 2 // 使用箭头函数表示对象的方法(注意用圆括号包围对象字面量) const obj = { method: () => { console.log('Hello World'); } }; ``` 箭头函数有几个特点: - 箭头函数没有自己的`this`,它的`this`是词法级别的,继承自外围作用域。 - 箭头函数没有`arguments`对象,可使用剩余参数(...rest)来访问。 - 不能使用`new`关键字进行实例化,因为箭头函数没有自己的`this`,也就没有构造函数。 - 箭头函数不能作为`Generator`函数。 使用箭头函数时,可以根据函数体的复杂度和需要返回的表达式来选择合适的形式。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

慕容屠苏

你的鼓励是我最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值