var dataArray = []
var someData = document.getElementById('fieldForData')
var ul = document.createElement('ul')
document.body.appendChild(ul)
var actionButton = document.querySelector('button')
actionButton.addEventListener('click', function(){
for(let element of dataArray){
if(element !== someData.value){
dataArray.push(someData.value)
var li = document.createElement('li')
li.textContent = someData.value.toUpperCase()
ul.appendChild(li)
console.log(element)
}
}
})
Могу ли я попросить вас проверить ход моих мыслей при анализе условного оператора if? Потому что для меня важно понимать абсолютно все тонкости.
Итак, по правилам функционирования логического оператора «ИЛИ», если один из операндов принимает значение true, то будет выполнена инструкция в фигурных скобках, либо, как у вас, выполнится «конструкция» return (что означает return без указание значения? прерывание указанного действия?). Если же ВСЕ операнды в скобках принимают значение false, то «конструкция» return игнорируется, и значение переменной data «пушится» в конец массива dataArray.
Теперь по поводу истинности операндов. Левый. При нажатии по кнопке когда поле инпута пустое получаем: data value = empty string, Boolean(empty string) = false. Однако логический оператор «НЕ» перед операндом data переводит его булево значение в true. Проверка на предмет пустого значения инпута работает! Проверяем правую (полагая, что Boolean(операнд в левой) == false). Получается, что метод indexOf() является подобием цикла, который перебирает все элементы массива и возвращает индекс первого символа искомой фразы, когда обнаружено первое совпадение. То есть, чтобы избежать повторного занесения в массив одинаковых данных Boolean(dataArray.indexOf(data) = -1) должно иметь значение true. Значение «-1» возвращается, когда совпадений в массиве НЕ НАЙДЕНО! Нас же интересует противоположный эффект. Поэтому и использует оператор «НЕ» перед знаком «=».
Вопросы:
1) Понимаю, что по большей части метод indexOf() является самым оптимальным решением. Однако, можно ли реализовать этот метод в контексте данной задачки с помощью обычного цикла for?
2) В разных источниках (в том числе зарубежных монографиях) порой встречается противоречивая информация. Так всё-таки, нужно использовать точку с запятой в конце строки или нет?
3) Мне удалось уловить предыдущую версию вашего решения. Там к одной из строк, где значение инпута заносится в переменную, был оставлен комментарий «чтобы каждый раз не дергать из DOM». Мне не совсем понятен этот момент. Мы же объявляем эту переменную внутри функции, обращаемся к ней при каждом клике по кнопке, значит, каждый раз «дергаем» элемент из DOM.