天天看點

export,import,export default的用法和差別

ES6子產品主要有兩個功能:export和import

export:用于對外輸出本子產品(一個檔案可以了解為一個子產品)變量的接口

import:用于在一個子產品中加載另一個含有export接口的子產品。

export,import,export default的用法和差別

// a.js
var sex="boy";
var echo=function(value){
  console.log(value)
}

export {sex,echo} 

//通過向大括号中添加sex,echo變量并且export輸出,就可以将對應變量值以sex、echo變量辨別符形式暴露給其他檔案而被讀取到

//不能寫成export sex這樣的方式,如果這樣就相當于export "boy",外部檔案就擷取不到該檔案的内部變量sex的值,因為沒有對外輸出變量接口,隻是輸出的字元串。



// b.js

通過import擷取a.js檔案的内部變量,{}括号内的變量來自于a.js檔案export出的變量辨別符。

import {sex,echo} from "./a.js"

console.log(sex) // boy

echo(sex) // boy


      

使用方法

1、

//demo1.js
export const str = 'hello world'

export function f(a){
    return a+1
}      

導入方式:

//demo2.js
import { str, f } from 'demo1' //也可以分開寫兩次,導入的時候帶花括号      

2、

//demo1.js
export default const str = 'hello world'      
//demo2.js
import str from 'demo1' //導入的時候沒有花括号      
export,import,export default的用法和差別
注意:

1、export default 向外暴露的成員,可以使用任意變量來接收

2、在一個子產品中,export default 隻允許向外暴露一次

3、在一個子產品中,可以同時使用export default 和export 向外暴露成員

4、使用export向外暴露的成員,隻能使用{  }的形式來接收,這種形式,叫做【按需導出】

5、export可以向外暴露多個成員,同時,如果某些成員,在import導入時,不需要,可以不在{ }中定義

6、使用export導出的成員,必須嚴格按照導出時候的名稱,來使用{ }按需接收

7、使用export導出的成員,如果想換個變量名稱接收,可以使用as來起别名