Eexport & Import

Eexport

• export关键字，可以导出变量、函数、类给其他模块。

变量导出

• 直接导出
• 先定义，后导出
• 重命名导出

// 导出变量--写法1
export let name = 'Peter';

// 导出变量--写法2：先定义，再导出
let name1 = "Peter";
export { name1 };

// 导出变量--写法3：重命名
let name2 = "Peter";
export { name2 as PersonName }; // 这里export时记得加花括号，不加则会报错。

导出函数

• 直接导出
• 先定义，后导出
• 重命名导出

// 导出函数--写法1
export function sum1(a, b) {
  return a + b;
}

// 导出函数--写法2：先定义、再导出
function sum2(a, b) {
  return a + b;
}
export { sum2 };

// 导出函数--写法3：重命名
function sum3(a, b) {
  return a + b;
}
export { sum3 as add };

导出类

• 直接导出
• 先定义，后导出
• 重命名导出

// 导出类--写法1
export class Person1 {
  constructor(name) {
      this.name = name;
  }
  hello() {
      console.log('hello' + this.name)
  }
}

// 导出类--写法2：先定义、再导出
class Person2 {
  constructor(name) {
      this.name = name;
  }
  hello() {
      console.log('hello' + this.name)
  }
}
export { Person }

// 导出类--写法3：重命名
class Person3 {
  constructor(name) {
      this.name = name;
  }
  hello() {
      console.log('hello' + this.name)
  }
}
export { Person3 as HelloPerson }

default

• default关键字，为模块指定默认导出

// 导出变量--写法4：导出默认值1
let name = "Peter";
export default name;

// 导出变量--写法5：导出默认值2
let name = "Peter";
export { name as default };

// 导出函数--写法4:导出默认值1
function sum(a, b) {
    return a + b;
}
export default sum;

// 导出函数--写法5:导出默认值2
function sum(a, b) {
    return a + b;
}
export { sum as default };

// 导出类--写法4：导出默认值1
class Person {
    constructor(name) {
        this.name = name;
    }
    hello() {
        console.log('hello' + this.name)
    }
}
export default Person

// 导出类--写法5：导出默认值2
class Person {
    constructor(name) {
        this.name = name;
    }
    hello() {
        console.log('hello' + this.name)
    }
}
export { Person as default }

• 只能为每个模块设置一个默认的导出值，多次使用default则会报错。

// 导出多个default
// SyntaxError: duplicate export name 'default'

let name = "Peter";
let age = 25;
export default name;
export default age;

• export default后面不能加声明语句，因为export default只是输出一个叫做default的变量;

export default let name = "Peter"; // 报错

import

• 导入的基本语法、导入时重命名

• 导入默认值

  • 导入默认值时不需要加“{}”，可以指定任意名字。

• 同时import默认值和非默认值

  • import 默认值的本地名称,{非默认值} from ‘xxx.js’;

  • import {非默认值},默认值的本地名称 from ‘xxx.js’; // 会报错

    // 报错：SyntaxError: missing keyword 'from' after import clause
    import {name},sum from './export.js';
    console.log(sum(1, 2)) // 3
    console.log(name) // Peter
    

• 重新导出模块已经导入的内容

  // 导出默认值、非默认值
  let name = "Peter"
  let age = 25;
  function sum(a, b) {
  return a + b;
  }
  
  export { name, age }
  export default sum;
  
  // 先导入后导出模块
  import { default as add, name, age } from './export.js';
  export { name, age, add }
  
  // 简写
  
  export { default as add, name, age } from './export.js';
  
  // 导出另一个模块中的所有值
  export * from './export.js';
  

// 导入单个绑定
import { name } from "./export.js";
console.log(name) // Peter

// 导入多个绑定
import { name, age } from "./export.js";
console.log(name, age) // Peter 25

// 导入整个模块
import * as test from "./export.js";
console.log(test.name, test.age) // Peter 25

// 导入时重命名
import { name as personName} from "./export.js";
console.log(personName) // Peter

// 导出默认值
let name = "Peter";
export default name;

// 导入默认值
import lalala from "./export.js";
console.log(lalala) // Peter

// 同时import默认值和非默认值

// 导出默认值、非默认值
let name = "Peter"
function sum(a, b) {
    return a + b;
}
export default sum;
export { name }

// import默认值,{非默认值}，这种写法要注意默认值和非默认的先后顺序
import sum, { name } from './export.js';
console.log(sum(1, 2)) // 3
console.log(name) // Peter

// import写法二：重命名默认值，这种写法不用在意默认值和非默认值的先后顺序
import { default as add, name } from './export.js';
console.log(add(1, 2)) // 3
console.log(name) // Peter

Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.https://serious-lose.notion.site/JS-Eexport-Import-af168e05aabe4e68bd635977647a07de