ES6中import和export的用法（8种）
Posted 青阳zi
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ES6中import和export的用法（8种）相关的知识，希望对你有一定的参考价值。
首先这两个是基于服务器端环境的 我这边是安装了phpstudy 安装好之后会有一个www文件夹 把内容放入该文件夹中我的文件夹叫exportandimport 里面有一个index.js 和一个index.html 可以启动服务器 http://localhost/exportandimport
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="module">
/* 第一种情况:import {a} from './index.js'
console.log(a) */
/*第二种情况: import {a,b,c} from './index.js'
console.log(a)
console.log(b)
console.log(c) */
/*第三种情况函数的导入: import {add} from './index.js'
console.log(add(1,2)) */
/*第四种不想暴露js中的变量名: import {x,y,z} from './index.js'
console.log(x)
console.log(y)
console.log(z) */
/*第五种联合导出1: import {a,add} from './index.js'
console.log(a)
console.log(add(1,2)) */
/* 第五种联合导出2: import {a,add} from './index.js'
console.log(a)
console.log(add(1,2)) */
/*第六种情况 export default : import a from './index.js'
console.log(a)
a可以使用别名b或者其他别名
import b from './index.js'
console.log(b) */
/* 第六种情况 export default复杂结构:import a from './index.js'
console.log(a.logo); */
/* 第七种方法：import {Person} from './index.js'
var p = new Person()
p.run()
import Person from './index.js'
var p = new Person()
p.run()*/
/*第八种方法： import * as aaa from './index.js'
console.log(aaa.flag)
console.log(aaa.name) */
</script>
</body>
</html>
js文件
/*第一种情况 export let a = 'Lee'; */
/*第二种情况 var a ='Lee';var b ='李';var c = 'web';
export {a,b,c} */
/*第三种情况函数的导出 export function add(a,b){
return a+b;
} */
/* 第四种不想暴露js中的变量名 var a ='Lee';var b ='李';var c = 'web';
export {
a as x,
b as y,
c as z
} */
/*第五种联合导出1 export var a ='Lee';
export function add(a,b){
return a+b;
} */
/*第五种联合导出2 var a ='Lee';
function add(a,b){
return a+b;
}
export {a,add} */
/* 第六种情况 export default :
var a = 'Lee';
export default a; */
/*第六种情况复杂结构 export default {
logo: 'UNI-ADMIN',
navBar: {
active: '0',
list: [{
name: "首页",
subActive: '0',
submenu: [{
icon: "el-icon-s-home",
name: "后台首页",
pathname:"index"
},
{
icon: "el-icon-picture",
name: "相册管理",
pathname:"image"
},
{
icon: "el-icon-s-claim",
name: "商品列表",
pathname:"shop_goods_list"
}
]
},
{
name: "商品",
subActive: '0',
submenu: [{
icon: "el-icon-s-claim",
name: "商品列表",
pathname:"shop_goods_list"
}]
},
{
name: "订单"
},
{
name: "会员"
},
{
name: "设置"
},
]
}
} */
/*第七种方法： export class Person{
run(){
console.log("奔跑");
}
}
class Person{
run(){
console.log("奔跑");
}
}
export default Person
*/
/* 第八种方法： let name = '小明'
var flag = true
export {
flag,name
} */以上是关于ES6中import和export的用法（8种）的主要内容，如果未能解决你的问题，请参考以下文章