资讯专栏INFORMATION COLUMN

每日 30 秒 ⏱ 数组转CSV表格数据

nanchen2251 / 709人阅读

简介
数组、CSV、表格、工具

将一个数组转化为逗号为分割符的字符串(CSV)即表格数据。

// 该源码来自于 https://30secondsofcode.org
const arrayToCSV = (arr, delimiter = ",") =>
  arr.map(v => v.map(x => `"${x}"`).join(delimiter)).join("
")
代码分析

这个代码利用了 Array.prototype.map()Array.prototype.join() 两个函数,实现了一个简单的数组转化为 csv 文件类型的代码。分别对代码进行两次遍历,第一层是遍历整个数组的项目,并在项目尾部添加换行符。第二层遍历为遍历数据行的值,并添加分隔符(分隔符定义时默认值为 ,)。

使用场景

将页面上用户数据导出为 Excel 表格,并且提供下载。

download      
const title = [
    "姓名", "年龄", "性别"
]

const users = [
    { name: "xiaoer", age: 24, sex: "男" },
    { name: "xiaosi", age: 8, sex: "男" },
    { name: "menty", age: 18, sex: "女" },
]

function downloadUserData(target) {
    const data = [
        title,
        ...(users.map((i) => [ i.name, i.age, i.sex ])),
    ]

    const csv = arrayToCSV(data)
    target.href = `data:text/csv;charset=utf-8,ufeff${csv}`
}
一起成长
在困惑的城市里总少不了并肩同行的 伙伴 让我们一起成长。

如果您想让更多人看到文章可以点个 点赞

如果您想激励小二可以到 Github 给个 小星星

如果您想与小二更多交流添加微信 m353839115

本文原稿来自 PushMeTop

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/102358.html

相关文章

  • 每日 30 ⏱ JSON对象数组CSV 表格数据

    简介 数组、对象、CSV、表格、工具 我们在 每日 30 秒之 arrayToCSV 中一起学习了将数组数据转化为 csv 表格数据并导出,那如果是对象数组怎么办呢?小脑袋瓜转得快的同学肯定会说:使用 Array.prototype.map 把需要导出的字段先遍历取出,再使用 arrayToCSV 将其导出为 CSV 数据表格。 可是你有没有想过如果一个对象数组数据非常之大时,使用 Array.p...

    Ajian 评论0 收藏0
  • 每日 30 CSV 表格数据换 JSON 对象

    简介 数组、CSV、表格、工具 showImg(https://segmentfault.com/img/bVbp3L5?w=900&h=500); 我们之前的两期 数组转 CSV 表格数据 和 JSON 对象数组转换 CSV 表格数据 中学习了转化为 CSV 表格数据的代码片段,今天就讲讲 如何把 CSV 表格数据转换为 JSON 对象: // 该源码来自于 https://30secondso...

    livem 评论0 收藏0
  • 每日 30 ⏱ 谁敢与我一战

    showImg(https://segmentfault.com/img/remote/1460000018771037?w=900&h=500); 简介 benchmark、基准测试、jsPerf 在 优雅插入数组 一文中大家最多的评论就是 能不能加个基准测试。小二不是不喜欢加基准测试而是现在硬件设备的性能越来越快了,有时候一些操作不是性能问题的主要原因,当然这不是我们不写出好代码的理由。 书写...

    Dionysus_go 评论0 收藏0
  • ❤️数据科学-Pandas、Numpy、Matplotlib秘籍之精炼总结

    前言: 先感受一下数据科学的魅力,上图是在Smart Dubai 2017 GITEX科技周展台上推出Smart Decision-Making Platform(智能决策平台),于10月8日至12日在迪拜世界贸易中心举行。游客可以通过一个沉浸式的空间将数据可视化,让他们了解迪拜的未来。让参观者可以在现场查阅观看全市数据,这意味着迪拜将成为了世界上第一个与公众分享实时实时数据的城市,同时还可以预...

    Zhuxy 评论0 收藏0
  • 每日 30 数组所有数据是否满足某条件

    showImg(https://segmentfault.com/img/remote/1460000018770987?w=900&h=500); 简介 数组、every、any 判断一个数组中是否都满足特定的条件,如果满足则返回 true 否则返回 false。 // 该源码来自于 https://30secondsofcode.org const all = (arr, fn = Boole...

    FullStackDeveloper 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<