js export 怎么用

在JavaScript中，export 关键字用于导出函数、对象或原始值，以便其他模块可以使用这些导出的内容。export 关键字使代码模块化、易于维护和重用。 主要有两种形式的导出：命名导出和默认导出。命名导出允许你在一个模块中导出多个值，而默认导出则允许你导出一个默认的值。

一、命名导出

命名导出允许我们导出多个变量、函数或类。每个导出的内容都需要明确的名字，可以使用大括号在导入时引用。

1、如何使用命名导出

命名导出可以通过两种方式实现：在声明时导出和在声明后导出。

在声明时导出

// math.js
export const PI = 3.14;
export function add(a, b) {
  return a + b;
}
export class Circle {
  constructor(radius) {
    this.radius = radius;
  }
}

在声明后导出

// math.js
const PI = 3.14;
function add(a, b) {
  return a + b;
}
class Circle {
  constructor(radius) {
    this.radius = radius;
  }
}
export { PI, add, Circle };

2、导入命名导出

// main.js
import { PI, add, Circle } from './math.js';
console.log(PI); // 3.14
console.log(add(2, 3)); // 5
const myCircle = new Circle(5);
console.log(myCircle.radius); // 5

二、默认导出

默认导出允许你导出单个值。它可以是变量、函数、类等。每个模块只能有一个默认导出。

1、如何使用默认导出

默认导出函数

// greet.js
export default function greet(name) {
  return `Hello, ${name}!`;
}

默认导出类

// person.js
export default class Person {
  constructor(name) {
    this.name = name;
  }
}

2、导入默认导出

// main.js
import greet from './greet.js';
console.log(greet('World')); // Hello, World!
import Person from './person.js';
const john = new Person('John');
console.log(john.name); // John

三、命名导出与默认导出结合使用

有时你可能需要同时使用命名导出和默认导出。在这种情况下，可以在一个模块中混合使用这两种导出方式。

1、结合使用的例子

// library.js
export const PI = 3.14;
export function square(x) {
  return x * x;
}
export default function cube(x) {
  return x * x * x;
}

2、导入结合使用的例子

// main.js
import cube, { PI, square } from './library.js';
console.log(PI); // 3.14
console.log(square(3)); // 9
console.log(cube(3)); // 27

四、重新导出

有时你可能需要从一个模块中重新导出内容，以便在其他模块中使用。这可以通过export ... from语法实现。

1、如何重新导出

// constants.js
export const PI = 3.14;
export const E = 2.71;
// mathUtils.js
export * from './constants.js';
export function add(a, b) {
  return a + b;
}

2、导入重新导出内容

// main.js
import { PI, E, add } from './mathUtils.js';
console.log(PI); // 3.14
console.log(E); // 2.71
console.log(add(2, 3)); // 5

五、总结

在JavaScript中，使用export关键字可以使代码模块化，方便进行维护和重用。命名导出允许我们导出多个值，而默认导出则适用于导出单个主要值。通过重新导出，可以更好地组织和管理代码。无论是小型项目还是大型应用，合理使用导出机制都是提升代码质量的重要手段。