es6 export怎麼用

在es6中，export的用於在JavaScript模組中導出函數、原始值、對象，以便其他程式可以透過import語句使用它們；export導出的內容，都會添加到文件對像中，可以簡單的先理解為深拷貝。 export default的作用，是給檔案物件的default屬性，新增值。

本教學操作環境：windows7系統、ECMAScript 6版、Dell G3電腦。

export 用於在JavaScript模組中匯出函數，原始值，物件；即導出模組。

export指令用來規定模組的對外介面

#一個獨立的 JS 檔案就是一個模組。

一個js文件，可以理解成一個模組，這個模組可以被任意其他的模組引入，引入的結果，就是對這個模組進行執行後，所持有的物件。那麼隨之而來就有一個問題，文件模組被引入後，所有的東西，都是在自己的作用域中，主動發起引入行為的那個文件，雖然獲取到了被引入的對象，但是並不能訪問作用域裡的東西，所以提供了export，來決定一個模組對外暴露什麼東西。

如果希望外部能夠讀取模組內部的某個變數/函數/類，就必須使用 export 關鍵字輸出該變數/函數/類。

export的作用，就是用於從模組中導出函數、物件或原始值，以便其他程式可以透過import 語句使用它們.

在import 一個檔案的時候，會取得這個文件對象，預設是空對象，代表我們不能存取文件的東西。使用export，來為這個物件加入內容

用法：

module1.js :

function f1 (){
    console.log("module - 1 : functino 1")
}
let b = {
    name:"test_obj"
}
let str = "hell绿绿绿"
export {
    f1,b,str
}

在main.js 中進行引入

// 先忽略 import 的写法，后面再说明
import * as m1 from "./m1.js"
console.log(m1)

在這個檔案中，我們對外暴露了一個函數，一個變量，一個物件。所以，在使用import 導入的文件對象，就不是空對象，而是包含了export 內容的對象，所以，我們印出m1.js 文件對象，也就是 m1 ：

#所以，我們知道，export 匯出的內容，都會加入到文件物件中，可以簡單的先理解為深拷貝。

export default

很多初學者很困惑，既然有了 export ，為什麼還要有個 export default 呢？網路上給出的答案往往是，作為文件的預設導出介面。那什麼又是文件的預設導出介面呢？

其實這個問題很簡單，我們先拋開 import ，不考慮import 的語法，只考慮 export default具體做了什麼。
修改 module1.js :

function f1 (){
    console.log("module - 1 : functino 1")
}
let b = {
    name:"test_obj"
}
let str = "hell绿绿绿"
export {
    f1,b,str
}
export default{
    name:"default"
}

main.js不變，在執行一遍，繼續查看列印出來的檔案物件：

##發現了嗎，export default 的作用，是給文件對象，添加一個default屬性，default屬性的值也是一個對象，且和export default導出的內容完全一致。

檔案導出的總結

那麼到這裡，我們明白了，一個js檔案被當做一個模組引入，會暴露為一個物件（也就是被導入後，可以當作一個物件來操作）。

export的作用，就是在這個檔案物件中加入屬性，export出來的東西，全部都會加入到檔案物件中。

export default 的作用，是給檔案物件的 default 屬性，新增值。

export揭露的三種方式

1、分別揭露

//这是我个人的export.js 文件
export let obj={
    name:"导出"
}

export const fuc=()=>{
    console.log('导出')
}

2、統一曝光

//将需要暴露方法写在export对象内
 let obj={
    name:"导出"
}

 const fuc=()=>{
    console.log('导出')
}
export{
    obj,
    fuc,
}

3、預設暴露

export default{
    obj={
        name:"导出"
    },
    fuc:function(){
        console.log('导出')
    }
}

註：通用引入方式呼叫時需加default屬性

//这里是通用引用方式
import * as ex from './js/export.js' //个人文件夹
console.log(ex.default.obj.name) //导出

【相關推薦：

javascript視頻教程、程式設計視頻】

以上是es6 export怎麼用的詳細內容。更多資訊請關注PHP中文網其他相關文章！