ES6的导出和导入

在JavaScript ES6中,如果想要导入一个常量、函数、文件、模块等需要先在导入之前做导出的工作。导出的时候使用 export 或者 export default;导入的时候使用 import 或者 import {} 的方式。

导出:export 和 export default ;导入 import 和 import {}

在JavaScript ES6中,export与export default均可用于导出常量、函数、文件、模块等,你可以在其它文件或模块中通过 import + (常量 | 函数 | 文件 | 模块) 名的方式,将其导入,以便能够对其进行使用。

export 和 export default 的区别

1.在一个文件或模块中,export可以有多个,export default仅有一个;
2.通过export方式导出,在导入时要使用 import { } ,export default则不需要;
3. 输出的值数量有不同:
(1) 输出单个值,使用export default,
(2) 输出多个值,使用export,
(3) export default与普通的export不要同时使用,
4.export能直接导出变量表达式,export default不行。

使用 export 方式导出并使用 import{} 方式导入
//demo1 export方式
const Say = 'HelloWorld';
const Person = {
	name:Lbc,
	age:27
};


export Say;
export Person;
export var title = '他很帅'

导入的时候则要对应使用 import {} 的方式

//demo1 import {} 方式
import{Say,Person,title} from './demo1.js'
console.log(Person.name + '===' + Person.age)
console.log(title +'   '+ Say)
使用 export default 方式导出并使用 import 方式导入
//demo1 export default 方式
const Person = {
	name:Lbc,
	age:27
};

export default Person

导入的时候则要对应使用 import 的方式

//demo1 import方式
import Person from './demo2.js'
console.log(Person.name + '===' + Person.age)

注意:

1、export default 向外暴露的成员,可以使用任意变量来接收
2、在一个模块中,export default 只允许向外暴露一次
3、在一个模块中,可以同时使用export default 和export 向外暴露成员
4、使用export向外暴露的成员,只能使用{ }的形式来接收,这种形式,叫做【按需导出】
5、export可以向外暴露多个成员,同时,如果某些成员,在import导入时,不需要,可以不在{ }中定义
6、使用export导出的成员,必须严格按照导出时候的名称,来使用{ }按需接收
7、使用export导出的成员,如果想换个变量名称接收,可以使用as来起别名

在此特别感谢 @sleepwalker_1992

  • 4
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ES6 中的模块系统提供了导出导入功能,可以将一个模块中的变量、函数或类导出给其他模块使用,也可以从其他模块中导入需要的变量、函数或类。 单个导出: ```javascript // 导出一个变量 export const name = 'John'; // 导出一个函数 export function sayHello() { console.log('Hello'); } // 导出一个类 export class Person { constructor(name, age) { this.name = name; this.age = age; } } ``` 单个导入: ```javascript // 导入一个变量 import { name } from './module'; // 导入一个函数 import { sayHello } from './module'; // 导入一个类 import { Person } from './module'; ``` 多个导出: ```javascript // 导出多个变量 export const name = 'John'; export const age = 30; // 导出多个函数 export function sayHello() { console.log('Hello'); } export function sayBye() { console.log('Bye'); } // 导出多个类 export class Person { constructor(name, age) { this.name = name; this.age = age; } } export class Animal { constructor(type) { this.type = type; } } ``` 多个导入: ```javascript // 导入多个变量 import { name, age } from './module'; // 导入多个函数 import { sayHello, sayBye } from './module'; // 导入多个类 import { Person, Animal } from './module'; ``` 也可以使用 `*` 导入所有变量、函数或类: ```javascript // 导出多个变量 export const name = 'John'; export const age = 30; // 导出多个函数 export function sayHello() { console.log('Hello'); } export function sayBye() { console.log('Bye'); } // 导出多个类 export class Person { constructor(name, age) { this.name = name; this.age = age; } } export class Animal { constructor(type) { this.type = type; } } // 导入所有变量、函数或类 import * as module from './module'; console.log(module.name); console.log(module.sayHello()); console.log(new module.Person('John', 30)); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值