?? export default 和 export 有什么區(qū)別：

export 、export default，都屬于ES6里面的語(yǔ)法

1. export與export default均可用于導(dǎo)出常量、函數(shù)、文件、模塊等

2. 你可以在其它文件或模塊中通過import+(常量 | 函數(shù) | 文件 | 模塊)名的方式，將其導(dǎo)入，以便能夠?qū)ζ溥M(jìn)行使用

3. 在一個(gè)文件或模塊中，export、import可以有多個(gè)，export default僅有一個(gè)

export default 用于規(guī)定模塊的默認(rèn)對(duì)外接口，只能有一個(gè)，所以 export default 在同一個(gè)模塊中只能出現(xiàn)一次。

4. 通過export方式導(dǎo)出，在導(dǎo)入時(shí)要加{ }，export default則不需要，因?yàn)樗旧碇荒苡幸粋€(gè)

export default的import方式之所以不需要使用大括號(hào)包裹。因?yàn)閷?duì)于export default 其輸出的本來就只有一個(gè)接口，提供的是模塊的默認(rèn)接口，自然不需要使用大括號(hào)包裹。

5、 export 可以直接導(dǎo)出或者先定義后導(dǎo)出都可以，export default只能先定義后導(dǎo)出

?? export

export 可以直接導(dǎo)出或者先定義后導(dǎo)出都可以。

示例：直接導(dǎo)出

export let i = “hello”；
export function myFun(){ };

示例：先定義后導(dǎo)出

let i = “hello";
function myFun(){ };
export { i , myFun }? ?// 必須加花括號(hào){ }

?? export default

export default是模塊的默認(rèn)對(duì)外接口，只有一個(gè)，所以只能出現(xiàn)一次。

export default只能先定義后導(dǎo)出
示例：先定義后導(dǎo)出

function myFun(){ };
export default?myFun? // 不要加花括號(hào){ }

?? 示例：export 導(dǎo)出方式

// export導(dǎo)出方式
// one.js
// 1、export可以有多個(gè)
// 2、可以各自分開導(dǎo)出也可以同時(shí)導(dǎo)出多個(gè)；
// 3、export可以直接導(dǎo)出或者先定義后導(dǎo)出
 
//?? 直接導(dǎo)出
export const str = "blablabla~";
export function log(sth) { 
  return sth;
}
export function cale(a,b){
  return a+b
}
 
//?? 先定義后導(dǎo)出
// const str = "blablabla~";
// function log(sth) { 
//   return sth;
// }
// function cale(a,b){
//   return a+b
// }
// export {str}
// export {calc}
// export {log}
// export {str, log, cale}
 
// 對(duì)應(yīng)的導(dǎo)入方式：
// two.js
// 1、引入時(shí)需要加花括號(hào){ }；
// 2、可以各自分開引入也可以同時(shí)引入多個(gè)；
// 3、引入的變量不能自定義名字
import { str, log, cale } from './one.js';  // 完整的路徑
console.log(str); // blablabla~
console.log(calc(10,15)); // 25
console.log(calc); // [Function: calc]

 ?? 示例：export default 導(dǎo)出方式

// export default導(dǎo)出方式
// one.js
// 1、export default 只能導(dǎo)出一個(gè)
// 2、export只能先定義后導(dǎo)出
 
//?? 只能先定義后導(dǎo)出
const str = "blablabla~";
export default str
 
// 對(duì)應(yīng)的導(dǎo)入方式：
// two.js
// 1、引入時(shí)不需要加花括號(hào){ }；
// 2、引入的變量可以自定義名字
import str from './one.js'; // 完整的路徑
console.log(str); // blablabla~

? 我在vscode運(yùn)行以上js代碼時(shí)出現(xiàn)了報(bào)錯(cuò)：

(node:18336) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension. 
警告：加載ES模塊時(shí)，在package.json包中設(shè)置“ type”：“ module”或使用.mjs擴(kuò)展名。

??  經(jīng)過一番折騰，找到了解決方案：
解決方法：
1、安裝新版node.js
2、使用npm init -y初始化項(xiàng)目，生成一個(gè)pakeage.json文件
3、在pakeage.json文件中添加"type": "module"

 ?? 最后的結(jié)果：

同類型報(bào)錯(cuò)問題，都可采取這種解決方案

報(bào)錯(cuò)：Warning: To load an ES module, set “type“: “module“ in the package.json or use the .mj

?? 使用export default命令，為模塊指定默認(rèn)輸出，這樣就不需要知道所要加載模塊的變量名

//a.js
let sex = "boy";
// 編譯成 CommonJS: exports.default = sex (ES 編譯成的 CommonJS 形式)
export default sex // sex不能加大括號(hào)

注意：原本直接export sex外部是無法識(shí)別的，加上default（或者export {sex}）就可以了。但是一個(gè)文件內(nèi)最多只能有一個(gè)export  default。其實(shí)此處相當(dāng)于為sex變量值"boy"起了一個(gè)系統(tǒng)默認(rèn)的變量名default，自然default只能有一個(gè)值，所以一個(gè)文件內(nèi)不能有多個(gè)export default。

// b.js
import any from "./a.js"; // 編譯成 CommonJS: require('./a.js').default
import any12 from "./a.js"; // 編譯成 CommonJS: require('./a.js').default
console.log(any,any12)   // boy  boy

注意：本質(zhì)上，a.js文件的export default輸出一個(gè)叫做default的變量，然后系統(tǒng)允許你為它取任意名字。所以，可以為import的模塊起任何變量名，且不需要用大括號(hào)包含 。

擴(kuò)展：export default 和 export都是 ES6 中的寫法，其用法如下：

// 導(dǎo)出
export?default?a?// 編譯成 CommonJS: exports.default = a (ES 編譯成的 CommonJS 形式)

// 引人
import?a?from?'./xxx'?// 編譯成 CommonJS: require('./xxx').default

// 導(dǎo)出
export?{ a }?// 編譯成 CommonJS: exports.a = a

// 引人
import?{ a }?from?'./xxx'?// 編譯成 CommonJS: require('./xxx').a?

?? 總結(jié)：

export default 和 export 的主要區(qū)別在于對(duì)應(yīng)的import的區(qū)別：

export 對(duì)應(yīng)的 import 需要知道 export 拋出的變量名或函數(shù)名，因?yàn)閑xport 拋出的變量名或函數(shù)名導(dǎo)入時(shí)，不能自定義名字 ——import{a,b}

export default對(duì)應(yīng)的 import 不需要知道 export拋出的變量名或函數(shù)名，因?yàn)閑xport 拋出的變量名或函數(shù)名導(dǎo)入時(shí)，可以自定義名字，也就是說可以使用任意的變量名 ——import anyname。

通過兩者導(dǎo)出的對(duì)象，導(dǎo)入時(shí)也存在寫法上的差別。

1、export導(dǎo)出的對(duì)象，導(dǎo)入時(shí)寫法：

import {i, myFun} from ‘模塊’

2、export default導(dǎo)出的對(duì)象，導(dǎo)入時(shí)寫法：

import 變量名 from ‘模塊’

很明顯，模塊只有一個(gè)默認(rèn)的導(dǎo)出的接口，所以只有一個(gè)對(duì)象被導(dǎo)出，導(dǎo)出的對(duì)象可以自定義一個(gè)變量名。

到此這篇關(guān)于ES6中export default和export之間的區(qū)別的文章就介紹到這了,更多相關(guān)export default和export區(qū)別內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論