阅读 635

一篇文章带你看懂export、export default 命令差异

前言

ES6的精髓之一就是它的模块(module)体系,在使用 module 时,我们总会和 export 以及 export default 打交道,本文将给大家介绍这2点的差异点,以供大家学习。

原文戳我

1.exports default 后面不能跟变量声明语句, export 后面可以跟变量申明语句。

本质上,export default就是输出一个叫做default的变量或方法,然后系统允许你为它取任意名字。正是因为export default命令其实只是输出一个叫做default的变量,所以它后面不能跟变量声明语句。接下来,我们可以实践下。

  • 首先看看 export 的执行情况:

    export let test1 = 'test1';
    复制代码
    import {test1} from "./index";
    console.log(test1);
    复制代码

    上述代码的执行结果如下:

    // test1 
    复制代码
  • 接下来,我们来看看export default 的执行情况

    export default let test1 = 'test1'
    复制代码
    import test1 from "./index";
    console.log(test1);
    复制代码

    上述代码的执行结果如下:

    // 报错。
    复制代码

2.使用export, import 需要加大括号(* 除外), export default 则不需要。

3.export default 在一个模块里只能有一个,但是export可以有多个

  • 首先看看 export 的执行情况:

    let test1 = 'test1'
    let test2 = 'test2'
    export {
    test1,
    test2
    }
    复制代码
    import {test1, test2}  from "./index";
    console.log(test1, test2);
    复制代码

    上述代码的执行结果如下:

    // test1 test2
    复制代码
  • 接下来看看export default 的执行情况

    let test1 = 'test1'
    let test2 = 'test2'
    export default test1
    export default test2
    
    复制代码
    import test1, test2 from "./index";
    console.log(test1, test2);
    复制代码

    上述代码的执行结果如下:

    // 报错
    复制代码

4.通过export导出的属性或者方法可以修改,通过export default 导出的基本类型不可修改

  • 首先看看 export 的执行情况:

    let test1 = 'test1'
    let test2 = {
    	a: '1'
    }
    export  {
    	test1,
    	test2
    }
    test1 = 'test1 modify'
    test2.a = '1 modify'
    
    复制代码
    import {test1, test2} from "./index";
    console.log(test1, test2);
    复制代码

    上述代码的执行结果如下:

    test1 modify {a: "1 modify"}
    复制代码
  • 接下来看看export default 的执行情况

    let test1 = 'test1'
    export default test1
    test1 = 'test1 modify'
    复制代码
    import test1  from "./index";
    console.log(test1);
    复制代码

    上述代码的执行结果如下:

    // test1
    复制代码

    上述代码证明export导出的属性或者方法可以修改,无论是基本类型,还是引用类型。

    let test1 = {
    	a: 'test1'
    }
    export default test1
    test1.a = 'test1 modify'
    
    复制代码
    import test1  from "./index";
    console.log(test1);
    复制代码

    上述代码的执行结果如下:

    {a: "test1 modify"}
    复制代码

    上述代码证明export default导出的属性或者方法部分可以修改,其中,基本类型无法修改