JavaScript ES6中的export const与export let的区别

207

假设我有一个要导出的变量,那么下面两种方式有什么区别:

export const a = 1;

对抗

export let a = 1;

我了解 constlet 的区别,但是当你导出它们时,有什么不同呢?


export 关键字的详细信息请参见此处。目前,它在任何 Web 浏览器中都没有本地支持。 - RBT
2个回答

346
在ES6中,import是对导出值的实时只读视图。因此,当你执行import a from "somemodule";时,无论你在模块中如何声明a,都不能将其赋值。
然而,由于导入的变量是实时视图,它们会根据导出的变量在exports中的“原始”值而发生变化。考虑以下代码(摘自下面的参考文章):
//------ 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
总结:
  • 无论您如何在模块中声明相应的变量,都不能将其分配给已导入的变量。
  • 传统的 let vs. const 语义适用于模块中声明的变量。
    • 如果变量被声明为 const,则无法在任何地方重新分配或重新绑定。
    • 如果变量被声明为 let,则只能在模块中重新分配(而非用户)。如果更改了它,则 import 的变量会相应更改。
参考: http://exploringjs.com/es6/ch_modules.html#leanpub-auto-in-es6-imports-are-live-read-only-views-on-exported-values

相关 https://dev59.com/zHwQtIcB2Jgan1znN2TT - Thomas

2

我认为一旦导入,其行为与源文件外部使用变量的地方相同。

唯一的区别是如果您在此文件结束之前尝试重新分配它。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接