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

創(chuàng)新互聯(lián)建站專注于運(yùn)城企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站設(shè)計(jì),電子商務(wù)商城網(wǎng)站建設(shè)。運(yùn)城網(wǎng)站建設(shè)公司,為運(yùn)城等地區(qū)提供建站服務(wù)。全流程按需網(wǎng)站制作，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)建站專業(yè)和態(tài)度為您提供的服務(wù)

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

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

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

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

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

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

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

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

在import 一個(gè)文件的時(shí)候，會(huì)獲取這個(gè)文件對(duì)象，默認(rèn)是空對(duì)象，代表我們不能訪問(wèn)文件的東西。使用export，來(lái)給這個(gè)對(duì)象添加內(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 的寫(xiě)法，后面再說(shuō)明
import * as m1 from "./m1.js"
console.log(m1)

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

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

export default

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

其實(shí)這個(gè)問(wèn)題很簡(jiǎn)單，我們先拋開(kāi) import ，不考慮import 的語(yǔ)法，僅考慮 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ù)查看打印出來(lái)的文件對(duì)象：

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

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

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

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

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

export暴露的三種方式

1、分別暴露

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

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

2、統(tǒng)一暴露

//將需要暴露方法寫(xiě)在export對(duì)象內(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ì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。