首頁 >web前端 >前端問答 >es6三種導入方法是什麼

es6三種導入方法是什麼

青灯夜游
青灯夜游原創
2022-05-19 17:59:252462瀏覽

方法:1、把一個檔案中export的所有變量,包裝成一個對象,用「import * as from "模組"」語句導入;2、用「import 隨意命名from "模組"」語句;3、用「import {指定名字} from "模組"」語句。

es6三種導入方法是什麼

本教學操作環境:windows7系統、ECMAScript 6版、Dell G3電腦。

es6 import三種導入方法

#import 隨意命名from "模組標識符"  

#只有在模組中有預設導出的export default語法時才會生效

// A.js
export default 20
// B.js
import A from './A'
上面的代码生效的前提是,只有在A.js中有默认导出的export default语法时才会生效。
这种不使用{}来引用模块的情况下,import模块的命名是随意的,即如下三种引用命名都是正确的:
//B.js
import A from './A'
import B from './A'
import Something from './A'
因为它总是会解析到A.js中默认的export default

import {指定名字} from "模組識別碼"  

#只有在模組中有命名導出為指定名字的export name的程式碼時才會生效

//A.js
export const A = 21
//B.js
import { A } from './A'

代码生效的前提是,只有在模块A.js中有如下命名导出为A的export name的代码,
而且,在明确声明了命名导出后,那么在另一个js中使用{}引用模块时,import时的模块命名是有意义的,如下:
// B.js
import { A } from './A'                 // 正确,因为A.js中有命名为A的export
import { B } from './A'                 // 错误!因为A.js中没有命名为B的export

import * as from "模組識別碼"  (包裝成對象)

把一個檔案中export的所有變量,包裝成一個物件。
例如:

export const sqrt1 = Math.sqrt;
export const sqrt2= Math.sqrt;



import * as sqrtobj from "....."
sqrtobj.sqrt1
sqrtobj.sqrt2

【相關推薦:javascript影片教學web前端

以上是es6三種導入方法是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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