web-dev-qa-db-ja.com

Javascript ES6エクスポート定数とエクスポートlet

エクスポートしたい変数があるとしましょう。違いは何ですか

export const a = 1;

vs

export let a = 1;

私はconstとletの違いを理解していますが、それらをエクスポートするときの違いは何ですか？

javascriptecmascript-6es6-modules
118
Cheng

ES6では、importname__sはエクスポート値に対するライブの読み取り専用ビューです。その結果、import a from "somemodule";を実行すると、モジュールでaname__をどのように宣言しても、aname__に代入することはできません。

ただし、インポートされた変数はライブビューであるため、エクスポート内の "raw"エクスポート変数に従って変化します。次のコードを検討してください（下記の参考記事から借用）。

//------ lib.js ------
export let counter = 3;
export function incCounter() {
    counter++;
}

//------ main1.js ------
import { counter, incCounter } from './lib';

// The imported value `counter` is live
console.log(counter); // 3
incCounter();
console.log(counter); // 4

// The imported value can’t be changed
counter++; // TypeError

ご覧のとおり、違いは本当にlib.jsではなくmain1.jsにあります。

要約すると：

  • モジュール内で対応する変数をどのように宣言しても、importname __ded変数に代入することはできません。
  • 伝統的なletname __- vs -constname__のセマンティクスは、モジュール内の宣言された変数に適用されます。
    • 変数がconstname__と宣言されている場合は、どこにでも再割り当てまたは再バインドすることはできません。
    • 変数がletname__と宣言されている場合は、モジュール内でのみ再割り当てできます（ユーザーではありません）。変更された場合、それに応じてimportname __ed変数も変更されます。

参照： http://exploringjs.com/es6/ch_modules.html#leanpub-auto-in-es6-imports-are-live-read-only-views-on-exported-values

199
FelisCatus

インポートした後の動作は同じです（変数がソースファイルの外部で使用される場所では）。

唯一の違いは、このファイルの終わりまでにそれを再割り当てしようとした場合です。

3
slomek