在 ES6 中声明一个函数？

Posted 2023-02-22

【中文标题】在 ES6 中声明一个函数？

【英文标题】：Declaring a function in ES6?

【发布时间】：2017-03-11 02:26:42

【问题描述】：

我想将我的 javascript 代码“更新”到新的 ES6 标准，所以我查看了函数现在是如何编写的，并在我的全局函数上进行了尝试，它在“旧”es5 中看起来像这样

function logMessage(message) 
    document.getElementById("logs").innerhtml = document.getElementById("logs").innerHTML + `<li  class="item-padding">  $message </li>`

如果我没记错的话，正确的“转换”到 ES6 应该是这样的：

logMessage = message => 
    etc

但是我的 ESLint 告诉我我的 logMessage 没有定义，我在控制台中收到错误，我错过了什么吗？我是否必须在 logMessage 之前声明 var、let 或 const？

我不知道它是否重要，但我也想将这个函数从文件一导出到文件二，并在文件二的另一个函数中使用函数 logMessage，这样做时我需要记住什么?

感谢您的帮助！

编辑：感谢大家的回答对我帮助很大，解决了我的问题！

【问题讨论】：

我觉得这两个不太一样：第一个是函数声明，第二个是赋值给变量的函数表达式

相关：Arrow function vs function declaration / expressions: Are they equivalent / exchangeable?

【参考方案1】：

如果我没记错的话，到 es6 的正确“转换”应该是这样的

你错了。

Arrow functions 是一种具有不同行为的新语法。它们不是直接替代函数声明和函数表达式（两者在 ES6 中仍然存在）。

但是我的 ESLint 告诉我我的 logMessage 没有定义，我在控制台中收到错误，我错过了什么吗？我必须在 logMessage 之前声明 var、let 或 const 吗？

是的。您正在将某些内容分配给变量。 You must declare the variable first。

我也想把这个函数从文件一导出到文件二

如何定义函数与导出它的能力无关。

【讨论】：

我认为我的“答案”更像是一个示例，更适合您的答案：const logMessage = (message) => // code 可以。

() 是可选的，带有一个简单的参数

@JaromandaX 非常正确，尽管我更喜欢在此类情况下使用它们以提高可读性。 （SE 上的错误颜色编码 (:!)

【参考方案2】：

function logMessage(message) 
    // etc...

... 是在 es6 中仍然完全有效的函数声明。您正在将函数声明转换为函数表达式，在 es5 中看起来像这样...

logMessage = function(message) 
    // etc...

...然后进入es6 ...

logMessage = message => 
    // etc

...所以 linting 问题不是由 es6 语法引入的，而是使用函数表达式，分配给没有 var/let/const 的变量是全局变量。原来的函数声明会被提升也有区别，但函数表达式形式必须在调用之前声明。还有一个区别是 es6 箭头函数从父作用域中保留了 this 的上下文，所以值得注意的是它们不是 100% 直接的 1 对 1 的相互映射。

简短的回答，是的，变量需要用var/let/const 声明，以避免成为全局变量，无论它是否是函数。

let logMessage = message => 
    // etc

【讨论】：

您能否在声明函数时使用let 而非const 进行详细说明？我想说一个函数应该是不可变的吧？

@Roberrrt 一个函数一旦声明仍然可以被操作，所以它是可变的。毕竟，它是一个对象。 const 关键字只是防止它被进一步向下重新分配。我不认为 Billy Moon 是在“倡导”let 而不是 const，这只是他碰巧使用的声明关键字，所以它是为了说明目的，而不是“这是你必须这样做的方式”。跨度>

@vlaz 我自己一直在使用const，到目前为止还没有遇到任何问题，但是将它分配给let 时可能会有一些魔法，非常感谢不过为了信息！

@Roberrrt 好吧，const 不会有“问题”。除非你定义一个函数const func = x => x *2，否则如果你尝试做func = x => x +2——那会抛出一个TypeError。但是，您仍然可以执行 func.toString = () => "this is awesome" 之类的操作，这将 更改 函数 - 它不是一成不变的，但这并不是 const 的真正作用 - 它只能防止重新分配。因此，这可能导致的唯一问题是阻止您覆盖变量。无论如何，您通常很少会想要使用函数来执行此操作，因此通常没问题。