• 3分钟带你搞懂ES6 import 和 export


    如下语句是 default import:

    // B.js
    import A from './A'

    且只在A存在 default export 时生效:

    // A.js
    export default 42

    这种情况下你用import语句, 随便取什么名字都没关系:

    // B.js
    import A from './A'
    import MyA from './A'
    import Something from './A'

    因为他最终解析的是A.js 的 default export.


    如下是命名为A的 import :

    import { A } from './A'

    它只在A.js存在 具名export 时起作用, 像这样:

    // A.js
    export const A = 42

    这种情况下指定命名是有必要的, 因为你要从A.js的 export 里 import 即引入特定东西:

    // B.js
    import { A } from './A'
    import { myA } from './A' // 无效!
    import { Something } from './A' // 无效!

    要使引入生效, 你需要添加对应的 具名export :

    // A.js
    export const A = 42
    export const myA = 43
    export const Something = 44

    每个 module 只能有一个  default export, 但可以有任意多个 具名export, 也可以将它们放在一起引用:

    // B.js
    import A, { myA, Something } from './A'

    可以看到这里我们引入了 default export 并命名为A, 引入 A.js 的 myA 和 Something 这两个具名export

    // A.js
    export default 42
    export const myA = 43
    export const Something = 44

    import时我们还可以用 as 语句为他们起个别名:

    // B.js
    import X, { myA as myX, Something as XSomething } from './A'
  • 相关阅读:
    Android学习笔记——启动Activity及Activity生命周期
    TransposonPSI——转座子分析的入门自学
    关于 GraPhlAn 的孤独自学
    Javascript 正则表达式 子表达式
    关于set,list,map的理解
    js关于日期的操作
    JDBC和JTA事务区别
    远程调试本地服务或程序
    Fragment的数据传递
    记录自己的第一篇博客
  • 原文地址:https://www.cnblogs.com/skura23/p/7364642.html
Copyright © 2020-2023  润新知