• 技术文章 >web前端 >前端问答

    es6箭头函数是什么意思

    长期闲置长期闲置2022-03-30 17:27:01原创84

    在es6中,箭头函数是一种使用“=>”定义函数的新语法;箭头函数的函数体内的this指向始终是指向定义它所在的对象,而不会指向调用它的对象,并且不可以改变this的改变,语法为“let fun=(参数) => {函数体};”。

    本教程操作环境:windows10系统、ECMAScript 6.0版、Dell G3电脑。

    es6箭头函数是什么意思

    在ES6中,箭头函数是其中最有趣的新增特性。顾名思义,箭头函数是一种使用箭头(=>)定义函数的新语法,但是它与传统的JavaScript函数有些许不同,主要集中在以下方面:

    函数体内的this的指向始终是指向定义它所在的对象,而不会指向调用它的对象,我们知道es5中的函数是谁执行它,它就指向谁。

    如下:

    var f = v = > v;
    //等同于
    var f = function(v){
          return v;
    }
    var sum = (num1,num2) => num1+num2 ;
    //等同于
    var sum = function(num1,num2){
          return num1+num2
    }
    [1,2,3].map(function (x) {
          return x * x;
    });
    // 箭头函数写法
    [1,2,3].map(x => x * x);//简洁了许多

    从例子我们可以看出,省略了function,花括号‘{}’用‘=>’代替了。这种写法更简洁了。

    示例如下;

    //1、参数默认值 位置在所有形参的后面
        //es6之前的采取的默认值只能变相采取
        function test(a,b) {
            a=a||2;
            b=b||2;
            return a*b
        }
        console.log(test());
    //但是这个有弊端  当我们传递的值为0的时候,还是会走默认值。改造之后
        function test1(a,b) {
            a=typeof a==="undefined"?2:a;
            b=typeof b==="undefined"?2:b;
            return a*b
        }
        console.log(test1(0,0))
    //    es6为我们提供了默认值
    //    语法糖:  function(a,b=2){}
         let test2=(a=2,b=2) =>{
            return a*b
        };
        console.log(test2());

    输出结果:

    16.png

    【相关推荐:javascript视频教程web前端

    以上就是es6箭头函数是什么意思的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:es6
    上一篇:es5和es6的继承有什么区别 下一篇:es6中什么是暂时性死区
    Web大前端开发直播班

    相关文章推荐

    • es6深度拷贝的几种实现方法是什么• es2017是es6吗• es6箭头函数要注意什么• es6中什么是装饰器• typescript跟es6有什么区别

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网