建站
咨詢
售后
建站咨詢
新聞中心
一、導(dǎo)言
在JavaScript模塊化編程中，export和export default是兩個(gè)常用的關(guān)鍵字，它們都用于導(dǎo)出模塊中的變量、函數(shù)或類，它們之間存在一些差異，本文將詳細(xì)闡述這兩個(gè)關(guān)鍵字的區(qū)別。
二、export和export default的定義
1. export
`export`關(guān)鍵字用于導(dǎo)出一個(gè)或多個(gè)命名空間(對(duì)象)到當(dāng)前模塊，它可以接受一個(gè)或多個(gè)參數(shù)，這些參數(shù)要么是變量名，要么是變量名和值的數(shù)組，當(dāng)使用`export`關(guān)鍵字導(dǎo)出多個(gè)變量時(shí)，可以使用逗號(hào)分隔它們，如果要導(dǎo)出一個(gè)命名空間(對(duì)象),則需要將其放在花括號(hào)({})內(nèi)。
// 導(dǎo)出一個(gè)變量
export const name = 'John';
// 導(dǎo)出一個(gè)命名空間(對(duì)象)
const person = {
name: 'John',
age: 30
};
export { person };
2. export default
`export default`關(guān)鍵字用于導(dǎo)出一個(gè)默認(rèn)值到當(dāng)前模塊，當(dāng)使用`export default`關(guān)鍵字時(shí)，不需要顯式地指定導(dǎo)出的變量名或命名空間(對(duì)象)，它會(huì)為當(dāng)前模塊中的第一個(gè)非匿名自執(zhí)行函數(shù)分配一個(gè)唯一的名稱，這個(gè)名稱將成為導(dǎo)入該模塊時(shí)使用的標(biāo)識(shí)符。
// 導(dǎo)出一個(gè)默認(rèn)值
function sayHello() {
console.log('Hello');
}
export default sayHello;
三、export和export default的區(qū)別
盡管`export`和`export default`都可以用于導(dǎo)出模塊中的變量、函數(shù)或類，但它們之間存在以下幾點(diǎn)區(qū)別：
1. 命名空間(對(duì)象)的導(dǎo)出方式不同：使用`export`關(guān)鍵字導(dǎo)出的命名空間(對(duì)象)必須放在花括號(hào)({})內(nèi)，而使用`export default`關(guān)鍵字導(dǎo)出的命名空間(對(duì)象)則不需要，當(dāng)使用`export default`關(guān)鍵字時(shí)，如果沒有為當(dāng)前模塊提供任何非匿名自執(zhí)行函數(shù)，那么將會(huì)出現(xiàn)錯(cuò)誤。
2. 導(dǎo)出的標(biāo)識(shí)符不同：當(dāng)使用`export`關(guān)鍵字導(dǎo)出一個(gè)或多個(gè)變量時(shí)，可以選擇顯式地指定它們的名稱(例如：`export const name = 'John';`),也可以選擇不指定(即使用它們的原始名稱)，而使用`export default`關(guān)鍵字導(dǎo)出的默認(rèn)值會(huì)自動(dòng)為其分配一個(gè)唯一的名稱(例如：`sayHello`),這個(gè)名稱將成為導(dǎo)入該模塊時(shí)使用的標(biāo)識(shí)符。
3. 只能有一個(gè)默認(rèn)值：在一個(gè)模塊中，只能有一個(gè)使用`export default`關(guān)鍵字的自執(zhí)行函數(shù)，如果嘗試為同一個(gè)模塊添加第二個(gè)默認(rèn)值，將會(huì)覆蓋第一個(gè)默認(rèn)值，而使用`export`關(guān)鍵字導(dǎo)出的命名空間(對(duì)象)可以在一個(gè)模塊中有多個(gè)。
4. 導(dǎo)入方式不同：當(dāng)使用`export`關(guān)鍵字導(dǎo)出一個(gè)或多個(gè)變量時(shí)，導(dǎo)入模塊時(shí)需要使用相同的名稱(例如：`import { name } from './module.js';`)，而使用`export default`關(guān)鍵字導(dǎo)出的默認(rèn)值在導(dǎo)入模塊時(shí)不需要指定名稱(例如：`import sayHello from './module.js';`)，當(dāng)使用`export default`關(guān)鍵字時(shí)，導(dǎo)入模塊時(shí)的名稱與默認(rèn)值的名稱相同(例如：`import myDefault from './module.js';`,其中`myDefault`是默認(rèn)值的名稱)，而使用`export`關(guān)鍵字導(dǎo)出的命名空間(對(duì)象)在導(dǎo)入模塊時(shí)的名稱通常是其原始名稱(例如：`import person from './module.js';`,其中`person`是原始名稱)。
四、相關(guān)問題與解答
1. 如何為多個(gè)命名空間(對(duì)象)分別使用不同的導(dǎo)出方式？
答：可以使用多個(gè)花括號(hào)({})來分別為每個(gè)命名空間(對(duì)象)創(chuàng)建單獨(dú)的導(dǎo)出語(yǔ)句。
// 導(dǎo)出一個(gè)命名空間(對(duì)象)A
const personA = {
name: 'Alice',
age: 30
};
export { personA };
// 導(dǎo)出一個(gè)命名空間(對(duì)象)B
const personB = {
name: 'Bob',
age: 25
};
export { personB };
在導(dǎo)入模塊時(shí)，可以使用不同的名稱來分別引用這兩個(gè)命名空間(對(duì)象):
import { personA as alice, personB as bob } from './module.js';
console.log(alice); // { name: 'Alice', age: 30 }
console.log(bob); // { name: 'Bob', age: 25 }
本文標(biāo)題：deport和exile區(qū)別
本文路徑：http://m.5511xx.com/article/cojddjp.html
