在上一篇文章中JavaScript中AMD和ES6模塊的導入導出對比，偏向于理論層面，還有一些同學在微信群里或是私下里針對一些問題進行了溝通，所以有了這一篇文章，對js的導入導出進行總結和實踐

當直接給 module.exports時，exports會失效

這個問題其實已經和導入導出沒什么關系了， 我們看一個知乎上的問題（詳細地址閱讀原文可以查看） 我們以此為突破點 js 數組賦值問題 ：值傳遞還是引用？

var a = [1,2,3]; var b = a; a = [4,5,6]; console.log(b); //=>[1,2,3] 復制代碼

繼續看

var a = [1,2,3]; var b = a; a.pop(); console.log(b); //=>[1,2] 復制代碼

為什么會出現這種情況？

數組和對象的賦值操作都是引用傳遞

看下這個（留意注釋部分）

var a = [1,2,3];// a指向了數組 [1,2,3]; var b = a;//b 指向 a 所指向的數組[1,2,3]; a = [4,5,6];//a 指向了新的數組 [4,5,6],(a的指向發生了變化，改變的是a引用本身，沒有改變數組對象,所以b沒有變) console.log(b); //b沒有改變，還是指向數組 [1,2,3]; 復制代碼

再看下這個（留意注釋部分）

var a = [1,2,3];// a指向了數組 [1,2,3]; var b = a;//b 指向 a 所指向的數組[1,2,3]; a.pop();// a 指向的數組實例發生了 pop 操作 console.log(b); //=>a和b都是指向同一個數組，a變量，所以b也變量，最后輸出=>[1,2] 復制代碼

看一張圖片，很形象的描述

數組如此，對象也是大同小異 看一個群友@ZSing提供的demo

var test = {"name": "zhangshuo" } var demo = test;demo.name = "want you" //你認為test是什么？ console.log(test)//=>{ name: 'want you' } 復制代碼

下面通過注釋解釋一下（如出一轍）

var test = { "name": "zhangshuo"}//test指向了一個對象 { "name": "zhangshuo"} var demo = test;//demo 指向 test 所指向的對象 { "name": "zhangshuo"} demo.name = "want you"//對象的屬性發生了改變 { "name": "want you"} //你認為test是什么？ console.log(test)//=>{ name: 'want you' } 復制代碼

test和demo指向了同一個對象，一個變了，就都變了 同樣的，我們對上面的demo做一下改造

var test = {"name": "zhangshuo" } var demo = test;test={"name": "更改了這個name"} demo.name = "want you" //你認為test是什么？ console.log(test)//=>{ name: '更改了這個name' } 復制代碼

還需要對此進行贅述嗎？ 還是通過注釋對此進行解釋說明

var test = { "name": "zhangshuo"}//test指向了一個對象 { "name": "zhangshuo"} var demo = test;//demo 指向 test 所指向的對象 { "name": "zhangshuo"}test={ "name": "更改了這個name" }//test的指向發生了變化，指向了一個新對象{ "name": "更改了這個name" } demo.name = "want you"//demo的指向沒有變，改變了原對象的屬性 { "name": "want you"} //你認為test是什么？ console.log(test)//=>{ name: '更改了這個name' } 復制代碼

我相信，上面的兩個栗子你已經看懂了，即將進入正題 先來一個過渡 再看一個栗子，用來模擬exports和 module.exports的關聯關系

let md = {exps:{}}//md指向一個對象 {exps:{}}let exps = md.exps//exps指向了md.exps所指向的對象 ,這個空對象{}md.exps = {a: 1, b: 2}//md.exps指向了一個新對象 {a: 1, b: 2}exps.c=3//exps,屬性賦值 {c: 3}console.log(md.exps); //新對象{ a: 1, b: 2 } 復制代碼

上面栗子中的md就是module，md.exps就是module.exports，exps就是exports 在每一個模塊的頭部都有一行這樣的命令

var exports = module.exports; 復制代碼

當直接給module.exports賦值時（module.exports={.....}），module.exports就指向了一個新對象,exports會失效

直接給exports賦值會切斷exports和 module.exports的關聯關系

還是這樣的一個前提

var exports = module.exports; 復制代碼

exports是來自于module，exports指向 module.exports所指向的對象 當直接給exports賦值，即

exports = {a:1} 復制代碼

exports指向了一個新對象，不再是 module.exports所指向的對象，所以不要給 exports 直接賦值（ exports =。。。）

實踐=>導出

exports

exports的output.js

exports.str='string字符串'//導出字符串 exports.bool=true//導出布爾 exports.num=123//導出number exports.foo=(r)=>{//導出函數console.log(`導出函數為：${r}`); } exports.arr=[1,2,3]//導出數組 exports.obj={ a:1, b:2}//導出對象 復制代碼

input.js

const iptObj= require('./output.js')console.log(iptObj.str);//=>string字符串console.log(iptObj.bool);//=>trueconsole.log(iptObj.num);//=>123console.log(iptObj.arr);//=>[ 1, 2, 3 ]console.log(iptObj.obj);//=>{ a: 1, b: 2 }iptObj.foo('參數')//=>導出函數為：參數 復制代碼

module.exports

module.exports的output.js

module.exports={str:'string字符串',bool:true,num:123,foo:(r)=>{console.log(`導出函數為：${r}`);},arr:[1,2,3],obj:{ a:1, b:2} } 復制代碼

input.js

const iptObj= require('./output.js')console.log(iptObj.str);//=>string字符串console.log(iptObj.bool);//=>trueconsole.log(iptObj.num);//=>123console.log(iptObj.arr);//=>[ 1, 2, 3 ]console.log(iptObj.obj);//=>{ a: 1, b: 2 }iptObj.foo('參數')//=>導出函數為：參數 復制代碼

module.exports的output.js同時支持如下寫法

module.exports.str='string字符串' module.exports.bool=true module.exports.num=123 module.exports.foo=(r)=>{console.log(`導出函數為：${r}`); } module.exports.arr=[1,2,3] module.exports.obj={ a:1, b:2} 復制代碼

input.js不變

export

export的output.js

export const srt = 'string字符串' export const bool = true export const num = 123 export const arr = [1, 2, 3] export const obj = { a: 1, b: 2} export function foo(r) {console.log(`導出函數為：${r}`); } 復制代碼

input.js

import {str,arr,obj,bool,num,foo} from './output' console.log(str) console.log(arr) console.log(obj) console.log(bool) console.log(num) foo('參數') 復制代碼

export的output.js同時支持如下寫法

const str = 'string字符串' const bool = true const num = 123 const arr = [1, 2, 3] const obj = { a: 1, b: 2} function foo(r) {console.log(`導出函數為：${r}`); } export {str,bool,num,arr,obj,foo } 復制代碼

input.js 導入支持重命名

import {str as STR,arr,obj,bool,num,foo as FOO} from './output' console.log(STR) console.log(arr) console.log(obj) console.log(bool) console.log(num) FOO('參數') 復制代碼

繼續重命名

import * as newName from './output' console.log(newName.str) console.log(newName.arr) console.log(newName.obj) console.log(newName.bool) console.log(newName.num) newName.foo('參數') 復制代碼

export default

export default的output.js

export default {str: 'string字符串',bool: true,num: 123,foo: (r) => {console.log(`導出函數為：${r}`);},arr: [1, 2, 3],obj: { a: 1, b: 2 } } 復制代碼

input.js

import defaultObj from './output' console.log(defaultObj.str) console.log(defaultObj.arr) console.log(defaultObj.bool) console.log(defaultObj.num) console.log(defaultObj.obj) defaultObj.foo('ef')//=>導出函數為：ef 復制代碼

export default的output.js同時支持如下寫法

const str = 'string字符串' const bool = true const num = 123 const arr = [1, 2, 3] const obj = {a: 1, b: 2} function foo(r) {console.log(`導出函數為：${r}`); } export default {str,bool,num,arr,obj,foo } 復制代碼

input.js不變

總結

這篇文章是對上一篇文章的總結和實踐

• 當直接給 module.exports時，exports會失效
• 直接給exports賦值會切斷exports和 module.exports的關聯關系
• export，export default，exports，module.exports具體的使用方法實例

更多前端資源請關注微信公眾號“前端陌上寒”

原文鏈接

參考鏈接

js 數組賦值問題 ：值傳遞還是引用？

轉載于:https://juejin.im/post/5ca0cee2e51d454bdc788bf4

總結

以上是生活随笔為你收集整理的js导入导出总结与实践的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。