Question

我正在寻找一组数组并将它们转换为表对象（或类似于表格的东西）。在这种情况下，我有一个潜在的RGB值列表我不关心可视化二维物体，而只是选择和操纵它。

这是我开始的：一组数组：

["Class", "R", "G", "B"],
["1", "166", "206", "227"],
["2", "31", "120", "180"], 
["3", "51", "160", "44"]

然后我希望能够根据列或行选择内容。我更关心的是选择元素的简易性，而不是创建html对象（tr / td）。我想根据列标识符（例如R：“166”，“31”，“51”）或行标识符（1：“31”，“120”，“180”）选择和处理数据 - - 例如）。

Class   |   R    |    G    |    B  
1       |  166   |   206   |   227  
2       |   31   |   120   |   180   
3       |   51   |   160   |    44

以下是我的问题：
1.我在寻找什么样的物品？
2.我如何从一系列数组创建它，其中键/表头是基于第一个数组（动态分配 - 而不是硬编码）？

感谢您对此的看法：

大卫

Answer 1

我建议使用带有对象的数组：

var color = [
    { Class: 1, R: 166, G: 206, B: 227 },
    { Class: 2, R: 31, G: 120, B: 180 },
    { Class: 3, R: 51, G: 160, B: 44 }
];

和

var classIndex = {
    '1': 0,
    '2': 1,
    '3': 2
};

用于存储数组项的索引。

通过color[classIndex[1]]['R']

访问

工作示例：

＆＃13;

function colorType(cl, r, g, b) {
    return { Class: cl, R: r, G: g, B: b };
}

function addColor(ct) {
    color.push(ct);
    classIndex = {};
    color.forEach(function (a, i) { classIndex[a.Class] = i; });
}

function getColorColumn(key) {
    return color.map(function (a) { return a[key]; });
}

function updateColorColumn(key, values) {
    color.forEach(function (a, i) { a[key] = values[i]; });
}

function changeColumn(key, cb) {
    color.forEach(function (a, i) { a[key] = cb(a[key]); });
}

var color = [
        { Class: 1, R: 166, G: 206, B: 227 },
        { Class: 2, R: 31, G: 120, B: 180 },
        { Class: 3, R: 51, G: 160, B: 44 }
    ],
    classIndex = {
        '1': 0,
        '2': 1,
        '3': 2
    };

// display a single item
document.write('<pre>color[classIndex[1]][\'R\']: ' + color[classIndex[1]]['R'] + '</pre>');

// display the color array
document.write('<pre>color: ' + JSON.stringify(color, 0, 4) + '</pre>');

// add a new color
addColor(colorType(4, 51, 102, 153));
document.write('<pre>color after insert: ' + JSON.stringify(color, 0, 4) + '</pre>');
document.write('<pre>classIndex after insert: ' + JSON.stringify(classIndex, 0, 4) + '</pre>');

// get column B
var blue = getColorColumn('B');
document.write('<pre>blue: ' + JSON.stringify(blue, 0, 4) + '</pre>');

// change blue
blue = blue.map(function (a) { return Math.min(a * 1.2, 255) | 0; });
document.write('<pre>blue after update: ' + JSON.stringify(blue, 0, 4) + '</pre>');

// update column B with blue
updateColorColumn('B', blue);
document.write('<pre>color after changing B: ' + JSON.stringify(color, 0, 4) + '</pre>');

// change R directly
changeColumn('R', function (v) { return Math.max(v * 0.5, 0) | 0; });
document.write('<pre>color after changing R: ' + JSON.stringify(color, 0, 4) + '</pre>');

＆＃13;

Answer 2

这是我想出的。好处是它是一个可重用的数据结构，与列名无关，您可以保留原始数据结构（数组数组）。您需要在必要时添加任何必要的健全性检查（确保存在行/列等）。

https://jsfiddle.net/z129o3v9/4/

var RGBData = function(arrayOfDataElements) {

    this.keys = arrayOfDataElements[0];
    this.data = arrayOfDataElements.slice(1);

    this.getRow = function(row) {
        return this.data[row-1].slice(1);
    };

    this.getColumn = function(column) {
        return this.data.map(function(row) {
            return row[this.keys.indexOf(column)];
        }, this);
    };

    this.addRow = function(row) {
        this.data.push(row);
    }

    this.updateValue = function(row, column, value) {
        var index = this.keys.indexOf(column);
        this.data[row-1][index] = value;
    };
};

var arrayOfDataElements = [
    ["Class", "R", "G", "B"],
    ["1", "166", "206", "227"],
    ["2", "31", "120", "180"]
];

var data = new RGBData(arrayOfDataElements);

alert("Row 2: " + data.getRow("2"));
alert("Column R: " + data.getColumn("R"));
data.updateValue("2", "R", "69");
alert("Column R after update: " + data.getColumn("R"));

从数组Javascript创建表

2 个答案: