export與export default的區別

相同

1.export與export default都可用於導出常量、函數、文件、模塊等

不一樣

1.經過export方式導出，在導入時 須要加上{}；export default不須要

2.輸出區別

在一個文件或模塊中，export能夠有多個

//test.js
//export能夠使用屢次
export const name='lili'; export const age=12; export function sayName(){ console.log(name) }

//test.js
const name='lili'; const age=12; function sayName(){ console.log(name) } export {name,age,sayName}

//test.js
//改變輸出的變量名

const name='lili';
const age=12;
function sayName(){

 console.log(name) } export{
　　name as newName,
　　age as newAge,
　　sayName as newSayName
}

export default只能有一個

//test.js
const name='lili'; const age=12;

export default function(){ //輸出一個function
console.log(name); } 

//test.js
const name='lili'; const age=12; function sayName(){ console.log(name) } export default name//只輸出一個name

//test.js //改變輸出的變量名
const name='lili'; const age=12; function sayName(){ console.log(name) }
//輸出一個對象

export default{
　　name,
　　age,
　　sayName
}

3.輸入區別

export輸出與輸入的名字一致

//test.js
const name='lili'; const age=12; function sayName(){ console.log(name) } export {name,age,sayName}
/////////////////////////////////////////
//index.js
import{name,age,sayName} from './test.js'
console.log(name);//lili

//test.js
const name='lili'; const age=12; function sayName(){ console.log(name) } export {
name as newName,
age as newAge,
sayName as newSayName} ///////////////////////////////////////// //index.js
import{newName,newAge,newSayName} from './test.js' console.log(newName);//lili

//test.js
const name='lili'; const age=12; function sayName(){ console.log(name) } export default {name,age,sayName} ///////////////////////////////////////// //index.js
import obj from './test.js' console.log(obj);//{name:'lili',age:12,sayName:f}