每日 30 秒 ⏱ 陣列轉CSV表格資料

zhangxiangliang發表於2019-03-14
陣列

簡介

陣列、CSV、表格、工具

將一個陣列轉化為逗號為分割符的字串（CSV）即表格資料。

// 該原始碼來自於 https://30secondsofcode.org
const arrayToCSV = (arr, delimiter = ',') =>
  arr.map(v => v.map(x => `"${x}"`).join(delimiter)).join('\n')
複製程式碼

程式碼分析

這個程式碼利用了 Array.prototype.map() 和 Array.prototype.join() 兩個函式，實現了一個簡單的陣列轉化為 csv 檔案型別的程式碼。分別對程式碼進行兩次遍歷，第一層是遍歷整個陣列的專案，並在專案尾部新增換行符。第二層遍歷為遍歷資料行的值，並新增分隔符（分隔符定義時預設值為 ,）。

使用場景

將頁面上使用者資料匯出為 Excel 表格，並且提供下載。

<a id="download-user-data"
    onclick="downloadUserData(this)"
    download="downlaod.csv"
    href="#">download</a>
複製程式碼
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}`
}
複製程式碼

一起成長

? 更新平臺多偶爾會漏掉，如果覺得文章還行點個 star 防走失。

如果您感覺有收穫可以點贊關注激勵我，也歡迎到 Github 加個 star。

微信公眾號

本文原稿來自 PushMeTop

相關文章