這篇文章主要介紹了es6支不支持import的相關(guān)知識，內(nèi)容詳細(xì)易懂，操作簡單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇es6支不支持import文章都會有所收獲，下面我們一起來看看吧。

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

es6支持import。import語句用于導(dǎo)入由另一個(gè)模塊導(dǎo)出的綁定，語法“import defaultExport from "module-name";”；無論是否聲明了strict mode，導(dǎo)入的模塊都運(yùn)行在嚴(yán)格模式下。import不光是一個(gè)關(guān)鍵字，同時(shí)也是一個(gè)函數(shù)，函數(shù)的參數(shù)是需要導(dǎo)入模塊的路徑，函數(shù)返回一個(gè)promise對象。

當(dāng)模塊化的概念越來越重要的時(shí)候，在es6中，引入了模塊的語法：import ，下面我們簡單了解一下，import是怎么使用的。

1、export

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

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

在import 一個(gè)文件的時(shí)候，會獲取這個(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)容，都會添加到文件對象中，可以簡單的先理解為深拷貝。

2、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)容完全一致。

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

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

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

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

4、import

在上面的例子中，我們明白了模塊對外暴露的都是什么東西，那么我們?nèi)绾蝸硎褂梦募ν獗┞兜臇|西呢？
首先我們已經(jīng)明白，文件對象是什么。

4.1導(dǎo)出整個(gè)文件對象

那么首先，我們就導(dǎo)出整個(gè)文件對象，看一看是什么樣子的。就是上面例子中，我們使用到的語法，import * 來導(dǎo)出文件模塊的所有接口，as m_name 來指定一個(gè)命名空間對象。
main.js ：

import * as m1 from "./m1.js"
console.log(m1)

示例中的m1 命名空間對象，可以訪問到文件對象的所有對外接口，包括export，和export default。

4.2 導(dǎo)出export的部分接口

在實(shí)際開發(fā)中，我們并不需要導(dǎo)出所有的接口。例如在vue項(xiàng)目中，使用某個(gè)組件庫中的某個(gè)組件，我們只需要引入這一個(gè)組件，不必要引入所有組件。

我們知道，import 導(dǎo)出的是整個(gè)文件對象，那么我們直接在 import 語句中，對這個(gè)對象進(jìn)行解構(gòu)，就可以獲得其中某一部分接口：
main.js :

import {f1，b} from "./m1.js"
console.log(f1)
console.log(b)

打印結(jié)果，就是：

但是這種方式，僅限于獲取文件對象的正常屬性，default屬性是獲取不到的，原因有兩個(gè)：

• 未解構(gòu)的對象全部進(jìn)行了丟棄

• default是關(guān)鍵字，不能再解構(gòu)中當(dāng)做變量進(jìn)行使用

4.3 導(dǎo)入export default 的接口

export default是文件的默認(rèn)導(dǎo)入，其實(shí)這句話的重點(diǎn)，并不在于 export default，而是在于 import 語句是如何處理文件默認(rèn)導(dǎo)入的。
修改main.js 文件內(nèi)容為：

import d from "./m1.js"
console.log(d)

打印出來，驚奇的發(fā)現(xiàn)，d 竟然和 export default 的內(nèi)容一樣。

所以，現(xiàn)在可以這么理解，所謂的默認(rèn)導(dǎo)入，就是毫無花哨的直接導(dǎo)入一個(gè)模塊，然后賦值給一個(gè)命名空間，這種時(shí)候，這個(gè)命名空間，持有的就是 文件對象的default 對象，也就是export default 出來的東西。

其實(shí)，默認(rèn)導(dǎo)入可以理解為也是解構(gòu)的一個(gè)語法糖（僅僅用作理解，實(shí)際是語法錯(cuò)誤的）:

import d from "./m1.js"  可以等價(jià)為 import {default as d} from "./m1.js"

5、import動(dòng)態(tài)導(dǎo)入

還有一種高端的玩法，在項(xiàng)目中也是很有用處的。

import不光是一個(gè)關(guān)鍵字，同時(shí)也是一個(gè)函數(shù)，函數(shù)的參數(shù)是需要導(dǎo)入模塊的路徑，函數(shù)返回一個(gè)promise對象。

import("./m1.js").then(m=>{
 console.log('then:',m)
})

在這段代碼中，then中回調(diào)的m，就是文件模塊的整個(gè)文件對象（包括export和export default）。

6、import不導(dǎo)入文件對象

import還可以不導(dǎo)入文件對象，僅僅是使用文件模塊提供的功能。也就是傳說中的，import將文件模塊僅僅最為副作用進(jìn)行導(dǎo)入，而不獲取文件模塊的接口。

在項(xiàng)目中，實(shí)踐的地方，例如一個(gè)vue項(xiàng)目，我們需要給vue對象掛載很多東西，但是全部寫在src/main.js 文件中，又會顯得特別啰嗦，不利于維護(hù)，也沒能體現(xiàn)工程化的理念。所以我們常常單獨(dú)新建一個(gè)文件lib/init.js ,然后在這個(gè) init.js 文件中，編寫相關(guān)邏輯。這個(gè)文件的作用，僅僅是執(zhí)行一遍，我們不期望這個(gè)文件暴露什么變量，所以沒必要獲取文件對象。那么這個(gè)時(shí)候，import 關(guān)鍵字的另一個(gè)作用就體現(xiàn)出來了：
main.js ：

import './lib/init.js';

使用import直接引用一個(gè)文件時(shí)，會執(zhí)行一遍這個(gè)文件，而不獲取任何文件對象。

關(guān)于“es6支不支持import”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“es6支不支持import”知識都有一定的了解，大家如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

文章標(biāo)題：es6支不支持import
網(wǎng)頁路徑：http://biofuelwatch.net/article/piodhg.html