纯JS实现排列整齐的数据表格

本文是在阅读《Eloquent JavaScript》第二版第六章时看到的示例，感觉十分有趣且有代表性，故在此留下笔记。

//1、传入多行，

//2、map遍历每行，返回一个新数组（里面的数组元素个数与行数对应）

//3、reduce计算每行中各个Cell的最大高度，返回一个值(该行的最大高度)

//-->结果得到一个含有每行最大高度的新数组

function rowHeights(rows) {
return rows.map(function(row) {
return row.reduce(function(max, cell) {
return Math.max(max, cell.minHeight());
}, 0);
});
}

//1、传入多行,

//2、根据第一行（row[0]）知道当前表格的总列数，并依次作为遍历次数的依据(若rows[0]的列数为3，则遍历3次)

//3、以第2步获得当前列索引(i)为标准，对每行的该列进行比较，比较得出该列的最大宽度（如当前i的值为0，则表示遍历表格各行的第一列）

function colWidths(rows) {
return rows[0].map(function(_, i) {
return rows.reduce(function(max, row) {
return Math.max(max, row[i].minWidth());
}, 0);
});
}

function drawTable(rows) {

var heights = rowHeights(rows);//获取存储某一Cell高和宽的数组
var widths = colWidths(rows);

function drawLine(blocks, lineNo) {
//根据传入的blocks的长度进行遍历，本例中blocks有三列(name、height、country)，所以遍历三次
//返回传入的lineNo确定要进行处理的是该Cell的第几行，如该行单元格行数为2，如 name  height country，则lineNo为1时，就是对
//  ----- ------ -------
//name、height、country三个字符串进行处理，最终得到一个新数组["name        ","height","country      "]，利用join方法合成为一个字符串，中间加入一个空格" "进行分隔
//即第一行Cell的第一行内容最终输出结果为"name         height country      ",其中name和height之间有13个空格（加上间隔），height和country之间仅一个（country后有六个空格）
return blocks.map(function(block) {
return block[lineNo];
}).join(" ");
}

function drawRow(row, rowNum) {
//对行内Cell进行遍历，得到同行Cell（加入padding后）共同组成的blocks，
//blocks是个二维数组，若该行中的Cell最多有两行，则其表现为[Array[2], Array[2], Array[2]]
var blocks = row.map(function(cell, colNum) {
return cell.draw(widths[colNum], heights[rowNum]);
});
//当前单一Cell占几行，就遍历几次，若该Cell占两行，则lineNo为2，需要调用drawLine两次，
//最终获得一个数组，包含Cell中两行对应的的字符串，用join方法合并为一个字符串，用\n分割换行
return blocks[0].map(function(_, lineNo) {
return drawLine(blocks, lineNo);
}).join("\n");
}
//对所有表格的行进行遍历，得出每行对应的字符串组成的数组，同样用join方法合并为一个字符串
return rows.map(drawRow).join("\n");
}
//用于对不满足所在列最小宽度要求的单元格，加上padding，padding为" "
function repeat(string, times) {
var result = "";
for (var i = 0; i < times; i++)
result += string;
return result;
}
//Cell的构造函数
function TextCell(text) {
this.text = text.split("\n");
}
//返回该Cell里各行中的最大宽度作为该cell的最小行宽
TextCell.prototype.minWidth = function() {
return this.text.reduce(function(width, line) {
return Math.max(width, line.length);
}, 0);
};
//返回该Cell对应的行数（实际上是数组的长度，因为在构造函数中已经用split将字符串变成数组）
TextCell.prototype.minHeight = function() {
return this.text.length;
};
//返回Cell中各行文本在加入padding后组成的数组
TextCell.prototype.draw = function(width, height) {
var result = [];
for (var i = 0; i < height; i++) {
var line = this.text[i] || "";
result.push(line + repeat(" ", width - line.length));
}
return result;
};
//扩展Cell(表头)的构造函数，加入下划线
function UnderlinedCell(inner) {
this.inner = inner;
}
UnderlinedCell.prototype.minWidth = function() {
return this.inner.minWidth();
};
//因为加上下划线有两行，所以高度+1
UnderlinedCell.prototype.minHeight = function() {
return this.inner.minHeight() + 1;
};
UnderlinedCell.prototype.draw = function(width, height) {
return this.inner.draw(width, height - 1)
.concat([repeat("-", width)]);
};

//RTextCell集继承自TextCall，构造函数能让RTextCell继承TextCell的私有属性
function RTextCell(text) {
TextCell.call(this, text);
}
//使用原型链继承，使RTextCell继承TextCell的原型属性
//Object.create能够创建特定原型的实例
RTextCell.prototype = Object.create(TextCell.prototype);
//重写TextCell的draw方法
RTextCell.prototype.draw = function(width, height) {
var result = [];
for (var i = 0; i < height; i++) {
var line = this.text[i] || "";
result.push(repeat(" ", width - line.length) + line);
}
return result;
};
//将对象数组转化为排列整齐的数据表
function dataTable(data) {
//Object.keys方法返回对象包含的（可枚举的）属性数组，因为对象的属性都是相同的，所以只需要数组中的第一个对象即可
var keys = Object.keys(data[0]);
//根据属性数组生成表头
var headers = keys.map(function(name) {
return new UnderlinedCell(new TextCell(name));
});
//遍历各对象
var body = data.map(function(row) {
//遍历对象中的属性数组，根据当前属性值的类型，实例化不同的表格元素（这里的不同指左右对齐）
return keys.map(function(name) {
var value = row[name];
// This was changed:
if (typeof value == "number")
return new RTextCell(String(value));
else
return new TextCell(String(value));
});
});
//最终
return [headers].concat(body);
}