我在 JS 中有一個 todo 應用程式，具有以下功能：
這是將 id 傳遞給事件偵聽器以洗掉待辦事項的函式的一部分
removeButton.addEventListener('click', function () {
removeTodo(todo.id)
renderTodos(todos, filters)
})
此函式洗掉待辦事項 - 我使用了 2 種方法，findIndex 方式效果很好，它洗掉了待辦事項并呈現新的待辦事項很好 - 我認為我評論過的過濾器方法也可以作業，但它沒有，它確實洗掉待辦事項，但除非我重繪 頁面，否則它不會自動更新瀏覽器中的串列，而 splice 會自動更新，為什么會發生這種情況？它會在 renderTodos 開始讀取串列之前等待更新本地存盤嗎？請注意，在不起作用的示例中，我將 newTodos 傳遞給 save 函式，我只是將其更改為 todos 用于拼接方式。
const removeTodo = function (id) {
const todoIndex = todos.findIndex(function (todo) {
return todo.id === id
})
if (todoIndex > -1) {
todos.splice(todoIndex, 1)
}
// newTodos = todos.filter(function (todo) {
// return todo.id !== id
// })
saveTodos(todos)
}
待辦事項串列保存在本地存盤中
const saveTodos = function (todos) {
localStorage.setItem('todos', JSON.stringify(todos))
}
這是資訊的渲染功能
const renderTodos = function (todos, filters) {
const filteredTodos = todos.filter(function (todo) {
const searchTextMatch = todo.text.toLowerCase().includes(filters.searchText)
const hideCompletedMatch = !filters.hideCompleted || !todo.completed
return searchTextMatch && hideCompletedMatch
})
const todosLeft = filteredTodos.filter(function (todo) {
return !todo.completed
})
document.querySelector('#todos').innerHTML = ''
document.querySelector('#todos').appendChild(generateSummaryDom(todosLeft))
filteredTodos.forEach(function (todo) {
document.querySelector('#todos').appendChild(generateTodoDom(todo))
})
}
uj5u.com熱心網友回復：
splice()改變你正在渲染的todos陣列，同時filter()回傳一個你沒有使用的新陣列。
要使其與filter()您一起使用，您需要newTodos從 remove 函式回傳并呈現回傳的陣列，而不是原始todos陣列。
removeButton.addEventListener('click', function () {
const newTodos = removeTodo(todo.id);
saveTodos(newTodos)
renderTodos(newTodos, filters);
})
const removeTodo = function (id) {
return todos.filter(todo => todo.id !== id)
}
const saveTodos = function (todos) {
localStorage.setItem('todos', JSON.stringify(todos))
}
uj5u.com熱心網友回復：
重新分配變數沒有副作用；重新分配一個識別符號對其他地方的識別符號沒有影響。正在做
newTodos = todos.filter(function (todo) {
return todo.id !== id
})
saveTodos(todos)
}
意味著您已經將一些結果放入其中newTodos而沒有對其進行任何其他操作。它不會被存盤（或渲染，盡管未顯示您的渲染方式）。
傳遞新過濾的待辦事項，并從那里渲染（無論你在做什么） - 不要忘記宣告你的變數。
const newTodos = todos.filter(function (todo) {
return todo.id !== id
})
saveTodos(newTodos);
renderTodos(newTodos);
同時renderTodos退出立即偵聽器回呼。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/474698.html
標籤：javascript 数组 筛选 拼接
上一篇：未定義的陣列鍵“影像”
下一篇：訪問資料框中的單元格時輸出不穩定