Разбор тестовых заданий: Сортировка массива товаров | JavaScript

[@srt2046]

Благодарю, бро! Побольше таких практических видео по js! Однозначно лайк, репост, коммент!

[@durnevm]

Спасибо за урок! Пару идей по улучшению и для тех кто учится: 1) почему бы не вынести логику рендера элементов и шаблон в отдельную функцию, и все дерево дочерних элементов вставлять в innerHTML один раз, как показано работать будет, но таким способом мы создаем только одну мутацию дом, а в показаном способе у нас DOM Будет перерисовываться для каждого вставленного элемента. (да в таком простом задании это может и излишне но все равно думаю полезно задумываться о производительности). Для рендера также удобно использовать метод reduce на массиве обьектов, так что применяя его мы получим строку с html всеми элементами, и уже ее один раз вставим в DOM. 2) Да иммутабельность это хорошо, но если представить что данные нам прилетают с сервера, мы же можем сделать предпросеццинг их, и создать в этом же массиве обьектов дополнительные поля, по которым и будет идти сортировка. А так мы на каждый клик делаем работу по приведению строк к числовым значениям для сравнения - можно же без этого, один раз препроцессингом сконвертировали в новые поля обьектов а дальше сортируем\рендерим их. И уже после предпроцессинга нам никто не мешает делать глубокую копию обьектов если мы хотим чтобы коллекция не мутировала.

[@simonbryczkowski8675]

Незаслуженно мало лайков. Спасибо Иван за вашу работу!

[@web2905]

Спасибо. Полезное видео.

[@dosodsin3624]

Спасибо за ролик! Не пропадай надолго, уж больно качественный контент

[@oldzas]

Полезный канал, плюсую

[@eugenia9999]

Очень крутое и полезное видео !!))) спасибо !)))

[@vados7341]

Толково, дякую

[@sirjon5970]

Мне как то дали такую задачу: Есть массив с произвольными числами. Нам нужно получить строку, в которой числа отсортированы от меньшего к большему, если числа соседние (5, 6), то вместо запятой нужно поставить дефис (5-6), если несколько соседних чисел (5, 6, 7), то остаются только крайние и между ними ставится дефис (5-7). К примеру из массива [31, 3, 8, 4, 5, 7, 1] получаем '1, 3-5, 7-8, 31' ; Вроде ничего сложного нет, но минут 40 я попотел над этой задачей)

[@sirjon5970]

А вот если бы, как советует Иван, хорошо разбирался в регулярных выражениях, то справился бы намного быстрее)

[@petrvictorovich]

А вот теперь - хорошей задачкой будет - разбить это всё на универсальные функции и избавиться от дублирования кода! =)

[@pyrotrading]

Спасибо!

[@vladimirivanov4756]

19:40 Ну как обычно, 10 минут пишешь основной код и 2 часа фиксишь баги)

[@КурашовЕвгений-н3ю]

Ванька огонь. Если можно - звук погромче!

[@friendly334]

Для создания полной копии объекта, можем использовать же оператор spread на объекте?

[@moizhirok]

Нет и object.assign по идее тоже нельзя использовать.

[@dec232]

Почему sortByFeedBacks в скобках содержит arr, если наш массив в переменной items?

[@aleksandrzelenskiy4000]

Спасибо за урок. Но мне пока сложно все это понимать. Пока ты объясняешь - все понятно. Стоит только самому что то сделать - все забывается.

[@campfireschool]

Все придет с опытом)

[@alexnagorny7692]

опыт, как и половая слабость, приходит с годами )))

[@ДмитрийСитников-ш2х]

@@alexnagorny7692 прикольно))

[@Kleo_Wyatt]

Когда написала if (typeof((item.price) === 'string')) и полчаса не могла понять почему item.price.replace is not a function. - Есть же сравнение со строкой? - Почему тогда пытаешься применить метод к объекту?! Как не сойти с ума от таких ошибок и быстро понимать в чем дело? Только опыт?

[@alexnagorny7692]

Иван, кстати, на корсхантерс уже появился твой новый практический курс по джаваскрипту. В премиум-доступе, правда (3 бакса в месяц), но оперативно они слизали.

[@campfireschool]

Увы, но этим они промышляют быстро. И при этом не выгодно для людей, тк на официальной платформе можно взять за 10 навсегда + моя поддержка)

[@alexnagorny7692]

@@campfireschool Вот именно! Так, как ты оперативно и подробно отвечаешь там учащимся - это бесценно!

[@valmaly8538]

Actually, you did not solve the first task (Sort by reviews and show result on the page), because you show on the page different array (where rating contains numbers instead on original strings)

[@АдельТимергалиев-ч5г]

Есть ли разница между data.sort((a, b) => a.ratingRevievs - b.ratingRevievs) и между data.sort((a, b) => a.ratingRevievs > b.ratingRevievs ? 1: -1) ?

[@НикитаБорисов-ы7у]

Лайк, если слышал мяу котейки

[@campfireschool]

Прорывается в кабинет :)

[@kondysiuk]

У меня тоже самое тестовое, но этот результат не правильный потому что сортировка цены должна возвращаться той же самой строкой ("19 755 грн" ) а не числом 19 755 - как в данном примере.Полагаю проблема в регулярке. Помогите пофиксить

[@__Avail]

решил в итоге тестовое?

[@Filyaaa]

А есть разница использовать для того чтобы пробежаться по массиву map или forEach ?

[@campfireschool]

Filya да, разница в работе самих методов) Они немного отличаются внутри.

[@Filyaaa]

Ivan Petrychenko А как понять какой из них в каком случае лучше использовать ?)

[@campfireschool]

Filya метод forEach просто перебирает каждый элемент и выполняет действие, НО ничего не возвращает. Map - модифицирует исходный массив и возвращает уже измененный вариант. Отсюда и различия в использовании. Первый - это чаще всего какие-либо модификации элементов на странице. Второй - модификация массива под требование программы: изменить тип данных, добавить суффикс каждому элементу и тд.

[@ВалентинВоробьёв-р5й]

@@campfireschool , тут можно долго и упорно ломать копья, т.к. всё зависит от механизма передачи параметров. Примитивы передаются копией, объекты - по ссылке. Но Array.map скорее работает с КОПИЕЙ исходного массива, нежели с самим массивом напрямую. Тест-код для проверки гипотезы ( если KZbin не обрубит ) let testArr = [1, 2, 3, 4, {value: 12}, {value: 24}, '32', '64' ]; function mapTest(arr) { let retArr = []; if (Array.isArray(arr)) { retArr = arr.map( (arrItem) => { if ( !isNaN(+arrItem) ) { return (+arrItem)*2 } if ( typeof(arrItem) == 'object' && arrItem.hasOwnProperty('value') && !(isNaN(+arrItem.value)) ) { // Если сделать // arrItem.value = +arrItem.value - 4 // return arrItem; // то это приведёт к модификации исходного элемента newItem = {...arrItem}; newItem.value -= 4; return newItem; } return arrItem; } ); } return retArr; } console.clear(); let newArr = mapTest(testArr); console.log('testArr: ', testArr); console.log('newArr: ', newArr);

[@ВалентинВоробьёв-р5й]

@@campfireschool , а за ссылку на статью medium.com/@stasonmars/%D0%BA%D0%BE%D0%BF%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5-%D0%BE%D0%B1%D1%8A%D0%B5%D0%BA%D1%82%D0%BE%D0%B2-%D0%B2-javascript-d25c261a7aff - ОГРОМНОЕ спасибо.

[@Vladikslavik]

Что за дичь с джейсонами? Вот так: const temp = [... arr]; не проще ли?

[@serhiiromanenko154]

Дальше по порядку. Не рационально использовать регулярное выражение. Известно, что оно работает медленно. Вместо replace и регулярного выражения можно и нужно использовать встроенную функцию parseInt. Пример: Number.parseInt('123 отзывов') // 123 Так же в таком случае не нужно будет дополнительное приведение типов при помощи оператора + Если же юзать правильную структуру данных, которую я предложил в предыдущем посте (отказаться от вложенных объектов с ценами), то forEeach() отпадает. Все можно сделать в одном итерировании Array.from()

[@campfireschool]

Serhii Romanenko обратите внимание, что цена написана через пробел: «4 500 грн». Если применить метод parseInt - то мы получим только 4. Так что этот метод тоже не подходит. С отзывами - да, там можно.

[@oleksandrvorzhev5026]

Народ, если я promise второй день понять не могу, ну верней думаю что понял ,а оказывается нет. Я один такой тупой?)

[@dmitriystoyanov933]

я думаю ты абсолютно нормальный, я их понять не то чтобы два дня, а неделями не мог пока не по-практиковал, да и сейчас если захочется кому-то, то загонят меня с ними в тупик..

[@alexeyfyodorov8736]

воу

[@АлексейБалакирев-ю5о]

ну т.е 2 абсолютно одинаковые функции ..там меняются пара строк...и он такой код написал и ему сказали что все прям хорошо?))) а если б 100 кнопок было б ...просто написал еще 100 функций?

[@aleksgavrilov5275]

Ну на самом деле техзадание выполнено, можно затем провести еще рефакторинг и оставить только одну функцию, в которую передавать разные аргументы ... самое главное увидеть в глазах кандидата понимание всех процессов)))

[@ВалентинВоробьёв-р5й]

А если бы было 100+ кнопок, то addEventListener повесили бы на родительский элемент с анализом event.target и вызове уже отдельной функции в зависимости от наличия у event.target специфичного класса или data-атрибута, нет ? В исходном задании подобного не оговаривалось, так что решение из ролика вполне себе рабочее.

[@serhiiromanenko154]

Странно объясняете с JSON.stringify. Slice работает корректно и создает новый массив. А вот внутри находятся объекты, и они остаются те же самые, что и были. Ничего тут скрытого нет. При помощи JSON вы из всего массива с объектами делаете строку. Затем эту строку превращаете в новый массив с новыми объектами внутри. Вот это и нужно сказать. Как по мне для этого не нужно использовать JSON. Достаточно создать новый пустой массив и в него добавить новые объекты, созданные при помощи Object.assign, который для этого и предназначен. Или использовать Array.from() const temp = Array.from(arr, obj => Object.assign({}, obj)); Намного же красивее и понятнее. Учите людей правильно делать и не трюкам.

[@campfireschool]

Не согласен с вами. Скорее всего вы попали в ловушку Object.assign(). Об этом написано в прикрепленной статье. Он тоже создает поверхностную копию. Вот наглядно ваш пример: prnt.sc/rbdso7 И пример с обычной копией: prnt.sc/rbdrw8 И про JSON - это не трюк, а вполне используемый метод.

[@serhiiromanenko154]

@@campfireschool Ну если так много вложенных объектов, то может JSON у будет верным решением. Повод задуматься над структурой данных. Зачем хранить свойство с вложенным объектом в котором два свойства, если можно сделать просто два свойства. В итоге все свойства будут иметь значения скалярного типа и никаких проблем.

[@АлександрЮдин-щ3в]

Деструктуризация в таком вопросе подходит лучше всего.

[@adeptusCustodius]

Спасибо! Очень полезно!!!