Добавление элементов в массив с помощью вызовов связанных функций
У меня есть массив:
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");
3 ответа
Сделать эту функцию для 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;
};
Пояснение:
добавление ячейки должно выполняться в последней добавленной строке, но для объединения всего, что нам нужно, каждый раз возвращать исходный массив, чтобы мы могли выполнить следующую задачу над ним. Следовательно, вам нужно возвращать это из каждой функции.
Если вы действительно хотите цепочку методов, как вы описали в своем запросе, вам нужно будет вернуть текущий массив также из метода tsoAddCell. Так
Array.prototype.tsoAddCell = function (value) {
this.push(value);
return this;
};
Но я сомневаюсь, что это даст вам гибкость, которую вы могли бы ожидать, так как это позволит вам создавать только вложенные массивы в текущем массиве, а не, например, новую строку одного уровня в текущей строке.
Если вы хотите большей гибкости, вы можете использовать комбинацию моего ответа и ответа Василия.
Или, если вам нужна еще большая гибкость, вы должны предоставить другой метод, который позволяет выбрать родительский массив текущего массива. Но тогда вам нужно будет отслеживать этот родительский массив. Что-то вроде:
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 должен быть расширен.
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]);
Я надеюсь это тебе поможет