JavaScript导入导出功能详解

JEERY
542 阅读6分钟

JavaScript中的导入和导出功能是模块化编程的重要组成部分，它允许开发者将代码分割成多个文件，以便更好地组织和管理代码。在本文中，我们将详细介绍JavaScript中的导入和导出功能。

一、导出

在JavaScript中，我们可以使用export关键字将一个或多个变量、函数或类导出到其他文件中。

例如，我们可以将以下代码保存在一个名为“module.js”的文件中：

export const PI = 3.14; 

export function square(x) { 
    return x * x; 
} 

export class Circle { 
    constructor(radius) { 
        this.radius = radius; 
    } 
    getArea() { 
        return PI * this.radius * this.radius; 
    } 
}

在这个例子中，我们导出了一个常量PI、一个函数square和一个类Circle。这些导出可以在其他文件中使用。

二、导入

在JavaScript中，我们可以使用import关键字从其他文件中导入变量、函数或类。

例如，我们可以将以下代码保存在一个名为“main.js”的文件中：

import { PI, square, Circle } from './module.js'; 

console.log(PI); // 3.14 
console.log(square(5)); // 25 

const circle = new Circle(10); 
console.log(circle.getArea()); // 314

在这个例子中，我们从“module.js”文件中导入了常量PI、函数square和类Circle，并在“main.js”文件中使用它们。

三、默认导出

除了导出多个变量、函数或类之外，我们还可以使用export default关键字导出一个默认值。

例如，我们可以将以下代码保存在一个名为“module.js”的文件中：

const PI = 3.14; 

function square(x) { 
    return x * x; 
} 

class Circle { 
    constructor(radius) { 
        this.radius = radius; 
    } 
    getArea() { 
        return PI * this.radius * this.radius; 
    } 
} 

export default Circle;

在这个例子中，我们默认导出了类Circle。在其他文件中，我们可以使用import关键字导入默认导出的值，如下所示：

import Circle from './module.js'; 

const circle = new Circle(10); 
console.log(circle.getArea()); // 314

在这个例子中，我们从“module.js”文件中导入了默认导出的类Circle，并在“main.js”文件中使用它。

四、导入所有导出

如果我们想要导入一个文件中的所有导出，可以使用*关键字。

例如，我们可以将以下代码保存在一个名为“module.js”的文件中：

export const PI = 3.14; 

export function square(x) { 
    return x * x; 
} 

export class Circle { 
    constructor(radius) { 
        this.radius = radius; 
    } 
    getArea() { 
        return PI * this.radius * this.radius; 
    } 
}

在这个例子中，我们导出了常量PI、函数square和类Circle。在其他文件中，我们可以使用以下代码导入所有导出：

import * as module from './module.js'; 

console.log(module.PI); // 3.14 
console.log(module.square(5)); // 25 

const circle = new module.Circle(10); 
console.log(circle.getArea()); // 314

在这个例子中，我们使用*关键字导入了“module.js”文件中的所有导出，并将它们保存在一个名为“module”的对象中。我们可以使用这个对象来访问导出的值。

五、import深入理解与使用

它的基本语法如下：

import defaultExport from "module-name"; 
import * as name from "module-name"; 
import { export1 } from "module-name"; 
import { export1 as alias1 } from "module-name"; 
import { export1 , export2 } from "module-name"; 
import { export1 , export2 as alias2 , [...] } from "module-name"; 
import defaultExport, { export1 [ , [...] ] } from "module-name"; 
import defaultExport, * as name from "module-name";

其中，defaultExport表示默认导出的内容，name表示导入的模块的名称，export1表示导入的具体内容，alias1表示导入的具体内容的别名。

下面是一些具体的用法解析：

5.1 导入默认内容

import myModule from "my-module";

这个语句导入了my-module模块的默认导出内容，并将其赋值给myModule变量。

5.2 导入所有内容

import * as myModule from "my-module";

这个语句导入了my-module模块的所有导出内容，并将其赋值给myModule变量。

5.3 导入具体内容

import { myFunction } from "my-module";

这个语句导入了my-module模块中的myFunction函数，并将其赋值给myFunction变量。

5.4 导入具体内容并重命名

import { myFunction as myFunc } from "my-module";

这个语句导入了my-module模块中的myFunction函数，并将其赋值给myFunc变量。

5.5 导入多个具体内容

import { myFunction1, myFunction2 } from "my-module";

这个语句导入了my-module模块中的myFunction1和myFunction2函数，并将它们分别赋值给myFunction1和myFunction2变量。

5.6 导入多个具体内容并重命名

import { myFunction1 as myFunc1, myFunction2 as myFunc2 } from "my-module";

这个语句导入了my-module模块中的myFunction1和myFunction2函数，并将它们分别赋值给myFunc1和myFunc2变量。

5.7 导入默认内容和具体内容

import myModule, { myFunction } from "my-module";

这个语句导入了my-module模块的默认导出内容和myFunction函数，并将它们分别赋值给myModule和myFunction变量。

5.8 导入默认内容和所有内容

import myModule, * as myModuleAll from "my-module";

这个语句导入了my-module模块的默认导出内容和所有导出内容，并将它们分别赋值给myModule和myModuleAll变量。

需要注意的是，import语句只能在模块的顶层使用，不能在函数或代码块中使用。

另外，import语句是静态的，也就是说它不能在运行时动态生成。

六、export深入理解与使用

JavaScript中的export关键字用于将模块中的变量、函数或类公开给其他模块使用。它可以在模块中的任何位置使用，并且可以导出多个变量、函数或类。

export有两种语法形式：命名导出和默认导出。

6.1 命名导出

命名导出允许我们将多个变量、函数或类作为一个对象导出。例如：

// module.js 

export const name = 'John'; 

export function sayHello() { 
    console.log('Hello!'); 
} 

export class Person { 
    constructor(name) { 
        this.name = name; 
    } 
}

在另一个模块中，我们可以使用import关键字来导入这些变量、函数或类：

// app.js 

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

console.log(name); // 'John' 
sayHello(); // 'Hello!' 

const person = new Person('Mike'); 
console.log(person.name); // 'Mike'

6.2 默认导出

默认导出允许我们将一个变量、函数或类作为默认导出。例如：

// module.js 

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

在另一个模块中，我们可以使用import关键字来导入默认导出：

// app.js 
import sayHello from './module.js'; 

sayHello(); // 'Hello!'

注意：一个模块只能有一个默认导出，但可以有多个命名导出。

如果我们想要导出一个对象作为默认导出，可以使用对象字面量：

// module.js 
const person = { 
    name: 'John', 
    age: 30 
}; 

export default person;

在另一个模块中，我们可以使用import关键字来导入默认导出：

// app.js 

import person from './module.js'; 

console.log(person.name); // 'John' 
console.log(person.age); // 30

七、总结

JavaScript中的导入和导出功能是模块化编程的重要组成部分，它允许开发者将代码分割成多个文件，以便更好地组织和管理代码。我们可以使用export关键字将一个或多个变量、函数或类导出到其他文件中，使用import关键字从其他文件中导入变量、函数或类。除了导出多个变量、函数或类之外，我们还可以使用export default关键字导出一个默认值。如果我们想要导入一个文件中的所有导出，可以使用*关键字。

avatar
文章
阅读
粉丝