在 ES6 模块化中,我们可以使用 export 和 import 语句来导出和导入模块中的变量、函数、类等。在使用 export 语句时,有两种不同的语法形式:export 和 export default。它们之间的区别如下:

  1. export 语句可以导出多个变量、函数或类,而 export default 语句只能导出一个默认的变量、函数或类。

例如,我们可以使用以下代码导出多个变量:Copy

// module.js

export const name = 'John';
export const age = 30;

在另一个模块中,我们可以使用以下代码导入这些变量:Copy

// app.js

import { name, age } from './module.js';

console.log(name); // 输出:John
console.log(age); // 输出:30

而如果我们使用 export default 语句,则只能导出一个默认的变量:Copy

// module.js

const name = 'John';
export default name;

在另一个模块中,我们可以使用以下代码导入这个变量:Copy

// app.js

import name from './module.js';

console.log(name); // 输出:John
  1. 在使用 import 语句导入模块时,可以省略 export default 语句中的变量名,而不能省略 export 语句中的变量名。

例如,我们可以使用以下代码导出一个默认的函数:Copy

// module.js

export default function() { 
  console.log('Hello World');
}

在另一个模块中,我们可以使用以下代码导入该函数:Copy

// app.js

import sayHello from './module.js';

sayHello(); // 输出:Hello World

在这个例子中,我们可以省略函数名称,因为该函数是一个默认的导出,而在 export 语句中,我们必须指定要导出的变量、函数或类的名称,否则无法正确导入。

总之,export 语句用于导出多个变量、函数或类,而 export default 语句用于导出一个默认的变量、函数或类。在导入模块时,可以省略 export default 语句中的变量名,但不能省略 export 语句中的变量名。

By lxcss

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注