ES6命名和默认导出之间的可变差异 [英] Mutable difference between ES6 named and default exports

问题描述

从ES6模块导入/导出数据时，在命名的导入和导出之间，该数据的可变性似乎有所不同.是出于某种原因，还是我不了解的一些根本差异?

When importing/exporting data from ES6 modules, mutability of that data appears to be different between named imports and exports. Is there a reason for this or some fundamental difference I'm not understanding?

// counter.js
export let count = 0;

export const incrementCount = () => count += 1;

export default count;

// main-default.js
import count, { incrementCount } from './counter';

console.log(count); // 0

incrementCount();
incrementCount();

console.log(count); // 0

// main-named.js
import { count, incrementCount } from './counter';

console.log(count); // 0

incrementCount();
incrementCount();

console.log(count); // 2

在两种情况下，我都希望 count 增加.但是，只有在使用命名的导出时，这种情况才会发生.

In both scenarios, I would expect count to increment. However, this only happens when using named exports.

推荐答案

这是因为count是数字而不是对象.通过导入默认值，您可以将count的值分配给新变量.通过命名导入，您具有对象的只读副本.考虑一下:

It is because count is number not object. By importing default you are assigning value of count to new variable. By named import you have readonly copy like object. Consider this:

// counter.js
export let count = {a:0};
export const incrementCount = () => count.a += 1;
export default (function(){ return count.a})();

运行时:

// main-default.js
import countdefault, { count, incrementCount } from './counter.mjs';
console.log(countdefault, count);
incrementCount();
incrementCount();
console.log(countdefault, count);

您得到:

0 {a:0}

0 {a:2}

但是当您将计数器导出更改为对象时:

but when you change counter export to object:

// counter.js
export let count = {a:0};
export const incrementCount = () => count.a += 1;
export default (function(){ return count})();

您得到:

{a:0} {a:0}

{ a: 0 } { a: 0 }

{a:2} {a:2}

{ a: 2 } { a: 2 }

这篇关于ES6命名和默认导出之间的可变差异的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！