Как правильно работать с массивами в DOM?

Question

[Ruslan]

Добрый вечер! Я только изучаю JS, прошу вам, если хотите подсказать, то делать это понятным языком :).
Я сделал To Do List (впервые), все работает, но меня попросили добавить фильтр задач, если такая задача есть то спрашивать добавить ли похожую и т.д. Как я понял, нужно создавать массив и все такое. Начал - вроде получается но зашел в тупик.
1) Как я думал, arr.filter ищет первый подходящий элемент в массиве, а у меня он ищет и проходит по всем. То есть, если есть дублирующая задача и я ее добавляю, то при следующей такой-же задаче confirm вылезет уже не 1, а 2, 3 и т.д. раз пока все не зависнет...

2 Не совсем допираю как добавить удаление элементов из массива при удалении таска. Головой вроде понимаю, что при удалении нужно получить индекс этого элемента в массиве и удалить, но реализовать как что-то не доходит...

Прошу помощи :)

Мой код:

Comments

[Фёдор]

Я задавался похожим вопросом Как добавить элементы todo List в массив для дальшейше работы с ними? И как поменять местами checkbox? там есть примерный вариант реализации в комментариях. Может Вам подойдёт.

[Вадим]

Первый попавшийся возвращает не filter, а find.
Удалять элементы стоит не по индексу, а по какому-то уникальному ключу. Как правило это id таски.
Тут есть два варианта.
1) Через filter вернуть массив без одной таски.
2) С помощью findIndex найти индекс объекта в массиве, а потом splice.

Answer 1

[Aleksandr-JS-Developer]

Если ToDo list примитивный (в массиве todoArr хранится только одна строка на один todoItem), то можно один раз проверить с помощью .indexOf();

Примерно так:

// newTask - массив со строками задач. Типа ['Eat', 'Run', 'Fly']
const isClone = newTask => todoArr.indexOf( newTask  ) !== -1;

А уже в функции добавления нового todoItem:

...

if( isClone( newTask ) ){
  if( confirm( 'В списке уже есть такая задача, всё-равно добавить?' ) ){
    // Добавляем
  }
}

...

Comments

[Tim]

1. зачем отдельную функцию писать, если можно так

if( todoArr.includes( newTask ) ){
  if( confirm( 'В списке уже есть такая задача, всё-равно добавить?' ) ){
    // Добавляем
  }
}

2. Если допустим первая задача была "купить хлеб", а вторая задача будет "хлеб". Задачи разные, но по вашему скрипту будет считать,что такая задача уже добавлена, но она не копия

[Aleksandr-JS-Developer]

Tim,
1.
1. Это зависит от стиля написания кода. Я стараюсь, чтобы в условии if было как можно меньше кода.
2. Например, если нужно будет усложнить алгоритм для вычисления клонов, то меняем функцию isClone только.

2
Не совсем понял вас:

Если допустим первая задача была "купить хлеб", а вторая задача будет "хлеб". Задачи разные, но по вашему скрипту будет считать, что такая задача уже добавлена, но она не копия

Метод arr.indexOf(); вернёт -1, функция вернет false и новая задача не добавиться.
Если строки посимвольно совпадут, то только тогда arr.indexOf(); вернет не -1. Строка "купить хлеб" !== строке "хлеб".
Или я вас неправильно понял?

array.indexOf

[Tim]

Aleksandr-JS-Developer, да все верно. я перепутал немного. Мы ведь в массиве ищем

[Aleksandr-JS-Developer]

Tim, бывает)))
Вы так однозначно написали, что я аж сам немного засомневался))