箭头函数的写法特点

Rocko 发布于2019-08-23 18:13 / 2846人阅读

1、箭头函数简介

用 => 来标识

箭头函数表达式的语法比函数表达式更简洁，并且没有自己的this，arguments，super或 new.target。这些函数表达式更适用于那些本来需要匿名函数的地方，并且它们不能用作构造函数。

2、通常函数的定义方法

var fn1 = function(a, b){
  console.log(a + b);
};
fn1(1, 2); // 3

function fn2(a, b){
  console.log(a - b);
}
fn2(2, 1);//1

3、简写写法

对应上面两个

//删掉了function
var fn11 = (a, b)=>{   
  console.log(a+b);
};
fn11(1, 2); // 3
//删掉了function和函数名,无意义
(a,b)=>{  
  console.log(a-b)
}

4、基础语法

附加规则

当函数参数只有一个时，可省略小括号，但没有时，不能省略。
函数体（中括号）中有且只有一行return语句时，中括号和return关键字可以省略。
函数返回json对象，且只有一行return语句时，返回的简写要加小括号;如let add = a =>({"a":2})

    (参数1, 参数2, …, 参数N) => { 函数声明 }
    
    //相当于：(参数1, 参数2, …, 参数N) =>{ return 表达式; }
    (参数1, 参数2, …, 参数N) => 表达式（单一）
    
    // 当只有一个参数时，圆括号是可选的：
    (单一参数) => {函数声明}
    单一参数 => {函数声明}
    
    // 没有参数的函数应该写成一对圆括号。
    () => {函数声明}

        var add = function(a,b){
          return a+b;
        };
        // 即：
        var add = (a,b)=>{
          return a+b
        };
        // 即：
        var add = (a,b)=>a+b;
        ---------------------------------------------------------------------------------------
        var ret = function(a){
          return a+1;
        };
        // 即：
        var ret = a=>a+1;
        ---------------------------------------------------------------------------------------
        var non = function(){
          return 2+1;
        };
        // 即
        var non = ()=>2+1;

        函数体代码多于一行
        let fun1 = function(){
          console.log("1");
          console.log("2");
          return 1+2;
        }
        fun1();
        // 简写为
        let fun2 = ()=>{
          console.log("1");
          console.log("2");
          return 1+2
        }
        fun2();

       函数返回json对象时
        let f1 = function(){
          return {"a":2};
        }
        let f2 = ()=>{"a":2} // 错误
        let f2 = ()=>({"a":2})
        如果要返回一个对象，就要注意，如果是单表达式，这么写的话会报错：
        x => { foo: x }
        因为和函数体的{ ... }有语法冲突，所以要改为：
        // ok:
        x => ({ foo: x })

        实例
        let arr1 = [9,6,1,7];
        let arr11 = arr1.sort(
          function(a,b){
            return a-b;
          }  
        )
        console.log(arr11);
        let arr3= [2,3,9,5];
        let arr33 = arr3.sort((a,b)=>a-b)
        console.log(arr33)

5、总结

箭头函数看上去是匿名函数的一种简写，但实际上，箭头函数和匿名函数有个明显的区别：箭头函数内部的this是词法作用域，由上下文确定。

箭头函数写代码拥有更加简洁的语法。

不会绑定this，或者说箭头函数中不会改变this本来的绑定。

云服务器服务器托管箭头函数 python函数写法 js匿名函数写法自定义函数特点

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104852.html

ES6指北【2】—— 箭头函数

摘要：箭头函数基本语法函数语法具名函数匿名函数三句话第一句话声明第二句话声明匿名函数第三句话把匿名函数赋值给箭头函数语法特点只能做赋值，不能做声明第一种写法完全写法不省略参数个数，不省略函数体花括号参数个数函数体内语句个数第二种写法省略参数括号参 1.箭头函数基本语法 1.1 ES3 函数语法 // 具名函数 function xxx(arg1, arg2) { console.lo...

DobbyKim 2019-08-22 14:57 评论0 收藏0
ES6—箭头函数（5）

摘要：因为它不产生属于它自己上下文的箭头函数的另一个用处是简化回调函数。箭头函数使用场景箭头函数适合于无复杂逻辑或者无副作用的纯函数场景下，例如用在的回调函数定义中，另外目前等库，都大量使用箭头函数，直接定义的情况已经很少了。 0.为什么会出现箭头函数？ 1.传统的javascript函数语法并没有提供任何的灵活性，每一次你需要定义一个函数时，你都必须输入function () {},这至少...

yanwei 2019-08-23 17:20 评论0 收藏0
ES6对函数的改动

摘要：改动函数的改变不算太大，都是一些其他语言早就有的功能，而一直比较欠缺的，比如函数参数默认值，任意参数的表示法，最大的变化应该是支持箭头函数其他语言称之为表达式，一种对匿名函数的一种简写方式，以下来探讨一下函数在中的一些改变默认参数任意参数操 ES6 functions改动 ES6函数的改变不算太大，都是一些其他语言早就有的功能，而Javascript一直比较欠缺的，比如函数参数...

kk_miles 2019-08-22 10:38 评论0 收藏0
什么是 JAVASCRIPT？

摘要：，微软发布，同时发布了，该语言模仿同年发布的。，公司在浏览器对抗中没落，将提交给国际标准化组织，希望能够成为国际标准，以此抵抗微软。同时将标准的设想定名为和两类。，尤雨溪发布项目。，正式发布，并且更名为。，发布，模块系统得到广泛的使用。前言作为程序员，技术的落实与巩固是必要的，因此想到写个系列，名为 why what or how 每篇文章试图解释清楚一个问题。这次的 why w...

ephererid 2019-08-26 10:20 评论0 收藏0
ES6学习手稿之基本类型扩展

摘要：它是一个通用标准，奠定了的基本语法。年月发布了的第一个版本，正式名称就是标准简称。结语的基本扩展还有一些没有在这里详细介绍。前言 ES6标准以及颁布两年了，但是，好像还没有完全走进我们的日常开发。这篇文章从ES6的基本类型扩展入手，逐步展开对ES6的介绍。 ECMAScript和JavaScript JavaScript是由Netscape创造的，该公司1996年11月将JavaSc...

tommego 2019-08-21 18:25 评论0 收藏0