Всем привет, я продолжаю решать задачи по JavaScript от различных нейросетей. Я буду решать задачи на исправлении багов в проекте.
Я уже попробовал Алису и Гигачат для генерации подобных задач, сегодня буду пробовать DeepSeek.
Мне хочется сравнить, какая нейросеть лучше справляется с этим, а также эти задачи порешать.
Думаю, будет интересно, давайте начнём.
Генерируем задачу
Интересно, интерфейс очень похож на интерфейс Гигачата, только он более светлый и минималистичный.
Давайте проверим его в действии и посмотрим, чем он отличается.
Так, он мне выдал список из 10 задач
Оу... Виселица 😃... Я помню, в такую игру я играл на каком-то кнопочном телефоне, когда был маленьким...
Хмм... Не могу определиться. 🤔. Конвертер валют самое интересное, но курс валют имеет отношение к политике, лишний раз рисковать и трогать политику я не буду. Давайте ещё 5 задач попробуем сгенерировать
Мне понравилась задача №14 "Сортировщик таблицы с данными".
Когда я тестировал Алису AI и Гигачат на генерирование задач, где нужно исправить ошибки в коде, они справлялись с этим плохо, приходилось очень много раз их поправлять. А вот код они генерировали лучше. Я пришёл к выводам, что это потому, что ИИ в первую очередь обучают писать правильный код, конкретно вставлять в него ошибки их не учат.
Вот сейчас посмотрим, как с этим справляется DeepSeek.
Вот такой код он нам выдал.
Если сравнивать DeepSeek и Гигачат, DeepSeek почему-то скинул код одним файлом, а Гигачат разбивал его на HTML, CSS и JS.
Выглядит всё это так
Достаточно стильно...
Вот блин... Он мне подсказки пишет... Что Алиса AI, что Гигачат, что DeepSeek зачем-то пишут мне подсказки, что конкретно исправить. Нет, я не буду вставлять этот скриншот полностью, попрошу переписать его баги без подсказок.
Ну что ж... Как научили меня предыдущие нейронки, перед началом решения всегда нужно проверять задачу на правильность.
Баг №1. Порядок строк становится неожиданным. Смотрим. "Алексей - 30 - Екатеринбург", "Анна - 32 - Москва", "Дмитрий - 35 - Новосибирск"
Вообще не так. Ничего не ломается, данные вроде на месте, порядок строк нормальный, что для имени, что для возраста, что для города.
Смотрим дальше. Баг №2, неправильная сортировка чисел. Так же смотрим баг №3, буква "ё" или строки с разным регистром.
Проверяем, так ли это на самом деле.
Хмм... Действительно... Буква "Ё" вылезла вперёд, а "АННА" и "Анна" не одно и то же, и вообще их почему-то разделяет "Алексей".
Вот числа сортируются нормально
Так тоже работает. А кнопки сортировки не совсем, направление своё они не меняют.
И что мы имеем? Из 5 багов работают только 3.
Баг №1, Баг №2 не работает.
Попробуем перегенерировать
Он пишет, что с багом №1 всё в порядке, а с багом №2 есть проблемы.
Но в этом ответе нет нового кода. Он пытается убедить меня, что его баги работают...
Сначала он написал, что баге №2 есть его ошибка, а теперь он пишет, как проверить этот баг.
Если кто не понял, в данном скриншоте он показывает числа в порядке возрастания, 100, 20, 3 (Должно быть 3, 20, 100). Но код воспринимает их, как строки, похоже, и сравнивает по первым символам "1", "2", "3", только это видно очень плохо. Он пишет "100, 20, 3 - неправильный порядок". Пример недостаточно информативен. Но по сути он говорит, что этот баг проверить можно и будет неправильный порядок.
Но ничего такого не происходит. Число 100 не становится перед тройкой, все числа расположены в правильном порядке.
В общем, он мне не сгенерировал новый код, а начал доказывать, что он сделал всё правильно. Я его попросил ещё 2 раза переделать код, а он упорно доказывал свою правоту.
Очень интересно, а мне нравится 😁. Этот ИИ с характером, он более напорист, чем Алиса AI и Гигачат. Интересно...
Как оказалось, баг №1 связан с тем, что после повторной сортировки по имени, имена в другом порядке, чем при запуске страницы. Я неправильно проверял баг. Но если запустить старый код, там этого бага всё равно нет.
DeepSeek сгенерировал новый код. Баг №2 появился, но баг №1 так и не заработал.
Это код, если вы сами захотите посмотреть и порешать. Если нет, можете просто перелистать. Ну а я начинаю
Начинаем решать задачу
В нашем коде будет только 4 бага, баг №1 не работает
Меня заинтересовал баг №4, почему сортировка только в одну сторону?
Эмм... Он мне зачем-то пометил функции, в какой баг, так в некоторых местах ещё дал подсказку.
То есть его баг заключается в том, что кода нет? Оригинально... 🤨
Ладно, в веб-разработке и работе с проектами и не такое бывает... Будем решать...
В соседней функции, в строке 128 я вижу переменную "sortDirection", в которой вероятно, судя по названию, и записывается направление сортировки.
Я наверное всё же сотру все комментарии. Такое чувство, мне как ребёнку указывают, где баги искать...
Так, пишем. Если мы кликнули по уже выбранной колонке, то наша "sortDirection" меняется. С 'asc' на 'desc' и наоборот. А если мы кликнули по не выбранной ячейке, направление сортировки обнулится и будет снова 'asc'.
Вот, теперь сортировка работает в две стороны.
Теперь исправляем баг №4, неправильные кнопки.
У нас здесь, если присмотреться, сортировка от большего к меньшему (на 100 не обращаем внимание, это ещё один баг).
Просто символы здесь меняем
Теперь исправим баг №2, неправильная сортировка.
Сейчас наши числа сортируются таким образом. Сначала идёт 100, потом 22, 25, 28 и 3. Они сортируются, как строки. Сначала идут строки, у которых первый символ "1", потом "2", потом "3". Числа сортировать так нельзя.
Так, давайте искать функцию, которая отвечает за сортировку таких чисел.
В этой функции у нас меняются кнопки, треугольники. А эта функция должна вызываться после клика на колонку с числами.
Ищем, где в коде вызывается "updateArrows()".
Только в одном месте, в "renderTable()". Судя по названию, эта функция рисует таблицу. Если функция для обновления стрелок вызывается только здесь, а на практике мы можем несколько раз кликать и менять эти стрелки, можно сделать вывод, что сама функция "renderTable()" вызывается несколько раз. Вызывается она при каждом нажатии на колонку для сортировки.
Эта функция меняет содержимое элемента с id "tableBody", то есть ячеек после первой зелёной строки.
Вероятно, код для сортировки нам нужно искать здесь.
Дальше у нас создаётся переменная sortedUsers, которая берётся из функции. После чего эта переменная сортируется.
А дальше она отправляется в цикл, и на основе её данных формируется новая таблица
Давайте перейдём в функцию "getSortedUsers()", которая записывается в эту переменную, и посмотрим, что там.
Так, а она просто выводит массив с данными. Странно...
Получается, нам надо работать с этим участком
Давайте посмотрим, как работает функция "sort()" в целом? Эта функция сортирует элементы, как строки.
Сортирует по первому символу. Если первый символ у нескольких элементов одинаковый, то сравнивает по второму символу.
И массив [1, 100, 24, 1000, 5], сортируется, как:
1
100
1000
24
5
А чтобы ".sort()" сортировал числа, как числа, в него нужно задать функцию, по которой он будет проводить сортировку.
Работает она так. Пишем функцию с параметрами "a" и "b", в функции сравниваем их, если "a > b", выводим 1 (элемент "a" более приоритетный, чем "b"), если меньше, то -1. И с такой внутренней функцией функция ".sort()" правильно сортирует числа.
У нас в коде даже реализован такой механизм. Он более усложнён и учитывает направление сортировки, если направление не 'asc', он знаки меняет.
Проблема в другом. Дело в том, что числовые значения из ячеек передаются в виде строк. А строки в JavaScript сравниваются так, как я вам показал
Только вот как понять, в какой колонке строки, а в какой столбцы?
Я думаю, это надо как-то обозначить в самих колонках.
Добавить им какой-то дата атрибут. Будет "data-type"
Для сортировки нам нужно получить этот самый "data-type". Он берётся из колонки. У нас в функции используется переменная "currentColumn", куда записывается "data-column" столбца. Если мы найдём, где это объявляется, мы можем записать и "data-type".
CurrentColumn записывается в функции "sortTable()".
"currentColumn" записывается из "column". А "column" передаётся из этой функции. Конкретно в этом моменте он задаётся из дата-атрибута "column", полученного из верхнего элемента колонки.
Давайте перепишем функцию, добавим "type"
Создадим такую же глобальную переменную
А здесь будем принимать "type" и записывать его в глобальную переменную.
А дальше просто в функции сортировки, если наш тип "number", просто преобразовываем значение из ячеек в float.
И сортируется это дело достаточно неплохо
Осталось исправить баг №4. Мы в начале статьи проверяли имена по типу "ёваан", "анна", "АННА", помните? Вот надо исправить баги с этим.
Попробуем снова добавить каких-нибудь кринжовых записей.
Да уж...
АННА и АнНА не поделили Алексея 😁. Он почему-то расположился между двух одинаковых имён в разном регистре. "Ёван" и "ёван" поссорились и ушли на разные концы таблиц. Какой-то бред, а не сортировка. Нам надо это исправлять...
Думаю, для начала надо решить проблему с регистром. Просто сделать так, чтобы при сортировке все буквы становились одного регистра, чтобы удобно было считать.
Так, уже лучше. Теперь сортировка не ломается из за регистра.
Но буквы "Ё" и "ё" по-прежнему оказываются в конце списка, и это странно.
Для JavaScript почему-то буквы "ё" идут после всех остальных.
...
Какое-то время покопавшись в интернете, я понял, что решить эту проблему можно через localCompare(). Это такая функция, которая позволяет более точно сравнивать строки, учитывая букву "ё". Наверное...
Вроде бы получилось, но буква "е" затесалась среди букв "ё". Это очень странно...
Всё равно функция от JavaScript ошибается, у неё слова с "е" почему-то идут после "ё".
...
Прошло несколько минут
...
Я потратил несколько минут на размышления и подумал... А что, если мы немножко считерим, и букву "ё" заменим на букву "ж"?...
Смотрите, буквы в алфавите JS идут в таком порядке: "АБВГД...ЭЮЯ абвгд". А буквы "ё" и "Ё" где-то в конце. А если нам эти буквы сдвинуть?
Смотрите. План действий такой:
1) Мы приводим буквы не к нижнему регистру, а к верхнему (так как "АБВ" в начале, а "абвгд" в конце, нам нужно свободное место)
2) Где должна быть буква "Ё", мы сдвигаем буквы на 1 позицию вправо, и получается "АБВГДЕ ЖЗИЙ...ЭЮЯа". Получается, в такой системе не будет буквы "ё", а буквы после неё будут сдвинуты (Поэтому я и привёл буквы к верхнему регистру, чтобы "Я" вышла на "а").
3) Просто сравниваем и получаем результат.
Блин, как же это упорото... Но механизм в теории рабочий...
Приводим буквы к верхнему регистру
О ужас, что я придумал??
Время 23:11, я спать хочу. Я готов придумать любое безумие, ЛИШЬ БЫ ЗАВЕРШИТЬ ЭТУ СТАТЬЮ, ААААААА 🤬😡😨...
Что мы делаем, вкратце: двигаем буквы, чтобы убрать эту злобную "ё" и нормально всё сравнивать: "АБВГДЕ ЖЗИЙ..."
Так, настал момент истины. Что же будет??
Дааа!!! Эта фигня заработалааа!!! Не может быть!! Она работает!!!
Капец, это такое гениальное решение. Оно гениально и упорото одновременно!!
Время 23:13, мой бедный уставший мозг к вечеру начал глючить и выдавать такую дичь. Это упорото и одновременно гениально...
Я смог сравнить строки через ".localeCompare()" с буквами "е" и "ё".
Подведём итоги
И так, мы наконец решили 4 бага из нашего проекта. Теперь наша таблица сортирует нормально.
Это было довольно интересно. Мне понравилось. Мне очень нравятся задачи, где нужно капаться в коде и исправлять баги))
Если сравнивать DeepSeek с Гигачатом в генерации задач на исправление багов, то различия не такие уж и большие. У DeepSeek и Гигачат похожие ошибки и оформление задач, но при этом DeepSeek генерирует их более точно, но ошибки всё равно присутствуют. DeepSeek нужно всего лишь меньше просить перегенерировать и исправить. Ну а так, в этом они похожи.
Ну а на этом всё, подписывайтесь на канал и ставьте лайки 😊😁