export default name詳解

一、什麼是export default name

export default name

是ES6中用於模塊導出的語法。它用於導出一個默認的對象或函數，其他文件在導入時可以用任意名稱來接收它。比如：

// 導出
export default function foo() {
  // ...
}

// 導入
import anyName from './module.js';

二、export default name的作用

使用export default name可以避免導入時使用一長串的路徑和名稱，提高代碼的可讀性和可維護性。同時，它可以減少代碼量和提高代碼復用性。下面分別詳解。

三、提高代碼的可讀性和可維護性

假設有一個JavaScript模塊，裡面定義了許多函數、類和數據等，我們需要將這些內容導出，方便其他模塊使用。如果使用ES6的語法導出，代碼可能如下所示：

// module.js
export function foo() {
  // ...
}

export class Bar {
  // ...
}

export const baz = 42;

導入時需要用相同的名稱來接收它們，會導致代碼顯得很冗長。比如：

// other.js
import { foo, Bar, baz } from './module.js';

如果我們用export default導出默認對象或函數，我們就可以用任意名稱來接收它，導入時可以更加簡潔易懂。比如：

// module.js
export default function foo() {
  // ...
}

// other.js
import anyName from './module.js';

因此，使用export default name可以提高代碼的可讀性和可維護性。

四、減少代碼量和提高代碼復用性

當我們需要導出一個函數或對象時，我們通常會在導出時使用export，導入時使用import。但是，在某些情況下，我們將一個函數或對象作為默認導出，可以避免寫出過多的重複代碼。

舉個例子，假設有兩個模塊，它們都導出一個封裝好的對象。我們可以使用常規的導出語法，導出相同的對象，代碼如下：

// module1.js
export const obj = {
  // ...
};

// module2.js
export const obj = {
  // ...
};

// app.js
import { obj as obj1 } from './module1.js';
import { obj as obj2 } from './module2.js';

// 使用obj1和obj2

使用export default語法，將其中一個模塊的對象定義為默認導出，則可以避免代碼的重複。代碼如下：

// module1.js
const obj = {
  // ...
};

export default obj;

// module2.js
export const obj = {
  // ...
};

// app.js
import obj1 from './module1.js';
import { obj as obj2 } from './module2.js';

// 使用obj1和obj2

五、示例代碼

下面是一個使用export default name導出函數和對象的示例代碼：

// module.js
export default {
  name: 'John',
  age: 30,
  sayHi() {
    console.log(`Hi, my name is ${this.name} and I'm ${this.age} years old.`);
  }
}

// app.js
import person from './module.js';

console.log(person.name); // 'John'
person.sayHi(); // 'Hi, my name is John and I'm 30 years old.'

以上是export default name的詳細闡述，包括其概念、作用以及示例代碼。在實際開發中，使用export default name可以提高代碼的可讀性、可維護性，減少代碼量和提高代碼復用性，是一個十分實用的語法。