跳至主要內容

21日


21日

export default functionexport function

在 JavaScript 中,export default functionexport function 有着一些区别。

  1. export default function

    • 使用 export default 语法时,你可以为一个模块指定默认导出。这意味着当其他文件导入该模块时,不需要使用大括号 {} 来指定要导入的内容,而是直接使用导入的变量名即可。
    • 一个模块只能有一个默认导出。
    javascriptCopy code// 模块 A
    export default function add(a, b) {
        return a + b;
    }
    
    // 模块 B
    import add from './moduleA';
    console.log(add(1, 2)); // 输出 3
    
  2. export function

    • 使用 export 语法时,你可以导出模块中的任何函数、变量或对象。
    • 导出的内容需要使用大括号 {} 来指定要导入的内容,除非使用 * 语法。
    javascriptCopy code// 模块 A
    export function add(a, b) {
        return a + b;
    }
    
    // 模块 B
    import { add } from './moduleA';
    console.log(add(1, 2)); // 输出 3
    

总结来说,export default 主要用于导出模块中的一个主要功能,而 export 则用于导出模块中的多个功能,或者用于导出一个对象中的多个属性和方法。

* 语法

在 JavaScript 中,* 语法通常与 export 结合使用,用于导出模块中的所有内容。这种语法被称为命名空间导出或命名导出。

当一个模块中有多个函数、变量或对象需要导出时,使用 * 语法可以方便地将它们一次性导出,而不需要一个个列举它们。

下面是一个示例:

javascriptCopy code// 模块 A
export function add(a, b) {
    return a + b;
}

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

export const pi = 3.14159;

如果我们想要在另一个文件中导入模块 A 中的所有内容,可以使用 * 语法:

javascriptCopy code// 模块 B
import * as moduleA from './moduleA';

console.log(moduleA.add(5, 3)); // 输出 8
console.log(moduleA.subtract(5, 3)); // 输出 2
console.log(moduleA.pi); // 输出 3.14159

在这个示例中,import * as moduleA 语句将模块 A 中所有的导出内容捆绑在一个名为 moduleA 的对象上。这样,我们就可以通过 moduleA 对象来访问模块 A 中的所有导出内容,而不需要逐个导入。

上次编辑于:
你认为这篇文章怎么样?
  • 0
  • 0
  • 0
  • 0
  • 0
  • 0
评论
  • 按正序
  • 按倒序
  • 按热度