ES6之export和import

export后面跟变量声明语句

//  module.js
export var name = 'leon';
export const age = 18;
//  main.js
import {name, age} from './module.js';
console.log(name, age)  //leon 18

上面例子等同于

//  module.js
var name = 'leon'
const age = 18
export {name, age}
//  main.js
import {name, age} from './module.js';
console.log(name, age)  //leon 18

注意如下会报错

// module.js
var name = 'leon'
export name
// 报错，export后面不能直接使用变量名
// main.js
import name from './module.js';
// 报错

可以理解为import本质上输入的是export对象，name是挂载在export下的一个属性，引入{name}则表示从export对象中读取name属性。
除了分别引入还可以整体引入：

//  main.js
import * as person from './a'
console.log(person.name, person.age);   //  leon 18
//这种写法表示以person变量名接收export输出的{name,age}集合*

export后面跟default关键字

//  module.js
var name = 'leon'
const age = 18
export default {
    name,
    age
}
//  module2.js
function setGender(gender,person) {
    person.gender = gender
}
export default setGender
//  main.js
import person from './module'
import setGender from './module2'
setGender('male', person);
console.log(person) // {name: leon, age: 18, gender: 'male'}

可以理解为将{name, age}对象挂载到default，引入时会默认引入export对象下的default属性，所以person能接收到default这个对象。

Q: 为什么不加default关键字就必须要使用 import {name, age} from ''呢？

A: 因为没有关键字default时,输出export对象就是{name, age}对象，那么引入的时候必须这么引。否则import name from ''时会去export的default属性下去找name，真实并没有，所以会报错

注意，不加default关键字时直接{}引入变量名必须与模块中输出的一致，如果想更换，可以使用as语法

//module.js
var name = 'leon'
const age = 18
export {name, age}
//main.js
import {name as n, age as a} from './module';
console.log(n, a);  // leon 18

或者

//module.js
var name = 'leon'
const age = 18
export {
    name as n,
    age as a
}
//  main.js
import {n, a} from './module'
console.log(n, a);  // leon 18