javascript过滤方法查询

我试图理解JavaScript中的

过滤器
方法

我有一个数组，有一个复选框和一个全局变量，我想控制在数组中显示什么

如果复选框未选中，并且变量
filterTodos
的值为false（默认为false），则我希望显示数组的所有项。如果选中该复选框并且variable filterTodos的变量值为true，我只想显示未完成的任务。（
已完成：false
）

我知道我的filter方法的代码是错误的，因为它没有做任何事情，当复选框被取消选中时，它会多次显示数组

这是我的代码：


让todos=[{
文本：“订购机票”，
已完成：false
}, {
文本：“疫苗预约”，
已完成：正确
}, {
文本：“订购签证”，
已完成：正确
}, {
文字：“预订酒店”，
已完成：false
}, {
文字：“预订去机场的出租车”，
已完成：正确
}]
设filterTodos=false
showTodos（todos）；
函数addTodo（add_todo）{
设p=document.createElement（'p'）
p、 textContent=add_todo.text
document.querySelector（'body'）.appendChild（p）
让复选框=document.createElement（“输入”）
让标签=document.createElement（“标签”）
checkBox.type=“checkBox”
checkBox.value=addTodo.completed
document.querySelector（'body'）.appendChild（复选框）
//创建变量以生成radiobutton的随机id
const id=Math.random（）.toString（36）
复选框.setAttribute（“名称”，id）
//在已完成的
开关（添加待办事项已完成）{
大小写正确：
checkBox.setAttribute（“checked”，“true”）//将true按钮标记为选中
打破
案例错误：
checkBox.setAttribute（“未选中”、“false”）//将false按钮标记为选中
打破
违约：
打破
}
document.querySelector（'body'）.appendChild（标签）
label.appendChild（document.createTextNode（add_todo.completed））
}
函数showTodos（show\u todos）{
//函数来显示整个对象
show_todos.forEach（函数（todo））{
addTodo（todo）；
})
}
函数未完成（未完成TODOS）{
未完成。筛选器（！todo.completed）
}
函数hideCompleted（）{
document.querySelector（“#filterTodo”）.addEventListener（'change'，函数（e）{
if（document.getElementById（'filterTodo'）。选中）{
filterTodos=真；
控制台日志（filterTodos）；
filterTodos=todos.filter（未完成）
未完成（待办事项）
}否则{
filterTodos=假；
控制台日志（filterTodos）；
showTodos（todos）
}
})
}
待办事项
隐藏完成



新搜索
添加待办事项
过滤器方法获取数组和循环的所有项
通过它。例如：

var words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter(word => word.length > 6);

将仅返回长度大于6的数组项

因此，我希望您：
completeTodos.filter（todo=>todo.completed）
它将只返回已完成的todo。
解决您的错误的一个步骤是使您的代码成为您想要做的事情的最小可验证功能。然后你就对发生的事情有了一个清晰的了解。你也可以抓起一张纸来写你程序的流量

分解您的代码我们有：

初始分配
todos
数组、
filterTodos
bool控制变量和
showTodos
以将它们添加到页面中
功能
addTodo
：向页面添加
todo

函数
showTodos
：迭代
todos
调用
addTodo
现在，考虑到流量，我们还可以。然后我们有：

函数
unComplete
：只需返回
todos
用
completed:false过滤的数组即可。它在HTML上不起任何作用

函数
hideCompleted
：todo

的每个HTML元素的onchange事件，如果：

--选中：只需调用

unComplete

即可对HTML进行0更改

--未选中：再次调用

showTodos

将所有

todo

再次添加到HTML

你有很多方法来解决这个问题。我正在展示可能是最愚蠢的一个，然后你可以根据自己的意愿改进它：

让todos=[{
文本：“订购机票”，
已完成：false
}, {
文字：“预订去机场的出租车”，
已完成：正确
}]
init（）；
// ----------
函数addTodo（add_todo，index）{
让复选框=document.createElement（“输入”）
checkBox.type=“checkBox”
checkBox.id='chk'+索引
让标签=document.createElement（“标签”）
label.appendChild（复选框）
label.innerHTML+=add_todo.text
让li=document.createElement（“li”）
li.附加子项（标签）
document.getElementById（'ToDoList'）.appendChild（li）
document.getElementById（checkBox.id）.checked=add\u todo.completed
}
函数addAllTodos（show\u todos）{
show_todos.forEach（函数（todo，索引）{
addTodo（todo，索引）；
})
}
函数showTodo（li）{
li.style.display='列表项'
}
功能隐藏（li）{
li.style.display='none'
}
功能仅显示未完成的待办事项（li）{
if（li.querySelector（'input[type=checkbox]'）。选中）{
hideTodo（李）
}
否则{
showTodo（李）
}
}
函数hideCompleted（）{
func=this.checked？仅显示未完成的TODO:显示TODO
document.querySelectorAll（'#todolist li'）.forEach（func）
}
函数init（）{
document.getElementById（“hideCompleted”）.addEventListener（“更改”，hideCompleted）
document.getElementById（“btnAddTodo”）.addEventListener（'click'，function（）{
让todo={
text:document.getElementById（'inputNewTodo'）。值，
已完成：false
}
todo.push（todo）
addTodo（todo，todos.length-1）
})
addAllTodos（todos）；
}

.todos列表{
列表样式：无；
保证金：0；
填充：0；
}

答复
待办事项
隐藏完成