在 array.filter() 中使用“&&”條件過濾

Question

所以人們我有 3 個復選框：

                    <label>
                        <input type="checkbox" value="Java" id="check-java" class="check-java filled-in" 
                         />
                        <span>Java</span>
                    </label>
                    &nbsp;
                    <label>
                        <input type="checkbox" value="JavaScript" id="check-javascript" class="check-javascript filled-in" />
                        <span>JavaScript</span>
                    </label>
                    &nbsp;
                    <label>
                        <input type="checkbox" value="Python" id="check-python" class="check-python filled-in"
                             />
                        <span>Python</span>
                    </label>

當用戶選擇此復選框時，我會在 eventListener` 中捕獲它：

const checkBoxes = document.querySelectorAll('input[type=checkbox]');
checkBoxes.forEach((box) => {
    return box.addEventListener('change', filterByCheckBox)
});

因此，當用戶選擇兩個或多個此復選框時，我需要過濾一個數組 (devsFiltered)，其中包含一個名為“programmingLanguages”的子數組，在此數組中我有 3 個可能的值“Java、JavaScript 或 Python”，並且我僅當數組包含復選框選擇的兩個或多個值時才需要過濾，我嘗試使用的代碼是：

function filterByCheckBox(e) {
                const checkOption = e.target.value;
                if (devsFiltered.length > 0) {
                    const filtered  = devsFiltered
                    .filter(item => item.programmingLanguages
                        .every(lang => lang.language == checkOption));
                         mapUsers(filtered)
                }
        }

Answer 1

您需要獲取所有選擇，並且需要查看是否所有選中的項目都在數組中。

 var people = [ { name: "w", codes : ['a', 'b'] }, { name: "x", codes : ['a', 'c'] }, { name: "y", codes : ['a', 'b'] }, { name: "z", codes : ['b','c'] } ]; var form = document.querySelector("form"); form.addEventListener("change", function() { // get all the checked checkboxes const selections = document.querySelectorAll('[type="checkbox"]:checked'); // get all their values const values = selections && [...selections].map(({ value }) => value); // filter the list to make sure all the values are in the object const filtered = values ? people.filter(({ codes }) => values.every(code => codes.includes(code))) : people; // Just to display something console.log(filtered.map(f => f.name).join(",")); });

 <form id="form"> <label for="a">A</label><input type="checkbox" id="a" value="a" /> <label for="b">B</label><input type="checkbox" id="b" value="b" /> <label for="c">C</label><input type="checkbox" id="c" value="c" /> </form>

以一種更具可讀性的格式

您需要獲取所有選擇，並且需要查看是否所有選中的項目都在數組中。

 var people = [ { name: "w", codes : ['a', 'b'] }, { name: "x", codes : ['a', 'c'] }, { name: "y", codes : ['a', 'b'] }, { name: "z", codes : ['b','c'] } ]; var form = document.querySelector("form"); form.addEventListener("change", function() { let filtered = people; const selections = document.querySelectorAll('[type="checkbox"]:checked'); if (selections) { const values = [...selections].map(x => x.value); filtered = people.filter(person => values.every(code => person.codes.includes(code) ) ) } // Just to display something console.log(filtered.map(f => f.name).join(",")); });

 <form id="form"> <label for="a">A</label><input type="checkbox" id="a" value="a" /> <label for="b">B</label><input type="checkbox" id="b" value="b" /> <label for="c">C</label><input type="checkbox" id="c" value="c" /> </form>