用JavaScript導出動態名稱

Question

假設我們必須導出大量名稱。

export const fn0 = fn.bind(null, '0');
export const fn1 = fn.bind(null, '1');
...
export const fn999 = fn.bind(null, '999');

是否可以導出如下的動態名稱？

// array is [0 to 999]
array.forEach(i => export const [`fn${i}`] = fn.bind(null, i.toString());

Answer 1

坦率地說，不。 這是設計使然。

該模塊的語法旨在進行靜態分析 。 這意味着無需執行任何代碼即可確定其他模塊需要哪些模塊。 這在所謂的“樹搖動”中具有巨大的優勢，在“搖樹”中 ，可以根據實際使用的內容有選擇地導入代碼（並且此功能由匯總器和webpack之類的模塊捆綁器使用 ）。

這是ES6模塊與commonjs不同的關鍵方式。 如果您require庫中的方法，則文件中的所有內容都會運行，而不僅僅是您使用的內容。 如果從庫中import函數，則（應該）僅獲得該函數。 如果必須運行所有代碼以找出要導出的內容，則無法執行此操作。

從這里引用

ECMAScript 6為您提供了兩全其美的優勢：Node.js的同步語法以及AMD的異步加載。 為了使兩者都實現，ES6模塊在語法上不如Node.js模塊靈活：導入和導出必須在頂層進行。 這意味着它們也不是有條件的。 此限制使ES6模塊加載器可以靜態分析模塊導入了哪些模塊，並在執行其主體之前加載它們。

Answer 2

let fnCollection = {};
function fn(){
  return "welcome js"
}
[1,2,3,4].forEach(i =>fnCollection[`fn${i}`] = fn.bind(null, i.toString()));
export default fnCollection ;