刘流的博客

ES6. 5.导入和导出

ES6
Word count: 1.1kReading time: 4 min
2020/08/30 Share

使用模块化导出变量，函数，类，对象等。

一. 导出变量
导出变量

1
2
3
export  const name = 'hello'
export let address = 'beijing'
export let list = [1,2,3]

接收变量

1
2
import {name,address,list} from './medoa'
console.log(name,address,list);

同时导出多个变量

1
2
3
4
5
const name = 'hello'
let address = 'beijing'
let list = [1,2,3]

// 同时导出多个变量
1
2
3
4
5
export {
    name,
    address,
    list
}

接收变量仍然一样

接收变量仍然一样

1
2
import {name,address,list} from './medoa'
console.log(name,address,list);

使用默认导出变量

1
2
3
4
5
6
7
8
9
10
const name = 'hello'
let address = 'beijing'
let list = [1,2,3]

// 默认导出
export default name
export {
    address,
    list
}

接收默认导出的变量接收默认导出的参数可以不写在花括号里面，但是不是通过默认导出的参数必须写在花括号里面，不然会报错。

1
2
3
4
5
import name, {address,list} from './medoa';
console.log(name,address,list);

import name from './medoa';
console.log(name);

通过默认导出的变量，我们在引用的时候，我们可以自己改该变量的名字。将 name 改成 name2 之后，仍然可以使用

1
2
import name2 from './medoa';
console.log(name2);

没有通过默认导出的变量不能直接改变其名字，但是也可以改变其名字，通过 as 改变名字

1
2
import name2,{address as address2} from './medoa';
console.log(name2,address2);

二. 导出函数
导出函数

1
2
3
4
5
6
7
export function say(content) {
    console.log(content);
}

export function run() {
    console.log("I am running");
}

接收导出的函数

接收导出的函数

1
2
3
4
5
import {say,run} from './medoa'
// 调用函数
say('hello world')

run()

同时导出多个函数

同时导出多个函数

1
2
3
4
5
6
7
8
9
10
11
function say(content) {
    console.log(content);
}

function run() {
    console.log("I am running");
}
export {
    say,
    run
}

默认导出函数，默认导出和普通导出不能重复，不然会报错

默认导出函数，默认导出和普通导出不能重复，不然会报错

1
2
3
4
5
6
7
8
9
10
11
function say(content) {
    console.log(content);
}

function run() {
    console.log("I am running");
}
export default say
export {
    run
}

接收导出的函数

接收导出的函数

1
2
3
4
5
import say,{ run } from './medoa'
// 调用函数
say('hello world')

run()

三. 导出对象
默认导出一个对象，这个对象可以没有变量名

三. 导出对象
默认导出一个对象，这个对象可以没有变量名

1
2
3
4
export default {
    name:'tim',
    address:'beijing'
}

接收对象

接收对象

1
2
import obj from './medoa'
console.log(obj);

导出多个对象

导出多个对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
let data = {
    code:1,
    message:'success'
}

let des = {
    name:'tim',
    address:'beijing'
}

export default{
    data,
    des
}

接收导出的多个对象

接收导出的多个对象

1
2
import obj from './medoa'
console.log(obj);

此时接收的对象是一个拥有两个对象的对象，我们可以采用解构赋值的操作，将对象进行分离

此时接收的对象是一个拥有两个对象的对象，我们可以采用解构赋值的操作，将对象进行分离

1
2
3
import obj from './medoa'
let {data,addr} = obj
console.log(data,addr);

四. 导出类
导出类和导出对象的方法基本差不多

四. 导出类
导出类和导出对象的方法基本差不多

1
2
3
4
5
export default class Tset{
    constructor(){
        this.id = 2
    }
}

接收类

接收类

1
2
3
import Test from './medoa'
let test = new Test()
console.log(test.id);

当一个模块的类很多的时候，我们可以使用 * 代替所有的类

当一个模块的类很多的时候，我们可以使用 * 代替所有的类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
class Tset{
    constructor(){
        this.id = 2
    }
}
class Animal{
    constructor(){
        this.name = 'dog'
    }
}

export default{
    Tset,
    Animal
}

导入

导入

1
2
3
4
5
import * as Mod from './medoa'
let test = new Mod.Test()
console.log(test.id);
let animal = new Mod.Animal()
console.log(animal.name);

当我们使用 * 导入所有类的时候，我们使用默认导出的类的时候需要用 default 作为默认导出类

当我们使用 * 导入所有类的时候，我们使用默认导出的类的时候需要用 default 作为默认导出类

1
2
3
4
import * as Mod from './medoa'

let people = new Mod.default()
console.log(people.id);

Author：John Doe

原文链接：http://example.com/2020/08/30/2020-8-30-ES6-05-import/

发表日期：August 30th 2020, 12:00:00 am

更新日期：August 30th 2020, 8:45:51 pm

版权声明：本文采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可

CATALOG
Total : 16
2020
小程序 NodeJS ES6 杂记 HTML CSS JavaScript
CSS 小程序 Node JavaScript 杂记 HTML 前端