es6中的模块化语法import和export

最新推荐文章于 2025-06-26 14:51:21 发布

灯光下的投影

最新推荐文章于 2025-06-26 14:51:21 发布

阅读量795

点赞数

CC 4.0 BY-SA版权

分类专栏： ECMAScript 文章标签： export import es6

本文链接：https://blog.youkuaiyun.com/liuyuhua666/article/details/93650182

ECMAScript 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了JavaScript中模块的导入导出方法，包括基本的import和export语法，如何导出多个数据，如何给导出的数据重新命名，以及默认导出项的使用。通过实例演示了不同导入方式的应用。

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

如何引入模块：

import

如何把模块中的内容提供给别人使用：

export

1、export 可以直接导出变量、函数、对象：

module1.js：

export let num = 100
export let func = function(){
  console.log(111)
}
export function sayHllo(){
  console.log('hello')
}
export let obj = {
  name: 'zs',
  age: 18
}
export let arr = [1, 2, 3]

第一种接收方式：

import {obj,num,func,sayHllo,arr} from './module1'


console.log(obj)
console.log(num)
console.log(func)
console.log(sayHllo)
console.log(arr)

第二种接收方式：

import * as objs from './module1'

console.log(objs.obj)
console.log(objs.num)
console.log(objs.func)
console.log(objs.sayHllo)
console.log(objs.arr)

也可以有选择性的接收：

import {num} from "./module1"

console.log(num)

2、一次性导出多个数据:

module2:

let num = 100
let func = function(){
  console.log(111)
}
function sayHllo(){
  console.log('hello')
}
let obj = {
  name: 'zs',
  age: 18
}
let arr = [1, 2, 3]

//一次性导出多个数据
export {num,func,sayHllo,obj,arr}

导入方式（也就是接收方式）和上面的一样

3、导出数据的时候给数据重新起名字：

module3.js:

//导出数据的时候从新给数据起名字
let num = 100
export {num as num1}

接收：

import {num1} from './module3'

console.log(num1)

4、默认导出项：

如果想要通过`import 名字 from '模块'`直接就拿到模块里面的某个数据

就必须在模块中将这个数据设置为默认的导出项 (默认导出项只能有一个！！)

第一种方式：

module4.js:

export default function sayHello(){
    console.log(1111)
}

接收：

import func from './module4'

console.log(func)

第二种方式：

module5.js:

function sayHello(){}

export {sayHello as default}

接收：

import func from './module5'

console.log(func)