es6 export如何用

今天小編給大家分享一下es6 export如何用的相關(guān)知識點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

在es6中，export的用于在JavaScript模塊中導(dǎo)出函數(shù)、原始值、對象，以便其他程序可以通過import語句使用它們；export導(dǎo)出的內(nèi)容，都會(huì)添加到文件對象中，可以簡單的先理解為深拷貝。export default的作用，是給文件對象的default屬性，添加值。

本教程操作環(huán)境：windows7系統(tǒng)、ECMAScript 6版、Dell G3電腦。

export 用于在JavaScript模塊中導(dǎo)出函數(shù)，原始值，對象；即導(dǎo)出模塊。

export命令用于規(guī)定模塊的對外接口

一個(gè)獨(dú)立的 JS 文件就是一個(gè)模塊。

一個(gè)js文件，可以理解成一個(gè)模塊，這個(gè)模塊可以被任意其他的模塊引入，引入的結(jié)果，就是對這個(gè)模塊進(jìn)行執(zhí)行后，所持有的對象。那么隨之而來就有一個(gè)問題，文件模塊被引入后，所有的東西，都是在自己的作用域中，主動(dòng)發(fā)起引入行為的那個(gè)文件，雖然獲取到了被引入的對象，但是并不能訪問作用域里的東西，所以提供了export，來決定一個(gè)模塊對外暴露什么東西。

如果希望外部能夠讀取模塊內(nèi)部的某個(gè)變量/函數(shù)/類，就必須使用 export 關(guān)鍵字輸出該變量/函數(shù)/類。

export的作用，就是用于從模塊中導(dǎo)出函數(shù)、對象或原始值，以便其他程序可以通過 import 語句使用它們.

在import 一個(gè)文件的時(shí)候，會(huì)獲取這個(gè)文件對象，默認(rèn)是空對象，代表我們不能訪問文件的東西。使用export，來給這個(gè)對象添加內(nèi)容

用法：

module1.js :

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

在main.js 中進(jìn)行引入

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

在這個(gè)文件中，我們對外暴露了 一個(gè)函數(shù)，一個(gè)變量，一個(gè)對象。所以，在使用 import 導(dǎo)入的文件對象，就不在是一個(gè)空對象，而是包含了export 內(nèi)容的對象，所以，我們打印出m1.js 文件對象，也就是 m1 ：

所以，我們知道，export 導(dǎo)出的內(nèi)容，都會(huì)添加到文件對象中，可以簡單的先理解為深拷貝。

export default

很多初學(xué)者很困惑，既然有了 export ，為什么還要有個(gè) export default 呢？網(wǎng)上給出的答案往往是，作為文件的默認(rèn)導(dǎo)出接口。那什么又是文件的默認(rèn)導(dǎo)出接口呢？

其實(shí)這個(gè)問題很簡單，我們先拋開 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不變，在執(zhí)行一遍，繼續(xù)查看打印出來的文件對象：

發(fā)現(xiàn)了嗎，export default 的作用，是給文件對象，添加一個(gè) default屬性，default屬性的值也是一個(gè)對象，且和export default導(dǎo)出的內(nèi)容完全一致。

文件導(dǎo)出的總結(jié)

那么到這里，我們明白了，一個(gè)js文件被當(dāng)做一個(gè)模塊引入，會(huì)暴露為一個(gè)對象（也就是被導(dǎo)入后，可以當(dāng)做一個(gè)對象來操作）。

export的作用，是在這個(gè)文件對象中添加屬性，export出來的東西，全部會(huì)添加到文件對象中。

export default 的作用，是給文件對象的 default 屬性，添加值。

export暴露的三種方式

1、分別暴露

//這是我個(gè)人的export.js 文件
export let obj={
    name:"導(dǎo)出"
}

export const fuc=()=>{
    console.log('導(dǎo)出')
}

2、統(tǒng)一暴露

//將需要暴露方法寫在export對象內(nèi)
 let obj={
    name:"導(dǎo)出"
}

 const fuc=()=>{
    console.log('導(dǎo)出')
}
export{
    obj,
    fuc,
}

3、默認(rèn)暴露

export default{
    obj={
        name:"導(dǎo)出"
    },
    fuc:function(){
        console.log('導(dǎo)出')
    }
}

注：通用引入方式調(diào)用時(shí)需加default屬性

//這里是通用引用方式
import * as ex from './js/export.js' //個(gè)人文件夾
console.log(ex.default.obj.name) //導(dǎo)出

以上就是“es6 export如何用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識，如果還想學(xué)習(xí)更多的知識，請關(guān)注億速云行業(yè)資訊頻道。