Почему indexOf находит подходящие значения там где их нет?

Question

[2Ernest5]

Пытаюсь осилить мультифильтр. Есть переменная с товарами, у каждого товара есть свой id и набор свойств. Есть фильтр с массивом activeOptions, заполняется при переборе активных чекбоксов. Фильтрацию товаров провожу таким образом - делаю копию массива с товарами и удаляю из нее неподходящие товары. Проблема возникла на стадии с indexOf. Почему то удаляется меньше значений чем должно было, остаются товары которые по логике не подходят. Не могу понять почему это происходит да и вообще правильный ли я выбрал метод.

let products = [
    {
      filterOptions: {
       Бренд: "NK", 
       Тип тормозного диска: " вентилируемый ", 
       Вес [кг]: " 6.29 ", 
       Число отверстий в диске колеса: " 5 отверстия ", 
       Диаметр [мм]: " 300"
      },
      id: 2
     },
   {
    filterOptions: {
      Бренд: "MEYLE", 
      Сторона установки: " задний мост ", 
      Наружный диаметр [мм]: " 300", 
      Высота [мм]: " 66 ", 
      Толщина тормозного диска (мм): " 20"
     }, 
    id: 3
];

    let filter = {
      activeOptions: {Бренд: "NK", Тип тормозного диска: " вентилируемый ",}
    }


    function filterProducts() {
        filter.activeOptions = []

        $(".filter input:checked").each(function (index, input) {
            let val = $(input).attr("value")
            let key = $(input.closest(".filter__item")).attr("data-filter")

            if (key in filter.activeOptions) {
                filter.activeOptions[key].push(val)
            } else {
                filter.activeOptions[key] = new Array()
                filter.activeOptions[key].push(val)
            }
        })

        $("table tr:has('.table-advance')").hide()

        let filteredProducts = products.map(val => val)

        for (let option in filter.activeOptions) {

            filteredProducts.forEach(product => {

                if (filter.activeOptions[option].indexOf(product.filterOptions[option]) === -1) {

                    const idx = filteredProducts.findIndex(el => el.id === product.id)

                    filteredProducts.splice(idx, 1)

                    console.log(product.filterOptions);
                    console.log(filter.activeOptions);
                }
            })
        }

        filteredProducts.forEach(product => {
            document.querySelector(`tr[data-id="${product.id}"]`).style.display = ""
        })
    }

    $(".filter").on("change", ".filter__checkbox", filterProducts)

Comments

[WbICHA]

(filter.activeOptions[option].indexOf(product.filterOptions[option]) === -1)

Зачем тут indexOf, когда есть includes?

Answer 1

[Aetae]

Не используй splice с forEach. Используй либо filter(создавая новый массив), или цикл с обратным перебором, или простой цикл и коррекцию индекса после удаления.

Когда ты делаешь splice(i, 1) длина массива уменьшается на 1 и по индексу i становится следующий элемент. Соответственно, при следующей итерации i+1 указывает не на следующий элемент(который сдвинулся вверх), а на через один.

Comments

[2Ernest5]

Большое спасибо! Ваш совет помог решить проблему)