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}