目录

  • 模块这里，先简简单单讲些语法吧

  • export、import

    • 导出单个变量
    • 导出多个变量
    • 导出数组
    • 整合导出
    • 默认导出
    • 导出函数
    • 导出对象
    • 导出类
    • 多变量多类导出
  • ES6-ES10学习幅员

模块这里，先简简单单讲些语法吧

export、import

应用export、import语法，记得要进行babel编译

导出单个变量

// A.jsexport const name = 'hello'// B.jsimport {name} from './A'console.log(name) // hello

导出多个变量

// A.jsexport const name = 'hello'export let addr = 'beijing'// B.jsimport { name, addr } from './A'console.log(name, addr)// hello beijing

导出数组

// A.jsexport const list = [1, 2, 3]// B.jsimport { list } from './A'console.log(list)// [1, 2, 3]

整合导出

// A.jsconst name = 'hello'let addr = 'beijing'const list = [1, 2, 3]export {    name,    addr,    list}// B.jsimport { name, addr, list } from './A'console.log(name, addr, list)// hello beijing [1, 2, 3]

默认导出

只能有一个默认导出，其余的都要放如对象前面去

// A.jsconst name = 'hello'let addr = 'beijing'const list = [1, 2, 3]export default nameexport {    addr,    list}// B.jsimport name, { addr, list } from './A'console.log(name, addr, list)// hello beijing [1, 2, 3]// C.js// 如果想要间接改名字，须要默认导出的变量才行import name2 from './A'console.log(name2)// hello// D.js// 不是默认导出的变量，批改名字就须要用asimport { addr as addr2 } from './A'console.log(addr2)// beijing

导出函数

// A.jsexport function say (content) {  console.log(content)}// B.jsimport {say} from './A'say("helloword")// helloword

导出对象

默认导出

// A.jsexport default  {  code: 1,  message: 'success'}// B.jsimport obj from './A'console.log(obj)

变量模式

// A.jsconst data = {    code: 1,    message: 'success'}const info = {    name: 'xm',    age: 16}export default {  data,  info}// B.jsimport { data, info } from './A' // 报错，引入抵触// 只能整体导入再结垢赋值import obj from './A'let { data, info } = objconsole.log(data, info)// {code: 1, message: "success"} {name: "xm", age: 16}

导出类

// A.jsclass Test {  constructor () {    this.id = 2  }}export {  Test}// B.jsimport {Test} from './A'let test = new Test()console.log(test.id) // 2

or

export class Test {  constructor () {    this.id = 4  }}

默认导出类

// A.jsclass Test {  constructor () {    this.id = 3  }}export default Test// B.jsimport Test from './A'let test = new Test()console.log(test.id)  // 3

or

export default class Test {  constructor () {    this.id = 4  }}

or

// 如果是default就不必写类名了，没有default必须写类名export default class {  constructor () {    this.id = 5  }}

多变量多类导出

// A.jsclass Test {  constructor () {    this.id = 3  }}class Ani {  constructor () {    this.name = 'animal'  }}export {  Test,  Ani}export default class People{  constructor () {    this.id = 123  }}// B.jsimport * as Mod from './A'let test = new Mod.Test()console.log(test.id) // 3let ani = new Mod.Ani()console.log(ani.name) // animal// 只能用default来获取默认的类，不能应用Peoplelet people = new Mod.default()console.log(people.id) // 123

ES6-ES10学习幅员