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);
}

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

Answer 2

您可以使用以下reduce函数来完成任务：

Node*

Answer 3

问题的正确答案是可以独立于您拥有多少复选框而完成任务的答案。这个答案实现了这个任务。而且我还添加了一个复选框。

var inputs = document.querySelectorAll('.filters input');
var colorsAndNumbers =
[
    {color: 'red', number: 10, color2: 'green'},
    {color: 'yellow', number: 10, color2: 'blue'},
    {color: 'red', number: 5, color2: 'green'},
    {color: 'black', number: 5, color2: 'blue'},
    {color: 'red', number: 5, color2: 'blue'}
];

document.querySelector('.filters').addEventListener('change', function()
{
    var i, newList = colorsAndNumbers.slice(0);
    for(i in inputs)
        newList = newList.filter(function(item)
        {
            return inputs[i].checked ? ''+item[inputs[i].id] == inputs[i].value : !0
        })
    console.log(JSON.stringify(newList, null, '\t'))
});

<form action="#" class="filters">
	<label>
		<input type="checkbox" value="red" id="color"> Color Red
	</label>
	<label>
		<input type="checkbox" value="10" id="number"> Number 10
	</label>
	<label>
		<input type="checkbox" value="green" id="color2"> Color green
	</label>
</form>

如何改进此代码（数组数据过滤）

3 个答案: