import、export、export default、as的使用

本文链接：https://blog.csdn.net/yzding1225/article/details/125221785

本文详细介绍了ES6中export、exportdefault和as关键字的用法，包括常量、函数、对象导出，以及如何通过as重命名。重点讲解了exportdefault的单次导出与import的便捷使用方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

export 与import是es6中新增模块功能最主要的两个命令。

1.export与export default均可用于导出常量、函数、文件、模块等
2.在一个文件或模块中，export、import可以有多个，export default仅有一个
3.通过export方式导出，在导入时要加{ }，export default则不需要{ }

一、export

使用export抛出的变量需要用{}进行import

//a.js
export const str = "blablabla~";
export function log(sth) {
      return sth;
    }
 
对应的导入方式：
 
//b.js
import { str, log as _log } from 'a'; 
//也可以分开写两次，导入的时候带花括号。还可以用as重命名

二、export default

使用export default抛出的变量，只需要自定义名字就行

//a.js :
var obj = { name: ‘example’ }; 
export default obj; 
 
//b.js: 
import newNname from ‘./a.js’;   //newNname 是自己随便取的名字，这里可以随便命名
console.log(newNname .name);       // example;

三、as

示例1

// index.js
export function fn1(data){
  console.log(1)
}
export function fn2(data){
  console.log(2)
}

import * as Fn from './index.js'
Fn.fn1()  // 1
Fn.fn2()  // 2

示例2

//test.js
let myName = "Jon";
let myAge = 18;
let myfn = function(){
    return "我是"+myName+"！今年"+myAge+"岁了"
}
export {
    myName as name,
    myAge as age,
    myfn as fn
}

//接收代码
import {fn,age,name} from "./test.js";
console.log(fn()); //我是Jon！今年19岁了
console.log(age); //19
console.log(name); //Jon

//或接收代码
import * as info from "./test.js"; //通过*来批量接收，as 来指定接收的名字
console.log(info.fn()); //我是Jon！今年18岁了
console.log(info.age); //18
console.log(info.name); //Jon

示例3

重命名export和import，如果导入的多个文件中，变量名字相同，即会产生命名冲突的问题，为了解决该问题，ES6为提供了重命名的方法，当你在导入名称时可以这样做

/*************test1.js*****************/
export let myName = "我来自test1.js";
/*************test2.js*****************/
export let myName = "我来自test2.js";

/*************index.js****************/
import {myName as name1} from "./test1.js";
import {myName as name2} from "./test2.js";
console.log(name1); //我来自test1.js
console.log(name2); //我来自test2.js