ES2021 中默认导出模块 - export default，实现模块的独立性管理！-JavaScript中文网-JavaScript教程资源分享门户

ES2021是Javascript进化的最新版本，其中新增的默认导出模块 - export default，可以让前端开发者更好地实现模块的独立性管理。这篇文章将带你深入了解export default的用法和示例代码，相信能够帮助你更好地提高前端开发技能。

export default的概念

export default是ES6中新增的一个导出模块的语法，使用它可以实现将一个值作为一个模块导出，并且该值可以在导入该模块时命名。export default语法可以与import语法进行配合使用，方便了前端开发者对模块的管理。

export default语法的基本格式如下：

export default value;

其中，value是需要导出的值，可以是一个对象、函数、变量等等。

在ES6之前，导出模块主要使用以下两种方式：

export const name = 'John';

export default function() {
  console.log('I am a function!');
}

在ES6之后，除了以上两种导出模块的方式，我们还可以使用export default来定义默认导出的模块。默认导出模块在代码中只能出现一次，且使用该模块时不需要命名，而命名导出模块可以出现多次，且需要命名。

const name = 'John';
export default name;

以上代码中的name变量会被导出为默认模块，并且可以通过以下方式引入模块：

import name from './example.js';
console.log(name); // 'John'

const person = {
  name: 'John',
  age: 25
};
export default person;

以上代码中的person对象会被导出为默认模块，并且可以通过以下方式引入模块：

import person from './example.js';
console.log(person.name); // 'John'
console.log(person.age); // 25

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

以上代码中的sayHello函数会被导出为默认模块，并且可以通过以下方式引入模块：

import sayHello from './example.js';
sayHello('John'); // 'Hello, John!'

export default是ES6中新增的导出模块语法，可以方便我们对模块进行独立性管理。本文详细介绍了export default的概念、用法以及示例代码，相信对于前端开发者有着很高的学习和指导意义。有了这种导出模块语法的支持，我们能够更好地实现代码的组织和管理，从而提高代码开发效率。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65b065a1add4f0e0ff9c07fd