web-dev-qa-db-ja.com

ES6で関数を宣言しますか？

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を宣言する必要がありますか？

重要かどうかはわかりませんが、この関数をファイル1からファイル2にエクスポートし、ファイル2の別の関数で関数logMessageを使用したいのですが、そうするときに留意しなければならないことがありますか？

助けてくれてありがとう！

編集：回答は私にたくさん助けてくれてありがとう、私の問題を修正しました！

javascriptfunctionecmascript-6arrow-functions
16
NakedPython

今私が間違っていなければ、es6への正しい「変換」はこのようになります

あなたが間違っている。

矢印関数 は、異なる動作を持つ新しい構文です。これらは、not関数宣言と関数式（どちらもES6にまだ存在します）を完全に置き換えるものです。

しかし、私のESLintは、logMessageが定義されておらず、コンソールにエラーが表示されることを教えてくれます。 logMessageの前にvar、letまたはconstを宣言する必要がありますか？

はい。変数に何かを割り当てています。 変数を最初に宣言する必要があります 。

また、この関数をファイル1からファイル2にエクスポートしたい

関数の定義方法は、それをエクスポートする能力とは関係ありません。

20
Quentin
function logMessage(message) {
    // etc...
}

...は、es6でもまだ完全に有効な関数宣言です。関数宣言を関数式に変換していますが、es5では次のようになります...

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

...そしてes6に...

logMessage = message => {
    // etc
}

...したがって、lin6の問題はes6構文ではなく、関数式を使用して、var/let/constなしではグローバル変数である変数に割り当てられます。元の関数宣言が引き上げられることにも違いがありますが、関数式の形式は、呼び出す前に宣言する必要があります。また、es6矢印関数は親スコープからこのコンテキストを保持するという違いもあるため、100％直接の1対1のマッピングではないことに注意してください。

簡単に言えば、はい、グローバル変数にならないようにするには、変数が関数であるかどうかに関係なく、var/let/constで変数を宣言する必要があります。

let logMessage = message => {
    // etc
}
22
Billy Moon