JavaScript 对数组元素进行分类并输出为 HTML

Question

我们有一个格式为 bugs = ['BD-2', 'SSNC-1', 'SSNC-3', 'RI-2', 'RC-10'] 的数组.

您可以看到它有 4 种不同的错误类型/ token (BD、SSNC、RI 和 RC)——这可能会在未来扩展。 token 和 ID 号分隔符可以是 '-' 或 '/' 或什么都不是(例如:regexp match[-/]?)即数组可以是

= ['BD-2', 'SSNC-1', 'SSNC-3', 'RI-2', 'RC-10'] or
= ['BD-2', 'SSNC/1', 'SSNC-3', 'RI-2', 'RC/10'] or
= ['BD-2', 'SSNC-1', 'SSNC3', 'RI-2', 'RC10']

现在尝试构建一个简单的 JavaScript 函数，该函数可以根据 token 类型将元素分类到单独的数组中，然后输出一个简单的 HTML 表格，并将 bugtoken 类型作为列标题。

对于 bugs = ['BD-2', 'SSNC-1', 'SSNC-3', 'RI-2', 'RC-10'] 数组。`

输出应该是这样的:

 ___________________________________
| BD      SSNC        RI      RC    |
|------+---------+--------+---------+
|BD-2  | SSNC-1, |   RI-2 |  RC-10  |
|      | SSNC-3  |        |         |
|______|_________|________|_________|

Answer 1

我建议使用对象与匹配的标识符进行分组。

var data = ['BD-2', 'SSNC-1', 'SSNC-3', 'RI-2', 'RC-10', 'BD-2', 'SSNC/1', 'SSNC/3', 'RI/1', 'RC/10', 'BD-2', 'SSNC-1', 'SSNC3', 'RI-2', 'RC10'],
    grouped = function (data) {
        var o = {};
        data.forEach(function (a) {
            var group = a.match(/^[a-zA-Z]+/);
            o[group] = o[group] || [];
            o[group].push(a);
        });
        return o;
    }(data);

document.write('<pre>' + JSON.stringify(grouped, 0, 4) + '</pre>');

更新，结果具有不同的 token 和 ID。

var data = ['BD-2', 'SSNC-1', 'SSNC-3', 'RI-2', 'RC-10', 'BD-2', 'SSNC/1', 'SSNC/3', 'RI/1', 'RC/10', 'BD-2', 'SSNC-1', 'SSNC3', 'RI-2', 'RC10'],
    grouped = function (data) {
        var o = {}, r = {};
        data.forEach(function (a) {
            var group = a.match(/^[a-zA-Z]+/),
                number = a.match(/\d+$/);
            o[group] = o[group] || {};
            r[group] = r[group] || [];
            if (!(number in o[group])) {
                o[group][number] = r[group].push(a) - 1;
            }
            if (r[group][o[group][number]] !== a) {
                r[group][o[group][number]] = group + '-' + number;
            }
        });
        return r;
    }(data);

document.write('<pre>' + JSON.stringify(grouped, 0, 4) + '</pre>');