javascript过滤方法查询

Question

我正在尝试理解JavaScript中的filter方法。

我有一个数组，并带有一个复选框和一个全局变量，我想控制在数组中显示的内容。

如果未选中此复选框，并且变量filterTodos的值为false（默认值为false），我想显示数组的所有项目。如果选中此复选框，并且变量filterTodos的变量值为true，我只想显示未完成的任务。 （completed: false）

我知道我的filter方法代码是错误的，因为它没有执行任何操作，并且当未选中此复选框时，它将多次显示数组。

这是我的代码：

let todos = [{
  text: 'Order airline tickets',
  completed: false
}, {
  text: 'Vaccine appointment',
  completed: true
}, {
  text: 'Order Visa',
  completed: true
}, {
  text: 'Book hotell',
  completed: false
}, {
  text: 'Book taxi to airport',
  completed: true
}]

let filterTodos = false

showTodos(todos);

function addTodo(add_todo) {
  let p = document.createElement('p')
  p.textContent = add_todo.text
  document.querySelector('body').appendChild(p)
  let checkBox = document.createElement("input")
  let label = document.createElement("label")
  checkBox.type = "checkbox"
  checkBox.value = addTodo.completed
  document.querySelector('body').appendChild(checkBox)

  //create variable to generate random id for radiobutton
  const id = Math.random().toString(36)

  checkBox.setAttribute("name", id)

  //Switch loop over the completed
  switch (add_todo.completed) {
    case true:
      checkBox.setAttribute("checked", "true") // Mark true button as checked
      break
    case false:
      checkBox.setAttribute("unchecked", "false") // Mark false button as checked
      break
    default:
      break
  }

  document.querySelector('body').appendChild(label)
  label.appendChild(document.createTextNode(add_todo.completed))
}

function showTodos(show_todos) {
  //function to show the whole object
  show_todos.forEach(function(todo) {
    addTodo(todo);
  })
}

function unComplete(uncompleteTodos) {
  unComplete.filter(!todo.completed)

}

function hideCompleted() {
  document.querySelector("#filterTodo").addEventListener('change', function(e) {

    if (document.getElementById('filterTodo').checked) {
      filterTodos = true;
      console.log(filterTodos);
      filterTodos = todos.filter(unComplete)
      unComplete(todos)
    } else {
      filterTodos = false;
      console.log(filterTodos);
      showTodos(todos)

    }
  })
}

<h1>Todos</h1>
<label style="font: bold 1.5em courier !important">
     <input type="checkbox" id="filterTodo" onChange="hideCompleted()">Hide completed
     </label><br><br>
<input id="search-todo" type="text" placeholder="Search todo">
<button id="reset-search" type="reset" value="reset" onclick="window.location.reload()">New search</button>

<div id="todos"></div>
<form action="" id="addTodo">
  <input type="text" name="inputTodo" placeholder="Insert new todo">
  <button>Add Todo</button>
</form>

<script src="js/index2.js"></script>

Answer 1

解决错误的第一步，是使代码成为您想做的事情的最小可验证功能。然后，您可以清楚地了解正在发生的事情。您也可以抓一张纸写程序的流程。

分解代码，我们有：

1. todos数组，filterTodos bool控制var和showTodos的初始分配，将它们添加到页面中。
2. 功能addTodo：向页面添加todo
3. 函数showTodos：迭代todos来调用addTodo

到现在为止，我们可以考虑通量。然后我们有：

1. 函数unComplete：只需返回用todos过滤的completed: false数组。在HTML上没有任何作用

2. 函数hideCompleted：todo的每个HTML元素的onchange事件，如果存在的话：

   -已选中：只需调用unComplete，结果导致对HTML的 0次更改。

   -未选中：再次调用showTodos 再次将所有todos添加到HTML 。

您可以通过多种方法解决此问题。我只展示了最愚蠢的一个，然后您可以根据自己的意愿进行改进：

 
let todos = [{
  text: 'Order airline tickets',
  completed: false
}, {
  text: 'Book taxi to airport',
  completed: true
}]

init();

// ----------

function addTodo(add_todo, index) {
  let checkBox = document.createElement("input")
  checkBox.type = "checkbox"
  checkBox.id = 'chk' + index

  let label = document.createElement("label")
  label.appendChild(checkBox)
  label.innerHTML += add_todo.text

  let li = document.createElement("li")
  li.appendChild(label)

  document.getElementById('todosList').appendChild(li)
  document.getElementById(checkBox.id).checked = add_todo.completed
}

function addAllTodos(show_todos) {
  show_todos.forEach(function(todo, index) {
    addTodo(todo, index);
  })
}

function showTodo(li){
  li.style.display = 'list-item'
}
function hideTodo(li){
  li.style.display = 'none'
}

function showOnlyUncompletedTodo(li) {
  if (li.querySelector('input[type=checkbox]').checked) {
    hideTodo(li)
  }
  else {
    showTodo(li)
  }
}

function hideCompleted() {
  func = this.checked ? showOnlyUncompletedTodo : showTodo
  document.querySelectorAll('#todosList li').forEach(func)
}

function init(){
  document.getElementById("hideCompleted").addEventListener('change', hideCompleted)
  document.getElementById("btnAddTodo").addEventListener('click', function(){
    let todo = {
      text: document.getElementById('inputNewTodo').value,
      completed: false
    }

    todos.push(todo)
    addTodo(todo, todos.length - 1)
  })

  addAllTodos(todos);
}

.todos-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>

    <h1>Todos</h1>
    <label style="font: bold 1.5em courier !important">
      <input type="checkbox" id="hideCompleted"> Hide completed
    </label><br><br>
    <input id="search-todo" type="text" placeholder="Search todo">
    <button id="reset-search" type="reset" value="reset" onclick="window.location.reload()">New search</button>

    <div id="todos"></div>
    <form id="addTodo" onsubmit="return false">
      <input type="text" id="inputNewTodo" name="inputTodo" placeholder="Insert new todo">
      <button id="btnAddTodo">Add Todo</button>
    </form>
    <br>

    <ul id="todosList" class="todos-list">

    </ul>

     <script src="script.js"></script>
  </body>
</html>

Answer 2

Filter方法获取数组的所有项目并循环 通过这。例如：

public bool good(string emailadress)
{

    string query = @"IF EXISTS(SELECT 1 FROM Clients WHERE Email = @email) 
                     SELECT 1 ELSE SELECT 0";
    using(SqlConnection con = new SqlConnection(....here put your connection string...))
    using(SqlCommand cmd = new SqlCommand(query, con))
    {
        con.Open();
        cmd.Parameters.Add("@email", SqlDbType.NVarChar).Value = emailadress;
        int result = (int)cmd.ExecuteScalar();
        return (result == 1);
   }
}

只会从数组中返回长度大于6的项目。

所以我想要的是： var words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present']; const result = words.filter(word => word.length > 6); 只会返回完成的待办事项。