如何改進此代碼（數組數據過濾）

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函數來完成任務：

var newList  = inputs.reduce(
(acc,input, i) => {
if(i%2 ==0  && input.checked && inputs[i+1].checked){ 
acc.push({color:input.value,number:inputs[i+1].value}
)} 
 return acc;
}, 
[]);

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>