Question

我有一个数组：

        var cells = [
            [1, 2, 3],
            [4, 5, 6],
            [7, 8, 9]
        ];

我的javascript代码解析此数组并绘制为表格。

现在我想添加函数来简化向表中添加行和单元格，所以我从这段代码开始：

Array.prototype.tsoAddRow = function () {
    this.push([]);
    return this[this.length-1];
};


Array.prototype.tsoAddCell = function (value) {
    this.push(value);
};

cells.tsoAddRow().tsoAddCell("123");

效果很好，结果是Array [ Array[1] ]，但我需要更多。

我如何改进这个功能，以便能够使用它们：

cells.tsoAddRow().tsoAddCell("1").tsoAddCell("2").tsoAddCell("3")
.tsoAddRow().tsoAddCell("4").tsoAddCell("5").tsoAddCell("6")
.tsoAddRow().tsoAddCell("7").tsoAddCell("8").tsoAddCell("9")

或类似的链式方式。表格可能要复杂得多，例如，这里有另一个：

        cells = [
            [
                "Lorem ipsum",
                "Lorem ipsum2",
                [
                    ["111", "222"]
                ]
            ],
            [
                "Lorem ipsum1",
                "Lorem ipsum12"
            ],
            [
                "Lorem ipsum2",
                "Lorem ipsum22"
            ],

更新1：

感谢@binariedMe我有解决方案，这里替代上面的数组，但只使用链式函数：

        cells
            .tsoAddRow()
                .tsoAddCell("Lorem ipsum")
                .tsoAddCell("Lorem ipsum")
                .tsoAddCell(
                    new Array().tsoAddRow()
                        .tsoAddCell("111")
                        .tsoAddCell("222")
                    )
            .tsoAddRow()
                .tsoAddCell("Lorem ipsum1")
                .tsoAddCell("Lorem ipsum12")
            .tsoAddRow()
                .tsoAddCell("Lorem ipsum2")
                .tsoAddCell("Lorem ipsum22");

Answer 1

为tsoAddCell创建此函数

Array.prototype.tsoAddCell = function (value) {
  this.length && this[this.length-1].push(value); return this;
};

并使tsoAddRow函数如下：

Array.prototype.tsoAddRow = function () {
  this.push([]);
  return this;
};

说明：

添加单元格应该在添加的最后一行上完成，但是每次返回原始数组时链接我们需要的所有内容，以便我们可以对其执行下一个任务。因此，您需要从每个函数返回它。

Answer 2

Array.prototype.tsoAddCell = function (value) {
    var _this = this;
    value.forEach(function(i) {
        _this.push(i);
    })
};

cells.tsoAddRow().tsoAddCell([1,2,3,4,5,6,7]);

我希望这可以帮到你

Answer 3

如果您真的想要方法链接，就像您在请求中描述的那样，您还需要从tsoAddCell方法返回当前数组。所以

Array.prototype.tsoAddCell = function (value) {
    this.push(value);
    return this;
};

但我怀疑这会给你提供你所期望的灵活性，因为它只允许你在当前数组中创建嵌套数组，而不是例如当前行的新兄弟行。

如果你想要更多的灵活性，你可以结合我的答案和Vasilij的答案。

或者如果您需要更大的灵活性，您应该提供另一种方法，允许选择当前数组的父数组。但是你需要跟踪那个父数组。类似的东西：

Array.prototype.tsoAddRow = function () {
    this.push([]);
    var row = this[this.length-1];
    row.parent = this;
    return row;
};

Array.prototype.parent = function() {
    return this.parent;
}

然后您的请求会变成：

cells.tsoAddRow().tsoAddCell("1").tsoAddCell("2").tsoAddCell("3")
.parent().tsoAddRow().tsoAddCell("4").tsoAddCell("5").tsoAddCell("6")
.parent().tsoAddRow().tsoAddCell("7").tsoAddCell("8").tsoAddCell("9");

然后作为改进，你可以为tsoAddRow添加一些逻辑以检查父本身，这样你就可以避免显式调用parent（）。但是，如果您只需要构建一个二维数组，那当然是有用的。如果您需要更多维度，则需要扩展API。

通过链式函数调用向数组添加元素

3 个答案: