export default 和export的区别？

export default 和export的区别？

   export命令，为模块指定默认输出。
   一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。

下面demo说明使用：

这是一个js文件1:
      
      写法一:（推荐）
        const name = "许清源";
        const getData = ((a) => {
            a = '11';
            return a
        })
        const Obj = {
            aa: '001',
            bb: '002'
        }
        export {name,getData,Obj }

      写法二:
        export const name = "许清源";
        export const getData = ((a) => {
            a = '11';
            return a
        })
        export const Obj = {
            aa: '001',
            bb: '002'
        }
       

在js文件2中使用import引入:
       写法一:（推荐）     优点:没必要像写法二那样必须需要知道js1文件中定义的那些变量，方法，对象

          1.总体全部引入使用as表示允许你为它取任意名字；
              import * as allDefineData from '.js1'
              console.log( allDefineData.name,  ( allDefineData.getData )(),  allDefineData.Obj )

          2.单个引入需要添加 { }
              import { Obj as NewObj } from '.js1'
              console.log( NewObj.aa , NewObj.bb )


       写法二:(常规引入)； 缺点:引入之前需要知道js1文件中定义的那些变量，方法，对象
              import { name, getData, Obj } from '.js1'
              console.log( name,  getData(),  Obj )

    export default命令，为模块指定默认输出。
    为了给用户提供方便，让他们不用阅读文档就能加载模块，就要用到export default命令，为模块指定默认输出。

下面demo说明使用：

这是一个js文件1:
      
      写法:
        export default  {
            age: '25',
            get(a = 1) { 
                return a
            },
            arr: [1,2,3,4,5]
        }

      
       

在js文件2中使用import引入:
       写法一:（推荐）    
              import List from './js1';
              console.log( List.age,  ( List.get )(),  List.arr )

          
       写法二: 
              import { default as List }  from '.js1'
              console.log( List )


       写法三: 
              import * as List  from '.js1'
              console.log( List )

简单总结：

export命令对外接口是有名称的且import命令从模块导入的变量名与被导入模块对外接口的名称相同，而export default命令对外输出的变量名可以是任意的，这时import命令后面，不使用大括号。

export default命令用于指定模块的默认输出。显然，一个模块只能有一个默认输出，因此export default命令只能使用一次。所以，import命令后面才不用加大括号，因为只可能唯一对应export default命令。

标签：区别,default,List,export,js1,模块,import
来源： https://www.cnblogs.com/xqy183011/p/16055957.html