這里給大家分享我在網上總結出來的一些知識，希望對大家有所幫助

前言 ????

我們在無論是在查閱別人的代碼，還是在實際專案開發的程序中，肯定都會使用匯入匯出的功能，有時候我們會搞混這幾種方式到底有什么區別，今天我們就來細致的區分一下：

匯入匯出方式????

我們都知道最常見的幾種匯出方式無非是export，exports，export default，module.exports這幾種，常見的匯入方式則就是import和require,那么他們到底有什么區別呢？我們一起來看一下：

最為新手小白的我們在看到第一眼的時候肯定會一臉懵，其實我們可以將他們根據不同的JavaScript規范來分開來看

export和export default

export和export default是ES6的規范：

這兩種方式其實沒有什么本質的區別，我們一起來看一下示例:

使用export default這種匯出方式叫做默認匯出（暴露）

var name = "小明";
var fun = function () {
  console.log(name);
};
export default { name, fun };
-----------------------
export default  function() {
    console.log ('export 不能這樣子')
}

這里我們可以看到我們宣告了一個函式，里面列印了變數name的值，然后我們使用export default匯出了一個函式物件，也可以直接默認的匯出一個函式，

值得注意的是，在一個js檔案中只能有一個export default，不能重復的書寫，否則會報錯，而我們在接收這個匯出的物件的中的內容的時候我們需要使用import來進行匯入，

幾個容易錯誤的點：

export default const name3 = 'error'; //這樣匯出的方式是錯誤的
-----------------------
var name3="小紅";
export default name3;//這樣是正確的

當然接識訓出的值的時候也需要注意

import接識訓出的值：

我們在使用export default匯出的時候我們在接受值的時候需要注意

import text from "app.js"

我們假設需要匯出內容的是app.js這個檔案，我們在接收的時候可以自己定義一個變數名稱，就像示例中的test，當然如果想要獲取匯出物件中的內容就可以使用解構的語法，這一點與export是有區別的

export匯出示例：

var age=20; var open=true;
export {age,open} //等同于下邊
export {age}
export {open}
export const fun=()=>{console.log("hhh")}
export const age1 = 23 //let 也行

在export中我們可以一口氣匯出多個變數或者物件，函式等而且我們也可以向最后一行代碼那樣在匯出的時候定義變數名稱，有一點需要注意使用export匯出的內容必須有名稱，就比如匯出函式的時候不能像默認暴露那樣直接匯出一個匿名函式，

匯入時的注意點：

import {age,open} from "app.js"
import {fun} from "app.js"
import {age1 as age2} form "app.js"

這里要注意我們在匯入的時候一定要加上花括號，而且花括號中的名稱必須和匯出的變數或者函式名稱一樣，這一點時與export default不同的，還有我們匯入在age1可以將其重命名為age2.

module.export 和exports

首先這兩種方式是基于Common.js的規范來定義的，而這個規范是在Node.js中，因此這兩種方式主要是在Node.js中使用

在背景關系中提供了exports物件用于匯出當前模塊的方法或者變數，他是唯一匯出的出口，當然在模塊中還存在module物件，他代表模塊自身，exports就是module的屬性（默認的值是一個空物件）,而在Node.js中一個檔案就是一個模塊，所以我們匯出

在模塊之中背景關系提供require來引入外部的模塊，

首先我們先來查看module.exports這種方式，

const a = 1;
const fun = () => {
  console.log(2);
};
module.exports = { a, fun };

var req = require ('../app.js');
console.log(req.a1,req.a)
//1 [Function: fun]

我們在匯出的時候需要注意匯出的先后循序，當然這也可以當作面試出題，比如一下這幾行代碼匯出的先后順序不一樣就會列印出不同的值，我們可以一起來看一下:

const a = 1;
const fun = () => {
  console.log(2);
};
// console.log(fun);
module.exports.a2 = 4;
module.exports = { a, fun };

const req = require("./module.exports");
console.log(req.a, req.fun, req.a2);
//1 [Function: fun] undefined

為什么會有undefined呢？

我們在開始的時候說了我們其實發通過exports這中方式默認是匯出一個空的物件，所以我們通過module.exports.a2這種方式匯出其實是在這個空的物件上面添加了一個a2屬性并且值為4，但是下來通過module.exports匯出的時候，我們通過賦值的方式將之前的物件給覆寫了，因此之前的a2值就沒有了，

同樣如果我們給這兩種匯出的方式換一下先后順序，比如我們這樣寫

module.exports = { a, fun };
module.exports.a2 = 4;

我們就可以獲取到a2的值，因為我們先進行了物件的覆寫，然后在新物件上面增加了一個a2的屬性并且值為4，

exports匯出

其實exports 是module.exports的一個參考，可以認為是 var exports = module.exports

我們來講解一下他們二者的區別：

1. 直接賦值和替換物件的行為不同：

   • module.exports = value;：將 module.exports 直接賦值為一個新的值，這個新值會成為模塊的匯出內容，例如：module.exports = { a: 1 };,地址發生了改變直接替換之前的所有內容，
   • exports.key = value;：將一個新的屬性和值添加到 exports 物件中，例如：exports.a = 1;

2. module.exports 優先級高于 exports：

   • 如果在模塊中同時使用 module.exports 和 exports，那么最侄訓出的內容以 module.exports 為準，也就是說，exports 物件的變化不會影響最侄訓出的內容，

使用exports的誤區

直接上一個例子來給大家演示一下：

const a = 1;
const fun = () => {
  console.log(2);
};
exports.a3 = { a, fun };

const req = require("./module.exports");
console.log(req);
console.log(req.a, req.fun);
//{}
//undefined undefined

為什么會出現這種情況呢？

我們知道在最初的時候module.exports和exports最初是指向同一個物件，也就是他們的地址是相同的，但是在這里我們通過物件給exports賦值的時候實際上已經改變了exports的地址，但是module.exports還是默認的地址指向還是一個空的物件，而我們執行匯出的時候實際上還是通過module.exports，所以最侄訓是匯出了一個空物件，

因此我們在module.exports和exports混用的時候要注意地址的問題，不要直接改變module.exports的地址，如果直接改變了，那么exports的操作就會不生效，如果你想混用，那最好全部用module.exports.x = xxx和exports.xx = xxxx這種寫法，這樣的寫法就沒有改變默認的地址，

exports.a2 = 4;
module.exports.fun = fun;
module.exports.a = a;
--------------------
const req = require("./module.exports");
console.log(req);
//{ a2: 4, fun: [Function: fun], a: 1 }

本文轉載于:

https://juejin.cn/post/7241111319591452729

如果對您有所幫助，歡迎您點個關注，我會定時更新技術檔案，大家一起討論學習，一起進步，

標籤：其他

上一篇：Vue2知識點簡要

下一篇：返回列表