者：前端小智 來源：大遷世界

.md文件是markdown的一種標記語言，和html比較起來，更簡單快捷，主要體現在：標記符的數量和書寫上。

• 標記符的數量：html文檔需要用到數量繁多的標記符，再輔以css來控制樣式和排版，而markdown文檔只需要四個基本的標記符號就能完成同樣的事。
• 標記符的書寫：HTML文檔內容需要同時標記開始和結束這是一個網頁，而markdown文檔則只要在開始位置標記即可# 這是一個md文檔。下面介紹如何實現將.md文件轉換成.html文件。

方式一：使用i5ting_toc插件

需要先安裝npm(安裝node.js后會自帶npm)，然后才能安裝i5ting插件：

npm install i5ting_toc -g

執行命令行生成html文件，在輸入前要進入到對應根目錄下：

i5ting_toc -f **.md

需要注意的是：寫md文檔的特殊符號時記得添加空格。小技巧：如何快速在當前目錄打開cmd?選擇當前目錄，按住shift，然后鼠標右鍵在此處打開命令窗口(在此處打開powerShell窗口)。

方式二：使用gitbook

同樣先需要安裝node，然后運行：

npm i gitbook gitbook-cli -g

生成md文件,這個命令會生成相應的md的文件，然后在相應的文件里寫你的內容即可：

gitbook init

md轉html,生成一個_doc目錄，打開就可以看到你html文件了。

gitbook build

方式三：利用前端代碼

實現原理是采用node.js搭建服務器，讀取md文件轉化為html片斷。瀏覽器發送ajax請求獲取片段后再渲染生成html網頁。

node代碼：

var express = require('express');

var http = require('http');

var fs = require('fs');

var bodyParser = require('body-parser');

var marked = require('marked'); // 將md轉化為html的js包

var app = express();

app.use(express.static('src')); //加載靜態文件

var urlencodedParser = bodyParser.urlencoded({ extended: false });

app.get('/getMdFile',urlencodedParser, function(req, res) {

var data = fs.readFileSync('src/test.md', 'utf-8'); //讀取本地的md文件

res.end(JSON.stringify({

body : marked(data)

}));

} );

//啟動端口監聽

var server = app.listen(8088, function () {

var host = server.address().address;

var port = server.address().port;

console.log("應用實例，訪問地址為 http://%s:%s", host, port)

});

前端html：

<div id="content"> <h1 class="title">md-to-HTML web app</h1> <div id="article"> </div></div><script type="text/JavaScript" src="js/jquery-1.11.3.min.js"></script><script> var article = document.getElementById('article'); $.ajax({ url: "/getMdFile", success: function(result) { console.log('數據獲取成功'); article.innerHTML = JSON.parse(result).body; }, error: function (err) { console.log(err); article.innerHTML = '<p>獲取數據失敗</p>'; } });</script>

、javascript把二維數組轉為json格式的字符串代碼如下：

// 二維數組轉為json格式的字符串

function arrayToJsonString(o) {
    var len = o.length;
    var new_arr = new Array();
    var str = '',strone='',strs='',jsonstr='';
    for(var i = 0;i<len;i++){
           new_arr = o[i];
            for(var k in new_arr){
               strone += '"'+k+'"'+':'+'"'+new_arr[k]+'"'+',';
               }
           str = '{'+strone.substring(0,strone.length-1)+'}';
           strone='';
           strs += str+',';
           new_arr=[];
        }
    strs = '['+strs.substring(0,strs.length-1)+']';
    return strs;
}

2、改變多維數組中某個元素的值，代碼如下：

面是我們如何在 JavaScript 中輕松地將 JSON 轉換為 CSV：

function jsonToCsv(items) {
  const header = Object.keys(items[0]);  const headerString = header.join(',');  // handle null or undefined values here
  const replacer = (key, value) => value ?? '';  const rowItems = items.map((row) =>
    header
      .map((fieldName) => JSON.stringify(row[fieldName], replacer))
      .join(',')
  );  // join header and body, and break into separate lines
  const csv = [headerString, ...rowItems].join('\r\n');  return csv;
}const obj = [
  { color: 'red', maxSpeed: 120, age: 2 },
  { color: 'blue', maxSpeed: 100, age: 3 },
  { color: 'green', maxSpeed: 130, age: 2 },
];const csv = jsonToCsv(obj);console.log(csv);

這將是 CSV 輸出：

color,maxSpeed,age
"red",120,2
"blue",100,3
"green",130,2

了解步驟

我們創建了一個可重用的 jsonToCsv() 函數來讓我們將多個 JSON 字符串轉換為 CSV。 它需要一個包含對象的數組。 每個對象將在 CSV 輸出中占據一行。

我們在此函數中所做的第一件事是獲取將用于 CSV 標頭的所有鍵。 我們希望數組中的所有對象都具有相同的鍵，因此我們使用 Object.keys() 方法將鍵從第一個對象項中提取到數組中。

const obj = [
  { color: 'red', maxSpeed: 120, age: 2 },
  { color: 'blue', maxSpeed: 100, age: 3 },
  { color: 'green', maxSpeed: 130, age: 2 },
];// { color: 'red', maxSpeed: 120, age: 2 }
console.log(obj[0]);// [ 'color', 'maxSpeed', 'age' ]
console.log(Object.keys(obj[0]));

獲取鍵后，我們調用數組的 join() 方法將所有元素連接成 CSV 標頭字符串。

const header = ['color', 'maxSpeed', 'age'];const headerString = arr.join(',');console.log(headerString); // color,maxSpeed,age

接下來，我們創建一個函數，該函數將作為回調傳遞給 JSON.stringify() 函數的 replacer 參數。 此函數將處理 JSON 數組中對象的未定義或空屬性值。

const obj = { prop1: 'Earth', prop2: undefined };// replace undefined property values with empty string ('')
const replacer = (key, value) => value ?? '';const str = JSON.stringify(obj, replacer);// {"prop1":"Earth","prop2":""}
console.log(str);

然后我們使用 Array map() 方法從每個對象中獲取屬性值。 map() 接受一個回調函數，該函數在每個數組元素上調用以返回一個轉換。

此回調使用標頭數組來獲取每個對象的所有鍵。 再次調用 map()，它會遍歷每個鍵，獲取對象中該鍵的對應值，并使用 JSON.stringify() 將其轉換為字符串。

這個對 map() 的內部調用最終會產生一個數組，該數組包含數組中當前對象的所有字符串化屬性值。

const header = ['color', 'maxSpeed', 'age'];const row = { color: 'red', maxSpeed: 120, age: 2 };const replacer = (key, value) => value ?? '';const rowItem = header.map((fieldName) =>
  JSON.stringify(row[fieldName], replacer)
);// array of stringified property values
console.log(rowItem); // [ '"red"', '120', '2' ]

將對象轉換為屬性值數組后，使用 join() 將數組轉換為 CSV 行。

['"red"', '120', '2'].join(',') // -> "red",120,2

因此，這種轉換發生在 JSON 數組中的每個對象上，以生成 CSV 行列表，存儲在我們原始示例中的 rowItems 變量中。

為了生成最終的 CSV 輸出，我們使用擴展語法 (...) 將 headerString 和 rowItems 組合到一個數組中。

const headerString = ['color', 'maxSpeed', 'age'];const rowItems = ['"red",120,2', '"blue",100,3', '"green",130,2'];[headerString, ...rowItems];
/*
Output ->
[
  [ 'color', 'maxSpeed', 'age' ],
  '"red",120,2',
  '"blue",100,3',
  '"green",130,2'
]
 */

然后我們在這個數組上調用 join() 并使用 '\r\n' 字符串作為分隔符，以創建一個帶有 CSV 標題的字符串，并且每個 CSV 行位于單獨的行中。

const headerString = ['color', 'maxSpeed', 'age'];const rowItems = ['"red",120,2', '"blue",100,3', '"green",130,2'];console.log([headerString, ...rowItems].join('\r\n'));
/*
color,maxSpeed,age
"red",120,2
"blue",100,3
"green",130,2
 */

關注七爪網，獲取更多APP/小程序/網站源碼資源！