在 ES6 中声明一个函数？

Question

我想 "update" 我的 javascript 代码符合新的 ES6 标准，所以我研究了函数现在是如何编写的，并在我的全局函数上进行了尝试，它是这样写的在 "old" es5

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

如果我没记错的话，ES6 的 "transformation" 应该是这样的：

logMessage = message => {
    etc
}

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

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

感谢您的帮助！

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

Answer 1

now if I'm not wrong the correct "transformation" to es6 would be like this

你错了。

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

But my ESLint tells me that my logMessage is not defined and I get an error in my console, do I miss something? Do I have to declare var, let or const before the logMessage?

是的。您正在为变量分配一些东西。 You must declare the variable first。

I also want to export this function from file One to file Two

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

Answer 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
}

在 ES6 中声明一个函数？

Declaring a function in ES6?

javascript

function

ecmascript-6

arrow-functions