者开始学习Javascript的时候，对模块不太懂，不知道怎么导入模块，导出模块，就胡乱一通试

比如 import xx from 'test.js' 不起作用，就加个括号 import {xx} from 'test.js'

反正总是靠蒙，总有一种写法是对的，其实还是没有理解，还是不懂

尤其是在当初写 www.helloworld.net 网站的时候，一遇到这种问题，就懵逼了，尤其是引入第三方库的时候

这种情况下更多，此篇文章也是为了怕以后忘记，自查用的，也希望能帮助更多的朋友，此篇文章只是针对ES6的模块相关知识

首先要知道export，import 是什么

我们知道，JS 模块导入导出，使用 import , export 这两个关键字

• export 用于对外输出本模块
• import 用于导入模块

也就是说使用 export 导出一个模块之后，其它文件就可以使用 import 导入相应的模块了

下面我们具体看看， import 和 export 到底怎么用？怎么导出模块（比如变量，函数，类，对象等）

1 导出单个变量

//a.js 导出一个变量，语法如下
export var site = "www.helloworld.net"

//b.js 中使用import 导入上面的变量
import { site } from "/.a.js" //路径根据你的实际情况填写
console.log(site)	//输出： www.helloworld.net

2 导出多个变量

上面的例子是导出单个变量，那么如何导出多个变量呢

 //a.js 中定义两个变量，并导出
 var siteUrl="www.helloworld.net"
 var siteName="helloworld开发者社区"
 
 //将上面的变量导出
 export { siteUrl ,siteName }  
 
 
 
 // b.js 中使用这两个变量
 import { siteUrl , siteName } from "/.a.js" //路径根据你的实际情况填写

 console.log(siteUrl)	//输出： www.helloworld.net
 console.log(siteName)	//输出： helloworld开发者社区

3 导出函数

导出函数和导出变量一样，需要添加{ }

//a.js 中定义并导出一个函数
function sum(a, b) {
    return a + b
}
//将函数sum导出
export { sum } 


//b.js 中导入函数并使用
import { sum } from "/.a.js" //路径根据你的实际情况填写
console.log( sum(4,6) ) //输出： 10

4 导出对象

js中一切皆对象，所以对象一定是可以导出的，并且有两种写法

4.1 第一种写法

使用 export default 关键字导出，如下

//a.js 中，定义对象并导出, 注意，使用export default 这两个关键字导出一个对象
export default {
    siteUrl:'www.helloworld.net',
    siteName:'helloworld开发者社区'
}


//b.js 中导入并使用
import obj from './a.js'   	//路径根据你的实际情况填写
console.log(obj.siteUrl)	//输出：www.helloworld.net
console.log(obj.siteName)	//输出：helloworld开发者社区

4.2 第二种写法

同样是使用export default 关键字，如下

//a.js 中定义对象，并在最后导出
var obj = {
   	siteUrl:'www.helloworld.net',
    siteName:'helloworld开发者社区'
}

export default obj	//导出对象obj


//b.js 中导入并使用
import obj from './a.js'   	//路径根据你的实际情况填写
console.log(obj.siteUrl)	//输出：www.helloworld.net
console.log(obj.siteName)	//输出：helloworld开发者社区

5 导出类

导出类与上面的导出对象类似，同样是用 export default 关键字，同样有两种写法

5.1 第一种写法

//a.js 中定义一个类并直接导出
export default class Person {
    //类的属性
    site = "www.helloworld.net"

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


//b.js 中导入并使用
//导入类
import Person from './a.js'

//创建类的一个对象person
let person = new Person()

//调用类的方法
person.show()  	//输出：www.helloworld.net

5.2 第二种写法

//a.js 中定义一个类，最后导出
class Person {
    //类的属性
    site = "www.helloworld.net"

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

//导出这个类
export default Person 



//b.js 中导入并使用
//导入类
import Person from './a.js'

//创建类的一个对象person
let person = new Person()

//调用类的方法
person.show()  	//输出：www.helloworld.net

小结

下面我们简单总结一下

export与export default的区别

• export与export default均可用于导出常量、函数、文件、模块等
• 可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式，将其导入，以便能够对其进行使用
• export default后面不能跟const或let的关键词
• export、import可以有多个，export default仅有一个。
• 通过export方式导出，在导入时要加 { }，export default则不需要
• export具名导出xxx ，export default匿名。区别在于导入的时候，export需要一样的名称才能匹配，后者无论取什么名都可以。
• 模块化管理中一个文件就是一个模块，export可以导出多个方法和变量，export default只能导出当前模块，一个js文件中只支持出现一个

对于 import ,export , export default ，他们的用法上面的例子已经很详细的列出了，忘记的时候，可以当作参考看看

最重要的还是要明白为什么要这么写，实在不明白记住就行了。

网页开发中，我们经常需要将表格中的数据导出为CSV文件，以便进行数据分析或共享。今天，我们就来分享一下如何通过JavaScript实现这个功能。具体实现步骤包括：提取表格数据、构建CSV字符串、创建下载链接以及触发下载操作。希望这个教程能帮你轻松实现表格数据导出功能！

完整代码片段

首先，我们来看一下完整的代码片段，然后再进行分段介绍。

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);
}

// 调用示例
exportTableToCsv('myTableId', 'exported_data.csv');

提取表格数据

首先，我们需要通过 document.getElementById 选择目标表格。然后，我们使用 for...of 循环遍历每一行 (<tr>) 和每一个单元格 (<td>)，提取其中的文本内容并去除多余的空格。

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;
}

在这个函数中，我们首先通过ID获取目标表格，然后遍历每一行和每一个单元格，将单元格的文本内容去除多余空格后存入一个数组，最后将这个数组推入 data 数组中。

构建CSV字符串

接下来，我们创建一个函数 buildCsvString，将提取的表格数据构建成CSV字符串。我们使用逗号（,）连接每行的数据，并用换行符（\n）连接每行。

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

在这个函数中，我们使用 map 方法遍历每一行的数据，将每行数据用逗号连接成字符串，然后再用换行符将所有行连接成一个完整的CSV字符串。

创建下载链接

使用 Blob 对象创建一个表示CSV数据的blob，并将其类型设置为 text/csv。然后，使用 URL.createObjectURL 创建一个临时的URL来指向这个blob。

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

在这个函数中，我们首先创建一个 Blob 对象，并将CSV内容传入。然后，使用 URL.createObjectURL 方法创建一个指向这个 Blob 对象的临时URL。

触发下载

最后，我们创建一个新的锚点 (<a>) 元素，并将其 href 属性设置为临时URL，download 属性设置为我们想要的文件名（例如，"exported_data.csv"）。然后，模拟点击事件以启动下载。

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

在这个步骤中，我们创建一个新的 <a> 元素，并设置其 href 和 download 属性。然后，通过调用 click 方法模拟一次点击事件，触发文件下载。最后，使用 URL.revokeObjectURL 方法释放这个临时URL。

整合函数

最后，我们将上述步骤整合到一个函数中，便于调用。

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

// 调用示例
exportTableToCsv('myTableId', 'exported_data.csv');

通过以上步骤，你就可以轻松实现将表格数据导出为CSV文件的功能了。希望这篇教程对你有所帮助！如果有任何问题或建议，欢迎在评论区留言互动。

结语

导出表格数据为CSV文件是一个非常实用的功能，不仅可以帮助我们方便地保存和分享数据，还可以用于数据分析和处理。希望通过这篇文章，你能够掌握这一技巧，并在实际项目中应用。如果你觉得这篇文章对你有帮助，记得点赞、收藏并分享给更多的小伙伴！如果你有任何问题或需要进一步的帮助，欢迎在评论区留言，我会及时回复你。谢谢阅读！