es6支不支持import

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

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

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

1、export

一個js文件，可以理解成一個模塊，這個模塊可以被任意其他的模塊引入，引入的結果，就是對這個模塊進行執行后，所持有的對象。那么隨之而來就有一個問題，文件模塊被引入后，所有的東西，都是在自己的作用域中，主動發起引入行為的那個文件，雖然獲取到了被引入的對象，但是并不能訪問作用域里的東西，所以提供了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 導出的內容，都會添加到文件對象中，可以簡單的先理解為深拷貝。

2、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導出的內容完全一致。

3、文件導出的總結

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

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

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

4、import

在上面的例子中，我們明白了模塊對外暴露的都是什么東西，那么我們如何來使用文件對外暴露的東西呢？
首先我們已經明白，文件對象是什么。

4.1導出整個文件對象

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

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

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

4.2 導出export的部分接口

在實際開發中，我們并不需要導出所有的接口。例如在vue項目中，使用某個組件庫中的某個組件，我們只需要引入這一個組件，不必要引入所有組件。

我們知道，import 導出的是整個文件對象，那么我們直接在 import 語句中，對這個對象進行解構，就可以獲得其中某一部分接口：
main.js :

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

打印結果，就是：

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

• 未解構的對象全部進行了丟棄

• default是關鍵字，不能再解構中當做變量進行使用

4.3 導入export default 的接口

export default是文件的默認導入，其實這句話的重點，并不在于 export default，而是在于 import 語句是如何處理文件默認導入的。
修改main.js 文件內容為：

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

打印出來，驚奇的發現，d 竟然和 export default 的內容一樣。

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

其實，默認導入可以理解為也是解構的一個語法糖（僅僅用作理解，實際是語法錯誤的）:

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

5、import動態導入

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

import不光是一個關鍵字，同時也是一個函數，函數的參數是需要導入模塊的路徑，函數返回一個promise對象。

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

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

6、import不導入文件對象

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

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

import './lib/init.js';

使用import直接引用一個文件時，會執行一遍這個文件，而不獲取任何文件對象。

關于“es6支不支持import”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“es6支不支持import”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。