我正在研究将任务卡移至下一列的StateService方法。我能够编写工作正常的taskMoveLeft
方法,但是无法使用taskMoveRight
循环复制forEach
方法的功能,我只能使它与for
循环一起使用。taskMoveLeft
方法的工作示例(使用forEach
):
taskMoveLeft(id) {
state.columns.forEach((column, columnIndex) => {
if (state.columns[0] !== column) {
if (column.cards) {
column.cards.forEach((card, cardIndex) => {
if (card.id === id) {
if (state.columns[columnIndex - 1].cards) {
// Add card to the target column card collection
state.columns[columnIndex - 1].cards.push(card);
} else {
// Create target column card collection and add card
state.columns[columnIndex - 1].cards = Array.of();
state.columns[columnIndex - 1].cards.push(card);
}
// Remove the card from the source column card collecion
state.columns[columnIndex].cards.splice(cardIndex, 1);
}
});
}
}
});
}
taskMoveRight
方法的工作示例(使用for
循环):taskMoveRight(id) {
for (let i = 0; i < state.columns.length; i++) {
if (state.columns[state.columns.length - 1] !== state.columns[i]) {
if (state.columns[i].cards) {
for (let j = 0; j < state.columns[i].cards.length; j++) {
if (state.columns[i].cards[j].id === id) {
if (state.columns[i + 1].cards) {
// Add card to the target column card collection
state.columns[i + 1].cards.push(state.columns[i].cards[j]);
} else {
// Create target column card collection and add card
state.columns[i + 1].cards = Array.of();
state.columns[i + 1].cards.push(state.columns[i].cards[j]);
}
// Remove the card from the source column card collecion
return state.columns[i].cards.splice(j, 1);
}
}
}
}
}
}
无法使
taskMoveRight
方法与forEach
循环一起使用。使用此代码,卡总是移到最右列:taskMoveRight(id) {
state.columns.forEach((column, columnIndex) => {
if (state.columns[state.columns.length - 1] !== column) {
if (column.cards) {
column.cards.forEach((card, cardIndex) => {
if (card.id === id) {
// Create target column card collection
if (!state.columns[columnIndex + 1].cards) {
state.columns[columnIndex + 1].cards = Array.of();
}
// Add card to the target column card collection
state.columns[columnIndex + 1].cards.push(card);
// Remove the card from the source column card collecion
state.columns[columnIndex].cards.splice(cardIndex, 1);
}
});
}
}
});
}
最佳答案
forEach
并不是正确的工具,因为您要尽早终止循环。相反,由于需要卡的索引,请使用findIndex
。有关该建议和其他建议,请参见***
注释:
taskMoveRight(id) {
for (let i = 0; i < state.columns.length; i++) {
// *** Instead of repeating it all over
const column = state.columns[i];
if (state.columns[state.columns.length - 1] !== column) {
if (column.cards) {
// *** Find the card
const cardIndex = column.cards.findIndex(card => card.id == id);
// *** Get the card if found
const card = cardIndex !== -1 && column.cards[cardIndex];
if (card) {
// *** Instead of repeating it
const nextColumn = state.columns[i + 1];
if (nextColumn.cards) {
// Add card to the target column card collection
nextColumn.cards.push(card);
} else {
// Create target column card collection and add card
// *** Using Array.of() to create an empty array and then pushing
// *** to it is quite round-about; instead: [card]
nextColumn.cards = [card];
}
// Remove the card from the source column card collecion
return column.cards.splice(cardIndex, 1);
}
}
}
}
}
关于javascript - 用`forEach`循环代替`for`循环,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/53081493/