JavaScript ES6中export、import与export default的用法和区别

当我们在用JavaScript编写模块化代码时，我们会经常用到export、import和export default等关键字。下面我们来介绍它们的用法及区别。

export

export关键字用于将一个或多个模块内的变量、函数、类等暴露给外部使用。它通常被写在一个模块的底部，用法如下：

// module.js

export const name = 'Tom';
export function sayHello() {
  console.log('Hello!');
}

这个例子中，我们将name和sayHello两个变量和方法使用export暴露出来，这样其他模块就可以使用这些变量和方法了。

使用export时，我们可以一次性暴露出多个变量和方法，也可以每次只暴露出其中一个。注意，使用export暴露出的变量和方法需要使用相应的名称进行引用。

import

import关键字用于将其他模块里的变量、函数、类等引入到当前模块中使用。使用import的语法如下：

// app.js

import { name, sayHello } from './module.js';
console.log(name);
sayHello();

这个例子中，我们使用import引入了module.js中的name和sayHello变量和方法，并在app.js中使用它们。

使用import时，我们需要提前声明要引入的变量和方法，并指定来自哪个模块。可以通过相对路径或绝对路径指定模块的位置。

export default

export default用于默认导出一个值，一个模块可以有多个普通的export，但只能有一个export default。export default语法如下：

// module.js

const name = 'Tom';
function sayHello() {
  console.log('Hello!');
}
export default {
  name,
  sayHello
}

这个例子中，我们将一个对象作为模块的默认导出。

使用export default时，我们可以直接导出一个值，而不需要指定名称，因此对于导入者来说，可以使用任意名称引用该模块的默认导出值。

// app.js

import myModule from './module.js';
console.log(myModule.name);
myModule.sayHello();

这个例子中，我们使用import引入了module.js中的默认导出，并在app.js中使用它。

区别

在使用export和export default时，我们需要注意它们之间的区别：

• export可以暴露多个变量和方法，而且需要使用相应的名称引入；export default只能默认导出一个值，不需要指定名称
• 在引入使用export导出的变量和方法时，需要加上花括号{ }。而使用export default时，则可以自定义名称
• 一个模块中可以有多个export语句，但只能有一个export default
• 在使用import时，使用export导出的变量和方法需要指定相应的名称，而默认导出不需要指定名称。

下面两个示例分别演示了如何使用export和export default：

// multiExportModule.js

export const name = 'Tom';
export function sayHello() {
  console.log('Hello!');
}

// defaultExportModule.js

const name = 'Tom';
function sayHello() {
  console.log('Hello!');
}
export default {
  name,
  sayHello
}

在导入时的用法如下：

// multiExportApp.js

import { name, sayHello } from './multiExportModule.js';
console.log(name);
sayHello();

// defaultExportApp.js

import myModule from './defaultExportModule.js';
console.log(myModule.name);
myModule.sayHello();

通过以上攻略我们应该对JavaScript ES6中的export、import与export default的用法和区别有了很详细的了解。