首頁 web前端 js教程 JavaScript中import怎麼使用?

JavaScript中import怎麼使用?

Jan 19, 2019 pm 05:00 PM
import

在ES6中,可以透過模組化來管理JavaScript中import怎麼使用?物件。進行模組化的話,除了能進行功能的再利用以外,能夠提高可維護性。

JavaScript中import怎麼使用?

import是用來將某個模組中匯出的函數或物件、初始值匯入到另一個模組中的語法。

如下

import {模块名称} from "需要导入模块的路径名"
登入後複製

如何使用import?

該模組有default模組和named(命名)模組。

我們先載入default export的模組和named export的模組

import {ModuleA, ModuleB} from "modules"; 
import Default from 'modules2';
登入後複製

在第一行中,我們從modules這個檔案匯入名為Module A和Module B的這兩個named模組。

在第二行中,我們從modules 2這個檔案中導入default模組。

執行模組export

要將函數,對象,原始值匯出為模組,需要使用export。

我們來看具體範例

將其匯出為預設模組

// alert.js
export default function () {
    alert("default module called!");
};
登入後複製

命名匯出

// utils.js
export function sum(x, y, z) {
    return x+y+z;
}
 
export function multiply(x, y) {
    return x*y;
}
登入後複製

我們能夠匯出名為sum和multiply的模組。

可以透過以下呼叫來使用該函數

import { sum, multiply } from 'utils'; 
console.log(sum(1, 2, 3));
console.log(multiply(5, 8));
登入後複製

執行結果如下

->6
->40
登入後複製

本篇文章到這裡就全部結束了,更多精彩內容大家可以關注php中文網的其他相關欄位教學! ! !

以上是JavaScript中import怎麼使用?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

Python 的 import 是怎麼運作的? Python 的 import 是怎麼運作的? May 15, 2023 pm 08:13 PM

你好,我是somenzz,可以叫我徵哥。 Python的import是非常直覺的,但即使這樣,有時你會發現,明明套件就在那裡,我們仍會遇到ModuleNotFoundError,明明相對路徑非常正確,就是報錯ImportError:attemptedrelativeimportwithnoknownparentpackage導入同一個目錄的模組和不同的目錄的模組是完全不同的,本文透過分析使用import經常遇到的一些問題,來幫助你輕鬆搞定import,據此,你可以輕鬆創建屬

link和import的區別細說:分析它們有何不同? link和import的區別細說:分析它們有何不同? Jan 06, 2024 am 08:19 AM

深入解析:link與import的差別是什麼?在開發網頁或應用程式時,我們經常需要引入外部的CSS檔案或JavaScript庫來增強或自訂我們的程式碼。在這個過程中,link和import是兩種常用的方法。雖然它們的目的都是引入外部資源,但在具體的使用上有一些差異。語法與位置:link:使用link標籤將外部資源連結到HTML檔案中,通常位於HTML文件的頭

link標籤和import有什麼差別 link標籤和import有什麼差別 Aug 28, 2023 am 11:19 AM

link標籤和import的差異有語法和用途、功能和特性、載入時機、相容性和支援等。詳細介紹:1、語法和用途,link標籤是HTML標籤,用於在HTML文件中引入外部資源,如CSS樣式表、JavaScript腳本、圖示等,import是ES6中的模組導入語法,用於在JavaScript文件中引入外部模組;2、功能和特性,link標籤可以引入多種資源,如CSS樣式表、圖示等等。

如何解決import包時報Java套件不存在的問題 如何解決import包時報Java套件不存在的問題 Apr 19, 2023 am 10:22 AM

網路上有很多解決方式,我想到的都匯總起來了,方便以後查看,你可能採用其中一種就能解決問題,我是用了最後一種才解決。如果你要導入的包在Libraries下都本身一直沒有存在,你這時就得看看pom裡對應的依賴寫的有沒有問題,名字版本什麼的在使用的倉庫中有沒有對應的jar包,如果確定沒有問題,那麼再嘗試採取以下的前幾種方式解決。 1.執行Maven->reloadproject作用:重新匯入Maven包2種方式:1.選擇Project目錄右鍵->Maven->reloadproject2

淺析node中怎麼使用import語法 淺析node中怎麼使用import語法 Mar 21, 2023 pm 06:53 PM

node.js支援import語法,很簡單一個知識點,但卻能提醒我們從知識迷思裡走出來,多關注外邊的知識世界,不斷打開自己的知識邊界。

使用link和import有什麼差別 使用link和import有什麼差別 Sep 18, 2023 pm 02:30 PM

使用link和import的差異在功能、用途、引入方式、相容性和適用場景等。詳細介紹:1、link標籤用於引入外部樣式表,它可以將外部樣式表與HTML文件關聯起來,從而控製文件的樣式和佈局,link標籤可以在HTML文件的head部分或body部分中使用;2 、import標籤用於引入外部HTML文檔,它可以將一個HTML文檔嵌入到另一個HTML文檔中,模組化和重複使用等等。

比較link和import:它們有哪些差異? 比較link和import:它們有哪些差異? Jan 06, 2024 pm 08:23 PM

link與import之爭:它們有何不同之處?在開發和程式設計中,我們經常需要與其他文件或模組進行互動。為了實現這種交互,連結(linking)和導入(importing)是兩種常用的方式。然而,許多人可能不清楚link和import有什麼不同之處以及何時使用它們。本文將詳細介紹link和import的區別,並提供程式碼範例。首先,我們來了解link的概念。連結

import和link有哪些差別 import和link有哪些差別 Nov 24, 2023 pm 02:15 PM

import和link之間的區別:1、用途和語意;2、載入方式;3、相容性;4、連結多個樣式表;5、媒體類型;6、動態性;7、錯誤處理;8、嵌套;9、預設樣式;10、相容性考量;11、效能考量;12、使用場景。詳細介紹:1、用途和語義,link是HTML標籤,用於連結到外部的CSS檔案或樣式表,它通常位於HTML文件的head部分,import是CSS的一部分等等。

See all articles