如何使用ES6的default export和named export进行模块导出？

在ES6中，我们可以使用default export和named export来导出模块。这两种导出方式在功能上有所区别，但都可以帮助我们有效地组织和重用代码。

使用default export进行模块导出

使用default export时，我们可以将一个模块中的默认导出与其他导出分开。默认导出可以是任何类型，包括函数、类、对象等。

// 导出一个默认的函数
export default function add(a, b) {
    return a + b;
}

// 导出一个默认的类
export default class Person {
    constructor(name) {
        this.name = name;
    }
}

// 导出一个默认的对象
export default {
    name: 'Tom',
    age: 18
};

当我们在其他模块中导入默认导出时，可以自由命名导入的变量名。

// 导入默认导出的函数
import add from './math';

console.log(add(1, 2)); // 输出3

// 导入默认导出的类
import Person from './person';

const person = new Person('Tom');
console.log(person.name); // 输出'Tom'

// 导入默认导出的对象
import obj from './data';

console.log(obj.name); // 输出'Tom'
console.log(obj.age); // 输出18

使用named export进行模块导出

使用named export时，我们可以将一个模块中的多个导出分别命名，并在其他模块中按需导入。

// 导出多个函数
export function add(a, b) {
    return a + b;
}

export function subtract(a, b) {
    return a - b;
}

// 导出多个变量
export const pi = 3.1415926;
export const e = 2.71828;

当我们在其他模块中导入named export时，需要使用相应的导入语法。

// 导入指定的函数
import { add, subtract } from './math';

console.log(add(1, 2)); // 输出3
console.log(subtract(3, 1)); // 输出2

// 导入指定的变量
import { pi, e } from './constants';

console.log(pi); // 输出3.1415926
console.log(e); // 输出2.71828

通过使用default export和named export，我们可以更好地组织和重用代码，提高开发效率。

本文为翻滚的胖子原创文章,转载无需和我联系,但请注明来自猿教程iskeys.com

• 上一篇： ES6中的模块动态导入如何实现按需加载？
• 下一篇： ES6中的模块循环引用如何处理？