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

Question

我有一个数组：

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

我的 javascript 代码解析这个数组并绘制为 table。

现在我想添加函数来简化向 table 添加行和单元格的过程，所以我从以下代码开始：

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

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 2

为 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;
};

解释：

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

Answer 3

如果您真的想要方法链接，就像您在请求中描述的那样，您将需要 return 来自 tsoAddCell 方法的当前数组。所以

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

但我怀疑这是否会给您带来预期的灵活性，因为它只允许您在当前数组中创建嵌套数组，例如当前行的新同级行。

如果您想要更大的灵活性，可以结合使用我的答案和 Vasilij 的答案。

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

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 将需要扩展。

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

Adding elements to array via chained functions calls

javascript

arrays

rows

cells

chained