01-ES6 导入和导出

目录

1：默认导出、默认导入

2：按需导出、按需导入

3：直接导入并执行模块中的代码

 

正文：

1：默认导出、默认导入

1.1：默认导出

let n1 = 10
let n2 = 20
function show() {}

class Person {}

// JavaScript模块中使用export default时，其后应直接跟随一个表达式或对象，不能是声明语句。
// 1：默认导出一个变量
// export default n1

// 2：默认导出函数
// export default show

// 3：默认导出多个对象，
// export default {
//   n1,
//   show,
// }

// 4：默认导出一个函数表达式
export default new Person()

1.2：默认导入

import n1 from './01.默认导出.js'

console.log(n1)

/*
1：默认导出一个变量
export default n1

10
*/

/* 
2：默认导出函数
export default show

[Function: show]
*/

/*
3：默认导出多个对象，
export default {
  n1,
  show,
}

{ n1: 10, show: [Function: show] }
*/

/*
4：默认导出一个函数表达式
export default new Person()

Person {}
*/

/* 注意事项：
1：默认导出的注意事项
每个模块中，只允许使用唯一的一次 export default，否则会报错！

2：默认导入
语法： import 接收名称 from '模块标识符'
export default 向外暴露的成员，可以使用任意变量来接收

注意：通过export方式导出，在导入时要加{ }，export default则不需要
*/ 

2：按需导出、按需导入

2.1：按需导出

export let s1 = 'aaa'
export let s2 = 'bbb'
// 1：直接导出
export function say() {}

let s3 = 'ccc'
let s4 = 'ddd'

// 2：按需导出，不能够重复
// 使用export向外暴露的成员，只能使用{ }来包裹，这种形式，叫做【按需导出】
export {
  s3,
  s4,
}

// 3：默认导出
export default {
  a: 20
}

2.2：按需导入

// 方式1：
// 按需导入写在大括号里
// import info from './03.按需导出.js'
// 默认导出写在大括号外
// import { s1, s2 as str2, say, s3, s4 } from './03.按需导出.js'

// 方式2：
// 默认导出和按需导入写在一起
// 默认导出必须写在按需导入的前面
import info, { s1, s2 as str2, say, s3, s4 } from './03.按需导出.js'

console.log(s1)
console.log(str2)
console.log(s3)
console.log(s4)
console.log(say)

console.log(info)

/*
1:  按需导入
按需导入的语法： import { s1 } from '模块标识符'

2: 按需导出与按需导入的注意事项
① 每个模块中可以使用多次按需导出,使用export向外暴露的成员，只能使用{ }来包裹，这种形式，叫做【按需导出】
② 按需导入的成员名称必须和按需导出的名称保持一致
③ 按需导入时，可以使用 as 关键字进行重命名
④ 按需导入可以和默认导入一起使用
⑤ 按需导入和默认导入可以写在一起
⑥ 按需导入写在大括号里, 默认导出写在大括号外, 按需导入的成员必须放在最后
*/ 

3：直接导入并执行模块中的代码

文件文字：05.直接运行模块中的代码.js

// 如果只想单纯地执行某个模块中的代码，并不需要得到模块中向外共享的成员。此时，可以直接导入并执行模块代码
for (let i = 0; i < 3; i++) {
  console.log(i)
}

 

// 如果只想单纯地执行某个模块中的代码，并不需要得到模块中向外共享的成员。此时，可以直接导入并执行模块代码
for (let i = 0; i < 3; i++) {
  console.log(i)
}

 

注意： 

 

引用：

export default 和 export 的区别

export与export default的区别