import 几种形式的详解

参考：

https://es6.ruanyifeng.com/#docs/module#export-default-命令
https://zhuanlan.zhihu.com/p/467991875

例子1、 import person from './person.js'

// person.js  
const person = {  
  name: 'John Doe',  
  age: 30,  
  occupation: 'Engineer'  
};  
export default person;

// main.js  
import person from './person.js';  //名字可以为person2 dog等，随意命名
  
console.log(person.name);      // 输出: John Doe  
console.log(person.age);       // 输出: 30  
console.log(person.occupation); // 输出: Engineer

   由于person.js中的export的为default，所以import person .....即可，而不需要加{}。
    同时，对于default的内容。调用和可以随意命名。例如可以使用import dog from './person.js'。但是记住，只有对于default的内容才可以随便修改名字。
    每个被调用文件，只能有一个default。

所以import后的名字指代 export default后面所有的内容。

问题1：可以export default {person,dog}这个样子吗？

答:可以，例子如下：

// person.js  
const person = {  
  name: 'John Doe',  
  age: 30,  
  occupation: 'Engineer'  
};  
const dog = "named jack";
export default {person,dog};

// main.js  
import person from './person.js';  //名字可以为person2 dog等，随意命名
  
console.log(person.person.name);      // 输出: John Doe  
console.log(person.person.age);       // 输出: 30  
console.log(person.person.occupation); // 输出: Engineer
console.log(person.dog.name);      // 输出: named jack  

问题2、可以定义的时候就导出吗？而不是放到文件最后

答：可以，如下。

//person.js
export default {
  name: 'jack'
};

注意不能写成export default person = {XXX的形式。可以理解为匿名导出。

例子2、 import * as data from './data.js'

import * as ...这个形式是针对非default的情况。
*表示将所有的export都包含导了某一个对象里，这里为data。然后通过data.member的形式去找到具体的某一个export对象或者函数。

// data.js  
const person = {  
  name: 'John Doe',  
  age: 30,  
  occupation: 'Engineer'  
};  
export { person };

// main.js  
import * as data from './data.js';  
  
console.log(data.person.name);      // 输出: John Doe  
console.log(data.person.age);       // 输出: 30  
console.log(data.person.occupation); // 输出: Engineer

用 import * as data from './data.js'; 语句来导入整个模块的内容，并将其绑定到 data 这个命名空间中。之后，我们可以通过 data.person 来访问导入的 person 对象。

问题1：import * as 这个形式，可以import 源文件中export default的内容吗？

答：不可以，import * as 这种形式是用来导入模块中所有的具名导出（named exports），而不是默认导出（default export）。默认导出是通过 import moduleName from 'modulePath'; 的形式来导入的。

如果你尝试使用 import * as 来导入默认导出，你会得到一个不包含默认导出项的对象，因为默认导出并不被视为具名导出的一部分。

问题2：使用import * as 的时候，被调用文件里会有export，此时export的内容必须使用大括号吗？也就说上例中export { person };这个大括号是必须的吗？

当您在被调用的文件中使用具名导出时，您需要使用大括号来包裹要导出的内容，否则编译语法错误。如下实例。而当您使用 import * as 来导入这些具名导出时，导入语句本身不需要大括号。

const  person =  {
  name: 'jack'
};
export person;//语法错误

问题3：那么可以定义的时候直接export吗？

答：可以。代码如下

export const person = {
  name: 'jack'
};

import * as data from './gf';
console.log(data.person.name);//jack

例子3、import {person} from './xxx.js'

通过这个形式可以得到具体的某一个export【或者可以理解为对 * 的具体解析，* 表示所有对象的集合，{person}表示需要使用 * 里的person对象】。
比如：

//person.js
const person = {
  name: 'jack'
};
export {person};

// 或者可以代码直接定义好了就export
// export const person = {name:"jack"}

//main.js
import {person} from './person';
console.log(person.name);//jack

还可以自定义一个名字，main.js代码写成

//main.js
import {person as p} from './person'
console.log(p.name);//jack

例子4、混合使用

同时import进default数据和非default数据

// 同时有默认导出和具名导出的 module.js  
const myObject = {  
  property: 'value'  
};  
  
const anotherObject = {  
  anotherProperty: 'anotherValue'  
};  
  
export default myObject;  
export { anotherObject };

// 在另一个文件中导入  
import myObject from './module.js'; // 导入默认导出  
import { anotherObject } from './module.js'; // 导入具名导出  
  
console.log(myObject.property); // 输出: value  
console.log(anotherObject.anotherProperty); // 输出: anotherValue