javascript - 如何改进这段代码(数组数据过滤)

Question

有一段代码可以过滤指定参数的数组，并将结果输出到控制台。在这种情况下，代码会生成过滤器并显示填充数组的对象中的所有颜色:“红色”和数字:10。

代码有效，但当复选框超过两个时就会出现问题。我尝试使用循环，但没有任何效果。帮助优化代码，避免按索引列出输入。应该有一个过滤器函数来执行一项常见任务。

var colorsAndNumbers = [{
    color: 'red',
    number: 10
  },

  {
    color: 'yellow',
    number: 10
  },

  {
    color: 'red',
    number: 5
  },

  {
    color: 'black',
    number: 5
  },

  {
    color: 'red',
    number: 5
  }
]

var form = document.querySelector('.filters');
var inputs = Array.from(document.querySelectorAll('.filters input'));

var formChangeHandler = function() {

  var newList = colorsAndNumbers.filter(function(item) {
    if (inputs[0].checked) {
      return item.color === inputs[0].value;
    } else {
      return item;
    }
  }).

  filter(function(item) {
    if (inputs[1].checked) {
      return item.number === +inputs[1].value;
    } else {
      return item;
    }
  });
  console.clear();
  console.log(newList);
}

form.addEventListener('change', formChangeHandler);

<div class="main">
  <form action="#" class="filters">
    <input type="checkbox" name="features" value="red" id="color">
    <label class="feature" for="color">Color Red</label>

    <input type="checkbox" name="features" value="10" id="number">
    <label for="number">Number 10</label>
  </form>
</div>

Answer 1

var formChangeHandler = function () {

  var newList = colorsAndNumbers.filter(function (item) {
    var colours=inputs.filter(function(i){
            return (i.id==='color' && i.checked);
    });

    var numbers=inputs.filter(function(i){
            return (i.id==='number' && i.checked);
    });
    var selectedColours=colours.map(i=>i.value);
    var selectedNumbers=numbers.map(i=>i.value)

    return ((selectedColours.length == 0 || selectedColours.indexOf(item.color) > -1) && (selectedNumbers.length == 0 || selectedNumbers.indexOf(item.number.toString()) > -1));
  });

  console.log(newList);
}

它维护着两个具有选定颜色和数字的数组，并将筛选选定的值。我们可以为值设置多个复选框，它会根据所选过滤器自动进行过滤。