上海工程建设信息网站百度合伙人官网app
模块语法是ES6的一个重要特性，它的出现让JavaScript的模块化编程成为了可能。
在JavaScript中可以直接使用import和export关键字来导入和导出模块，但是这种语法并不是ES6的标准，而是ESM（ECMAScript Module）模块语法的一部分。
虽然导入和导出单个模块的语法非常简单，但是还有许多其他的方式，让你可以使用ESM模块语法来导入和导出模块。
ESM 模块语法
ESM模块语法很简单，它只有两个关键字：import和export。
export
export关键字用来导出模块，每个模块都有一个默认导出，可以使用export default关键字来导出。
// 导出一个变量
const name = '田八';
export default name;
这种导出方式可以导出任何类型的数据，包括基本数据类型、对象、函数等。
但是必须得先定义变量，然后再导出，不能在导出的过程中定义变量。
// 错误的导出方式
export default const name = '田八';
对于函数和类的声明，可以无需定义变量，直接导出。
// 导出一个函数
export default function Hello () {console.log('hello world');
};// 导出一个类
export default class Hello {constructor () {console.log('hello world');}
}
对于字面量类型的数据，可以直接导出。
// 导出一个对象
export default {name: '田八',age: 18
};// 导出一个数组
export default [1, 2, 3, 4, 5];// 导出一个字符串
export default 'hello world';// 导出一个数字
export default 123;
命名导出
任何变量都可以在创建时使用export关键字来导出，这种导出方式叫做命名导出。
// 导出一个变量
export const name = '田八';// 导出一个函数
export function Hello () {console.log('hello world');
};// 导出一个类
export class Hello {constructor () {console.log('hello world');}
}
如果想要导出多个变量，可以使用export关键字，然后在花括号中写上变量名。
// 导出多个变量
const name = '田八';
const age = 18;export { name, age };
如果对导出的变量名不满意，可以使用as关键字来重命名。
// 重命名导出的变量
const name = '田八';
const age = 18;export { name as username, // 重命名为 usernameage // 不重命名
};
导出所有
如果想要导出一个模块中的所有变量，通常我们都是像下面这样写的：
import module from './module.js';// 导出所有变量
export {...module
}
其实有一种更简单的方式，就是使用export * from关键字。
// 导出所有变量
export * from './module.js';
这种方式将会导出module.js模块中的所有变量，但是不会导出module.js模块中的默认导出，因为一个模块只能有一个默认导出。
不过export也提供了一种方式来导出其他模块的默认导出：
// 导出其他模块的默认导出
export { default } from './module.js';
也可以选择性的导出其他模块的不同变量：
// 导出其他模块的不同变量
export { name, age } from './module.js';
同样的，也可以使用as关键字来重命名导出的变量。
// 重命名导出的变量
export { name as username, age, default as module } from './module.js';// 导出其他模块的所有变量，并重命名
export * as module from './module.js';
import
import关键字用来导入模块，通常情况下是直接导入模块中的默认导出。
// 导入模块中的默认导出
import module from './module.js';
如果想同时导入模块中的默认导出和其他变量，可以在花括号中写上变量名。
// 导入模块中的默认导出和其他变量
import module, { name, age } from './module.js';
如果想要导入模块中的所有变量，可以使用import * as关键字。
// 导入模块中的所有变量
import * as module from './module.js';
这样就可以通过module对象来访问模块中的所有变量了。
命名导入
和命名导出一样，任何变量都可以在创建时使用import关键字来导入，这种导入方式叫做命名导入。
// 命名导入
import { name, age } from './module.js';
也可以使用as关键字来重命名导入的变量。
// 重命名导入的变量
import { name as username, age } from './module.js';
还可以混用命名导入和默认导入。
// 混用命名导入和默认导入
import module, { name, age } from './module.js';
上面的代码中，module就是默认导入，name和age就是命名导入。
同时，还可以不导入任何变量，只是执行模块中的代码。
// 只执行模块中的代码
import './module.js';
这样做的好处是可以在模块中执行一些初始化代码，比如在模块中注册全局变量，这种方式称为import for side effects(副作用导入)。
动态导入
import关键字是静态的，也就是说，它必须在模块的顶层使用，不能在函数或者if语句中使用，或者其他代码块中使用。
// 错误的写法
function loadModule() {import './module.js';
}if (true) {import './module.js';
}{import './module.js';
}
上面的代码中，import关键字都是错误的，因为它们都不是模块的顶层。
为了解决这个问题，ES2018引入了import()函数，它可以在任何地方使用，只要是在模块中就可以。
// 正确的写法
function loadModule() {import('./module.js');
}if (true) {import('./module.js');
}{import('./module.js');
}
因为ES模块是异步加载的，所以import()函数返回一个Promise对象。
import('./module.js').then(module => {// ...
});
如果没有找到模块，import()函数会抛出一个错误，所以注意捕获异常。
import('./module.js').catch(err => {// ...
});// 或者try {await import('./module.js');
} catch (err) {// ...
}
import()函数可以用在任何地方，不仅仅是模块。
总结
ES模块是JavaScript模块的标准，它的设计目的是为了取代CommonJS模块，成为浏览器和服务器通用的模块解决方案。
最后请记住，导出和静态导入只能在模块的顶层使用，不能在函数或者if语句，或者任何代码块中使用，而动态导入可以在任何地方使用。
最后
整理了75个JS高频面试题，并给出了答案和解析，基本上可以保证你能应付面试官关于JS的提问。
有需要的小伙伴，可以点击下方卡片领取，无偿分享