为了账号安全,请及时绑定邮箱和手机立即绑定

请问babel怎么编译箭头函数?

/ 猿问

请问babel怎么编译箭头函数?

慕尼黑8549860 2019-07-17 15:11:58

babel怎么编译箭头函数


查看完整描述

4 回答

?
湖上湖

gulp 脚本中能不能使用箭头函数取决于其运行环境,即 Node 的版本号。不过目前的版本应该都支持 ES6 语法。
gulp 本身不具备编译 JS 的能力,肯定是通过第三方插件来编译的,那么要看你用的什么插件以及什么配置来编译。
既然 webpack 直接可编译,那么使用 gulp 调用 webpack 来编译就不应该出问题的。光从你提供的信息来看,目前也就只能这么回答了。

查看完整回答
反对 回复 2019-07-28
?
jeck猫

babel-preset-2015
打开babel-preset2015插件一看,一共20个插件。熟悉es2015语法的同志一看,多多少少能从字面意思知道某个插件是用于哪种语法的转换
babel-plugin-transform-es2015-template-literals => es2015模板
babel-plugin-transform-es2015-literals
babel-plugin-transform-es2015-function-name => 函数name属性
babel-plugin-transform-es2015-arrow-functions => 箭头函数
babel-plugin-transform-es2015-block-scoped-functions => 函数块级作用域
babel-plugin-transform-es2015-classes => class类
babel-plugin-transform-es2015-object-super => super提供了调用prototype的方式
babel-plugin-transform-es2015-shorthand-properties => 对象属性的快捷定义,如obj = { x, y }
babel-plugin-transform-es2015-computed-properties => 对象中括号属性,如obj = {['x]: 1}
babel-plugin-transform-es2015-for-of => 对象for of遍历
babel-plugin-transform-es2015-sticky-regex
babel-plugin-transform-es2015-unicode-regex
babel-plugin-check-es2015-constants => const常量
babel-plugin-transform-es2015-spread => 对象扩展运算符属性,如...foobar
babel-plugin-transform-es2015-parameters => 函数参数默认值及扩展运算符
babel-plugin-transform-es2015-destructuring => 赋值解构
babel-plugin-transform-es2015-block-scoping => let和const块级作用域
babel-plugin-transform-es2015-typeof-symbol => symbol特性
babel-plugin-transform-es2015-modules-commonjs => commonjs模块加载
babel-plugin-transform-regenerator => generator特性



查看完整回答
反对 回复 2019-07-28
?
慕妹3242003

(1)函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。
(2)不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误。
(3)不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用Rest参数代替。
(4)不可以使用yield命令,因此箭头函数不能用作Generator函数。
上面四点中,第一点尤其值得注意。this对象的指向是可变的,但是在箭头函数中,它是固定的。
function foo() {

查看完整回答
反对 回复 2019-07-28
?
繁星coding
  1. 提高开发效率,减少体力耀东

    使用剪头函数不需要敲完整的 function 关键字, 同时如果只有行 return 语句的函数,还可以进一步简写:

    例如 要定义一个 trim 函数,不使用箭头函数:

        const trim = function( str ) {

            return trim.replace( /^\s+|\s+$/g, '' );

        };

        使用箭头函数:

        const trim = str => trim.replace(  /^\s+|\s+$/g, '' ); 


2. 在函数内部不需要自己的 this 指针的时候,非常方便,因为箭头函数作用域内没有 this

    例如下面不使用箭头函数的代码, 要通过将 this 赋值给 me,调用 me 来调用 Obj:

    const Obj = {

        text : 'ABC',

        replace : function( arr ) {

            var me = this;

            arr.forEach( function( item ) {

                return me.text;

            } );

        }

    };

    使用箭头函数:

    const Obj = {

        text : 'ABC',

        replace : function( arr ) {

            arr.forEach( item => this.text );

        }

    };



3. 还有一点是 箭头函数没有 arguments 变量,在某些时候也可以带来方便,和上面差不多。

        



查看完整回答
反对 回复 2019-07-28

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信