者開(kāi)始學(xué)習(xí)Javascript的時(shí)候，對(duì)模塊不太懂，不知道怎么導(dǎo)入模塊，導(dǎo)出模塊，就胡亂一通試

比如 import xx from 'test.js' 不起作用，就加個(gè)括號(hào) import {xx} from 'test.js'

反正總是靠蒙，總有一種寫(xiě)法是對(duì)的，其實(shí)還是沒(méi)有理解，還是不懂

尤其是在當(dāng)初寫(xiě) www.helloworld.net 網(wǎng)站的時(shí)候，一遇到這種問(wèn)題，就懵逼了，尤其是引入第三方庫(kù)的時(shí)候

這種情況下更多，此篇文章也是為了怕以后忘記，自查用的，也希望能幫助更多的朋友，此篇文章只是針對(duì)ES6的模塊相關(guān)知識(shí)

首先要知道export，import 是什么

我們知道，JS 模塊導(dǎo)入導(dǎo)出，使用 import , export 這兩個(gè)關(guān)鍵字

• export 用于對(duì)外輸出本模塊
• import 用于導(dǎo)入模塊

也就是說(shuō)使用 export 導(dǎo)出一個(gè)模塊之后，其它文件就可以使用 import 導(dǎo)入相應(yīng)的模塊了

下面我們具體看看， import 和 export 到底怎么用？怎么導(dǎo)出模塊（比如變量，函數(shù)，類，對(duì)象等）

1 導(dǎo)出單個(gè)變量

//a.js 導(dǎo)出一個(gè)變量，語(yǔ)法如下
export var site = "www.helloworld.net"

//b.js 中使用import 導(dǎo)入上面的變量
import { site } from "/.a.js" //路徑根據(jù)你的實(shí)際情況填寫(xiě)
console.log(site)	//輸出： www.helloworld.net

2 導(dǎo)出多個(gè)變量

上面的例子是導(dǎo)出單個(gè)變量，那么如何導(dǎo)出多個(gè)變量呢

 //a.js 中定義兩個(gè)變量，并導(dǎo)出
 var siteUrl="www.helloworld.net"
 var siteName="helloworld開(kāi)發(fā)者社區(qū)"
 
 //將上面的變量導(dǎo)出
 export { siteUrl ,siteName }  
 
 
 
 // b.js 中使用這兩個(gè)變量
 import { siteUrl , siteName } from "/.a.js" //路徑根據(jù)你的實(shí)際情況填寫(xiě)

 console.log(siteUrl)	//輸出： www.helloworld.net
 console.log(siteName)	//輸出： helloworld開(kāi)發(fā)者社區(qū)

3 導(dǎo)出函數(shù)

導(dǎo)出函數(shù)和導(dǎo)出變量一樣，需要添加{ }

//a.js 中定義并導(dǎo)出一個(gè)函數(shù)
function sum(a, b) {
    return a + b
}
//將函數(shù)sum導(dǎo)出
export { sum } 


//b.js 中導(dǎo)入函數(shù)并使用
import { sum } from "/.a.js" //路徑根據(jù)你的實(shí)際情況填寫(xiě)
console.log( sum(4,6) ) //輸出： 10

4 導(dǎo)出對(duì)象

js中一切皆對(duì)象，所以對(duì)象一定是可以導(dǎo)出的，并且有兩種寫(xiě)法

4.1 第一種寫(xiě)法

使用 export default 關(guān)鍵字導(dǎo)出，如下

//a.js 中，定義對(duì)象并導(dǎo)出, 注意，使用export default 這兩個(gè)關(guān)鍵字導(dǎo)出一個(gè)對(duì)象
export default {
    siteUrl:'www.helloworld.net',
    siteName:'helloworld開(kāi)發(fā)者社區(qū)'
}


//b.js 中導(dǎo)入并使用
import obj from './a.js'   	//路徑根據(jù)你的實(shí)際情況填寫(xiě)
console.log(obj.siteUrl)	//輸出：www.helloworld.net
console.log(obj.siteName)	//輸出：helloworld開(kāi)發(fā)者社區(qū)

4.2 第二種寫(xiě)法

同樣是使用export default 關(guān)鍵字，如下

//a.js 中定義對(duì)象，并在最后導(dǎo)出
var obj = {
   	siteUrl:'www.helloworld.net',
    siteName:'helloworld開(kāi)發(fā)者社區(qū)'
}

export default obj	//導(dǎo)出對(duì)象obj


//b.js 中導(dǎo)入并使用
import obj from './a.js'   	//路徑根據(jù)你的實(shí)際情況填寫(xiě)
console.log(obj.siteUrl)	//輸出：www.helloworld.net
console.log(obj.siteName)	//輸出：helloworld開(kāi)發(fā)者社區(qū)

5 導(dǎo)出類

導(dǎo)出類與上面的導(dǎo)出對(duì)象類似，同樣是用 export default 關(guān)鍵字，同樣有兩種寫(xiě)法

5.1 第一種寫(xiě)法

//a.js 中定義一個(gè)類并直接導(dǎo)出
export default class Person {
    //類的屬性
    site = "www.helloworld.net"

    //類的方法
    show(){
        console.log(this.site)
    }
}


//b.js 中導(dǎo)入并使用
//導(dǎo)入類
import Person from './a.js'

//創(chuàng)建類的一個(gè)對(duì)象person
let person = new Person()

//調(diào)用類的方法
person.show()  	//輸出：www.helloworld.net

5.2 第二種寫(xiě)法

//a.js 中定義一個(gè)類，最后導(dǎo)出
class Person {
    //類的屬性
    site = "www.helloworld.net"

    //類的方法
    show(){
        console.log(this.site)
    }
}

//導(dǎo)出這個(gè)類
export default Person 



//b.js 中導(dǎo)入并使用
//導(dǎo)入類
import Person from './a.js'

//創(chuàng)建類的一個(gè)對(duì)象person
let person = new Person()

//調(diào)用類的方法
person.show()  	//輸出：www.helloworld.net

小結(jié)

下面我們簡(jiǎn)單總結(jié)一下

export與export default的區(qū)別

• export與export default均可用于導(dǎo)出常量、函數(shù)、文件、模塊等
• 可以在其它文件或模塊中通過(guò)import+(常量 | 函數(shù) | 文件 | 模塊)名的方式，將其導(dǎo)入，以便能夠?qū)ζ溥M(jìn)行使用
• export default后面不能跟const或let的關(guān)鍵詞
• export、import可以有多個(gè)，export default僅有一個(gè)。
• 通過(guò)export方式導(dǎo)出，在導(dǎo)入時(shí)要加 { }，export default則不需要
• export具名導(dǎo)出xxx ，export default匿名。區(qū)別在于導(dǎo)入的時(shí)候，export需要一樣的名稱才能匹配，后者無(wú)論取什么名都可以。
• 模塊化管理中一個(gè)文件就是一個(gè)模塊，export可以導(dǎo)出多個(gè)方法和變量，export default只能導(dǎo)出當(dāng)前模塊，一個(gè)js文件中只支持出現(xiàn)一個(gè)

對(duì)于 import ,export , export default ，他們的用法上面的例子已經(jīng)很詳細(xì)的列出了，忘記的時(shí)候，可以當(dāng)作參考看看

最重要的還是要明白為什么要這么寫(xiě)，實(shí)在不明白記住就行了。

網(wǎng)頁(yè)開(kāi)發(fā)中，我們經(jīng)常需要將表格中的數(shù)據(jù)導(dǎo)出為CSV文件，以便進(jìn)行數(shù)據(jù)分析或共享。今天，我們就來(lái)分享一下如何通過(guò)JavaScript實(shí)現(xiàn)這個(gè)功能。具體實(shí)現(xiàn)步驟包括：提取表格數(shù)據(jù)、構(gòu)建CSV字符串、創(chuàng)建下載鏈接以及觸發(fā)下載操作。希望這個(gè)教程能幫你輕松實(shí)現(xiàn)表格數(shù)據(jù)導(dǎo)出功能！

完整代碼片段

首先，我們來(lái)看一下完整的代碼片段，然后再進(jìn)行分段介紹。

function extractTableData(tableId) {
  const table = document.getElementById(tableId);
  const data = [];

  for (const row of table.rows) {
    const rowData = [];
    for (const cell of row.cells) {
      rowData.push(cell.innerText.trim());
    }
    data.push(rowData);
  }

  return data;
}

function buildCsvString(data) {
  return data.map(row => row.join(',')).join('\n');
}

function createDownloadLink(csvContent) {
  const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8' });
  return URL.createObjectURL(blob);
}

function triggerDownload(url, filename) {
  const link = document.createElement('a');
  link.href = url;
  link.download = filename;
  link.click();
  URL.revokeObjectURL(url);
}

function exportTableToCsv(tableId, filename) {
  const tableData = extractTableData(tableId);
  const csvContent = buildCsvString(tableData);
  const downloadUrl = createDownloadLink(csvContent);
  triggerDownload(downloadUrl, filename);
}

// 調(diào)用示例
exportTableToCsv('myTableId', 'exported_data.csv');

提取表格數(shù)據(jù)

首先，我們需要通過(guò) document.getElementById 選擇目標(biāo)表格。然后，我們使用 for...of 循環(huán)遍歷每一行 (<tr>) 和每一個(gè)單元格 (<td>)，提取其中的文本內(nèi)容并去除多余的空格。

function extractTableData(tableId) {
  const table = document.getElementById(tableId);
  const data = [];

  for (const row of table.rows) {
    const rowData = [];
    for (const cell of row.cells) {
      rowData.push(cell.innerText.trim());
    }
    data.push(rowData);
  }

  return data;
}

在這個(gè)函數(shù)中，我們首先通過(guò)ID獲取目標(biāo)表格，然后遍歷每一行和每一個(gè)單元格，將單元格的文本內(nèi)容去除多余空格后存入一個(gè)數(shù)組，最后將這個(gè)數(shù)組推入 data 數(shù)組中。

構(gòu)建CSV字符串

接下來(lái)，我們創(chuàng)建一個(gè)函數(shù) buildCsvString，將提取的表格數(shù)據(jù)構(gòu)建成CSV字符串。我們使用逗號(hào)（,）連接每行的數(shù)據(jù)，并用換行符（\n）連接每行。

function buildCsvString(data) {
  return data.map(row => row.join(',')).join('\n');
}

在這個(gè)函數(shù)中，我們使用 map 方法遍歷每一行的數(shù)據(jù)，將每行數(shù)據(jù)用逗號(hào)連接成字符串，然后再用換行符將所有行連接成一個(gè)完整的CSV字符串。

創(chuàng)建下載鏈接

使用 Blob 對(duì)象創(chuàng)建一個(gè)表示CSV數(shù)據(jù)的blob，并將其類型設(shè)置為 text/csv。然后，使用 URL.createObjectURL 創(chuàng)建一個(gè)臨時(shí)的URL來(lái)指向這個(gè)blob。

function createDownloadLink(csvContent) {
  const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8' });
  return URL.createObjectURL(blob);
}

在這個(gè)函數(shù)中，我們首先創(chuàng)建一個(gè) Blob 對(duì)象，并將CSV內(nèi)容傳入。然后，使用 URL.createObjectURL 方法創(chuàng)建一個(gè)指向這個(gè) Blob 對(duì)象的臨時(shí)URL。

觸發(fā)下載

最后，我們創(chuàng)建一個(gè)新的錨點(diǎn) (<a>) 元素，并將其 href 屬性設(shè)置為臨時(shí)URL，download 屬性設(shè)置為我們想要的文件名（例如，"exported_data.csv"）。然后，模擬點(diǎn)擊事件以啟動(dòng)下載。

function triggerDownload(url, filename) {
  const link = document.createElement('a');
  link.href = url;
  link.download = filename;
  link.click();
  URL.revokeObjectURL(url);
}

在這個(gè)步驟中，我們創(chuàng)建一個(gè)新的 <a> 元素，并設(shè)置其 href 和 download 屬性。然后，通過(guò)調(diào)用 click 方法模擬一次點(diǎn)擊事件，觸發(fā)文件下載。最后，使用 URL.revokeObjectURL 方法釋放這個(gè)臨時(shí)URL。

整合函數(shù)

最后，我們將上述步驟整合到一個(gè)函數(shù)中，便于調(diào)用。

function exportTableToCsv(tableId, filename) {
  const tableData = extractTableData(tableId);
  const csvContent = buildCsvString(tableData);
  const downloadUrl = createDownloadLink(csvContent);
  triggerDownload(downloadUrl, filename);
}

// 調(diào)用示例
exportTableToCsv('myTableId', 'exported_data.csv');

通過(guò)以上步驟，你就可以輕松實(shí)現(xiàn)將表格數(shù)據(jù)導(dǎo)出為CSV文件的功能了。希望這篇教程對(duì)你有所幫助！如果有任何問(wèn)題或建議，歡迎在評(píng)論區(qū)留言互動(dòng)。

結(jié)語(yǔ)

導(dǎo)出表格數(shù)據(jù)為CSV文件是一個(gè)非常實(shí)用的功能，不僅可以幫助我們方便地保存和分享數(shù)據(jù)，還可以用于數(shù)據(jù)分析和處理。希望通過(guò)這篇文章，你能夠掌握這一技巧，并在實(shí)際項(xiàng)目中應(yīng)用。如果你覺(jué)得這篇文章對(duì)你有幫助，記得點(diǎn)贊、收藏并分享給更多的小伙伴！如果你有任何問(wèn)題或需要進(jìn)一步的幫助，歡迎在評(píng)論區(qū)留言，我會(huì)及時(shí)回復(fù)你。謝謝閱讀！