【ES6】export与export default的区别

前言：模块加载的出现，使得JavaScript更加强大。学会并使用模块也成为我们的必修课之一了。

 

一、输出区别

① export输出：export在一个模块中可以多次使用

//test.js
//export可以多次使用

export const name = 'freddy';
export const age = 24;
export function sayName(){
    console.log(name);
};

//test.js
const name = 'freddy';
const age = 24;
function sayName(){
    console.log(name);
};

export { name,age,sayName }

//test.js
const name = 'freddy';
const age = 24;
function sayName(){
    console.log(name);
};

export {    //改变输出的变量名
    name as newName,         
    age as newAge,
    sayName as newSayName
}

② export default输出：export default在一个模块中只能使用一次

//test.js
const name = 'freddy';
const age = 24;
export default function(){    //只输出一个function
    console.log(name);
};

//test.js
const name = 'freddy';
const age = 24;
function sayName(){
    console.log(name);
};

export default sayName;

//test.js
const name = 'freddy';
const age = 24;
function sayName(){    
    console.log(name);
};

export default name;    //只输出一个name

//test.js
const name = 'freddy';
const age = 24;
function sayName(){    
    console.log(name);
};

export default {      //只输出一个对象
    name,
    age,
    sayName
};    

 

一、输入区别

①、export：export输出时用的变量名是什么，输入时也必须用那些变量名

//test.js
export const name = 'freddy';
export const age = 24;
export function sayName(){
    console.log(name);
};

-------------------------------------------

//index.js
import { name,age,sayName } from './test';

console.log(name);
console.log(age);
console.log(sayName);

//test.js
const name = 'freddy';
const age = 24;
function sayName(){
    console.log(name);
};

export {    //改变输出的变量名
    name as newName,         
    age as newAge,
    sayName as newSayName
}

----------------------------------------

//index.js
import { newName,newAge,newSayName } from './test';

console.log(newName);
console.log(newAge);
console.log(newSayName);

②、export default：输入时用的变量名可以随便取。

//test.js
const name = 'freddy';
const age = 24;
export default function(){    //只输出一个function
    console.log(name);
};

-------------------------------------------------

import abc from './test'

abc();

//test.js
const name = 'freddy';
const age = 24;
function sayName(){    
    console.log(name);
};

export default {      //只输出一个对象
    name,
    age,
    sayName
};  

-----------------------------------------

import obj from './test'

console.log(obj);