export与export default的区别

Posted 2021-11-25 lzlearnzoo

相同

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}