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

export 、export default，都屬于ES6里面的語法

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

2. 你可以在其它文件或模塊中通過import+(常量 | 函數(shù) | 文件 | 模塊)名的方式，將其導入，以便能夠對其進行使用

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

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

4. 通過export方式導出，在導入時要加{ }，export default則不需要，因為它本身只能有一個

export default的import方式之所以不需要使用大括號包裹。因為對于export default 其輸出的本來就只有一個接口，提供的是模塊的默認接口，自然不需要使用大括號包裹。

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

?? export

export 可以直接導出或者先定義后導出都可以。

示例：直接導出

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

示例：先定義后導出

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

?? export default

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

export default只能先定義后導出
示例：先定義后導出

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

?? 示例：export 導出方式

// export導出方式
// one.js
// 1、export可以有多個
// 2、可以各自分開導出也可以同時導出多個；
// 3、export可以直接導出或者先定義后導出
 
//?? 直接導出
export const str = "blablabla~";
export function log(sth) { 
  return sth;
}
export function cale(a,b){
  return a+b
}
 
//?? 先定義后導出
// 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}
 
// 對應的導入方式：
// two.js
// 1、引入時需要加花括號{ }；
// 2、可以各自分開引入也可以同時引入多個；
// 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 導出方式

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

? 我在vscode運行以上js代碼時出現(xiàn)了報錯：

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

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

 ?? 最后的結果：

同類型報錯問題，都可采取這種解決方案

報錯：Warning: To load an ES module, set “type“: “module“ in the package.json or use the .mj

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

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

注意：原本直接export sex外部是無法識別的，加上default（或者export {sex}）就可以了。但是一個文件內(nèi)最多只能有一個export  default。其實此處相當于為sex變量值"boy"起了一個系統(tǒng)默認的變量名default，自然default只能有一個值，所以一個文件內(nèi)不能有多個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輸出一個叫做default的變量，然后系統(tǒng)允許你為它取任意名字。所以，可以為import的模塊起任何變量名，且不需要用大括號包含 。

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

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

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

// 導出
export?{ a }?// 編譯成 CommonJS: exports.a = a

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

?? 總結：

export default 和 export 的主要區(qū)別在于對應的import的區(qū)別：

export 對應的 import 需要知道 export 拋出的變量名或函數(shù)名，因為export 拋出的變量名或函數(shù)名導入時，不能自定義名字 ——import{a,b}

export default對應的 import 不需要知道 export拋出的變量名或函數(shù)名，因為export 拋出的變量名或函數(shù)名導入時，可以自定義名字，也就是說可以使用任意的變量名 ——import anyname。

通過兩者導出的對象，導入時也存在寫法上的差別。

1、export導出的對象，導入時寫法：

import {i, myFun} from ‘模塊’

2、export default導出的對象，導入時寫法：

import 變量名 from ‘模塊’

很明顯，模塊只有一個默認的導出的接口，所以只有一個對象被導出，導出的對象可以自定義一個變量名。

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

最新評論