当前位置: 首页 > 面试题库 >

如何在ES2015中编写命名箭头功能?

轩辕鸿
2023-03-14
问题内容

我有一个函数要转换为 ES6中 的新箭头语法。它是一个命名函数:

function sayHello(name) {
    console.log(name + ' says hello');
}

有没有办法在不使用var语句的情况下为其命名:

var sayHello = (name) => {
    console.log(name + ' says hello');
}

显然,我只能在定义此功能后使用它。如下所示:

sayHello = (name) => {
        console.log(name + ' says hello');
    }

ES6中 是否有新方法可以做到这一点?


问题答案:

如何在ES2015中编写命名箭头功能?

您可以按照在问题中排除的方式进行操作:将其放在赋值或属性初始化程序的右侧,在该赋值或属性初始化程序中,JavaScript引擎可以合理地将变量或属性名称用作名称。没有
其他 方法可以执行此操作,但是这样做是正确的,并且在规范中已完全涵盖。

根据规范,此函数的真实名称为sayHello

var sayHello = name => {
    console.log(name + ' says hello');
};

这在“ _赋值运算符” >“运行时语义:评估”_中定义,在其中调用抽象SetFunctionName操作(该调用当前在步骤1.e.iii中)。

类似地,运行时语义:PropertyDefinitionEvaluation调用SetFunctionName,因此为该函数提供了真实的名称:

let o = {
    sayHello: name => {
        console.log(`${name} says hello`);
    }
};

现代引擎已经为类似的语句设置了函数的内部名称。Edge仍然具有在name运行时标志后面的功能实例上使其可用的功能。

例如,在Chrome或Firefox中,打开Web控制台,然后运行以下代码段:

"use strict";

let foo = () => { throw new Error(); };

console.log("foo.name is: " + foo.name);

try {

  foo();

} catch (e) {

  console.log(e.stack);

}

在Chrome 51及更高版本和Firefox 53及更高版本(以及带有实验性标记的Edge 13及更高版本)上,运行该代码时,您会看到:

foo.name是:foo
错误
    在foo(http://stacksnippets.net/js:14:23)
    在http://stacksnippets.net/js:17:3

注意foo.name is: fooError...at foo

在Chrome 50和更早的版本,Firefox
52和更早的版本以及没有实验标记的Edge上,您会看到它,因为它们还没有此Function#name属性:

foo.name是: 
错误
    在foo(http://stacksnippets.net/js:14:23)
    在http://stacksnippets.net/js:17:3

需要注意的是名字是从丢失foo.name is:,但它 在堆栈跟踪中。只是,实际上在功能上实现name 属性的优先级低于某些其他ES2015功能;Chrome和Firefox现在拥有它;Edge将其放在标志后面,大概不会再停留在标志后面了。

显然,我只能在定义此功能后使用它

正确。没有箭头函数的函数 声明 语法,只有函数 表达式 语法,并且没有等效于旧式命名函数表达式(var f = function foo() {};)中名称的箭头。因此,它不等于:

console.log(function fact(n) {

    if (n < 0) {

        throw new Error("Not defined for negative numbers");

    }

    return n == 0 ? 1 : n * fact(n - 1);

}(5)); // 120

您必须将其分为两个表达式 (我认为您 仍然 应该这样做)

let fact = n => {

    if (n < 0) {

      throw new Error("Not defined for negative numbers.");

    }

    return n == 0 ? 1 : n * fact(n - 1);

};

console.log(fact(5));

当然,如果 必须 将其放在需要单个表达式的地方,则始终可以…使用箭头函数:

console.log((() => {

    let fact = n => {

        if (n < 0) {

            throw new Error("Not defined for negative numbers.");

        }

        return n == 0 ? 1 : n * fact(n - 1);

    };

    return fact(5);

})()); // 120

我并不是说那很漂亮,但是如果您绝对需要一个单独的表达式包装器,它就可以工作。



 类似资料:
  • 我有一个函数,我正在尝试转换为ES6中的新箭头语法。它是一个命名函数: 有没有办法给它一个没有var语句的名字: 显然,我只能在定义了这个函数之后才能使用它。大致如下: 在ES6中有没有一种新的方法可以做到这一点?

  • 问题内容: 我知道上面的箭头功能等效于: 但是我对以下内容有些困惑 为什么函数参数用大括号括起来,而函数主体仅用括号括起来? 问题答案: ES6的一些语法糖元素在这里起作用: 参数解构 :该函数实际上使用一个对象,但是在执行该函数之前,将其唯一的对象参数解构为三个变量。基本上,如果传递给函数的参数称为obj,则为onClick变量分配obj.onClick的值,并与其他命名的分解变量相同。 简洁的

  • 问题内容: 我刚接触Android,并且一直在研究Canvas。我正在尝试绘制箭头,但是在绘制轴时运气不好,没有一个箭头在起作用。 我进行了一些搜索,找到一个Java示例,但是Android没有or 。 现在,我的代码如下所示(箭头看上去完全不像箭头): 我查看了以下线程以获取指导: * http://www.java-forums.org/awt-swing/6241-how-u-rotate-

  • 问题内容: 我正在将ReactJS与Babel和Webpack一起使用,并使用ES6以及针对箭头功能的建议类字段。我知道箭头函数通过不重新创建每个呈现的函数(类似于构造函数中的绑定工作方式)来使事情更高效。但是,我不确定100%是否正确使用了它们。以下是我的代码在三个不同文件中的简化部分。 我的代码: Main.js SecondClass.js ThirdClass.js 题: 我上面的代码使用

  • 问题内容: 我正在将ReactJS与Babel和Webpack一起使用,并使用ES6以及针对箭头功能的建议类字段。我知道箭头函数通过不重新创建每个呈现的函数(类似于构造函数中的绑定工作方式)来使事情更高效。但是,我不确定100%是否正确使用了它们。以下是我的代码在三个不同文件中的简化部分。 我的代码: Main.js SecondClass.js ThirdClass.js 题: 我上面的代码使用

  • 目前,我有这个代码: 为了使其与代码库的其余部分保持一致,我想将其更改为箭头函数。我尝试了