Задачи На Собеседовании Junior / Middle Frontend Developer. Массивы в JavaScript.

Разбираем задачи которые часто спрашивают на собеседовании Junior и Middle Frontend Developer. В этом ролике решаем часто задаваемые задачи по массивам в JavaScript. Разбираем разные способы решения задач + некоторые фишки в JavaScript. Напишите в комментариях какие еще вопросы вам задавали на Frontend собеседованиях и как вы с ними справились!
Таймкоды:
00:00 - Сумма элементов массива. №1.
00:51 - Сумма элементов массива. №2.
01:36 - Сумма элементов массива. №3.
02:12 - Максимальный / минимальный элемент массива. №1.
03:10 - Максимальный / минимальный элемент массива. Вариации первого способа.
03:50 - Максимальный / минимальный элемент массива. №2.
04:20 - Максимальный / минимальный элемент массива. №3.
04:46 - Максимальный / минимальный элемент массива. №4.
05:32 - Сортировка массива.
06:52 - Сортировка массива с объектами по их полям (по алфавиту и по возрастанию).
09:50 - Развернуть массив без .reverse().
11:29 -💡Сможешь понять этот код?
12:10 - Отфильтровать falsy значения
Приятного просмотра! Буду благодарен за поддержку в виде комментария и лайка!
👉 Исходный код, чат, воркшопы и поддержка канала: / wisejs
✔️ Если хочешь изучать программирование со мной, не забудь подписаться :)
ruclips.net/channel/UCOxq...
✔️ Мой телеграм канал: t.me/joinchat/RVq-cmt6n1SJRS7Z
#собесесдованиеjavascript #собеседованиеfrontend #массивы #javascript #frontend #array #juniorjavascript #middlejavascript #вопросынасобеседовании

[@wisejs]

Домашнее задание: Найти дубликаты (повторяющиеся элементы) в массиве. Решение присылайте в комментарии 👇

[@imthebest8000]

uniqueNumbers = new Set(array)

[@9mikaela]

@@imthebest8000 это не найдёт дубликаты

[@imthebest8000]

@@9mikaela да, я просто не правильно прочёл задание

[@eugenedoroshenko7366]

Для числового массива: arrayWithDublicates.sort((x1, x2) => x1 - x2).reduce((acc, next, index, arr) => next === arr[index + 1] ? [...acc, next] : acc, []). Для других типов данных меняем сортировку, которая была подробно рассмотрена в ролике👆

[@ArtyomSamsonchik]

array.filter( (el, i) => i !== array.lastIndexOf(el) )

[@romanpohribniak8471]

Спасибо,Максим,что продолжаете радовать нас отличным контентом,очень крутое видео!

[@user-xe7sp3pr7t]

Как раз прохожу собесы сейчас. То, что нужно как раз👌 . Спасибо 😉

[@cult2839]

Контент богов! Наконец-то я нашел то, что искал. Сколько не гуглил задачи на массивы, выдаются сразу довольно сложные примеры, на которых разобраться в теме очень сложно. А тут как раз базовые задачи, да еще и с несколькими вариантами решений. Спасибо огромное!

[@user-jl8kc2xi5g]

покажика эти сложные задачи)попробую их на зубок чтоб отскакивала как таблица умножения

[@konstantin-lysenko]

Дружище, ты просто машина, я бы сказал - живой калькулятор)
Подписка и лайк однозначно!

[@samolevich]

Классное видео. Интересные примеры. Спасибо

[@slapiinf518]

Классный видосик. Гоу теперь про объекты :)

[@GrandAlexandr]

благодарю за момент с сортировкой, на прошлом собесе не смог внятно ответить, а тут вот оно как))

[@mykhailostepanishchev6472]

Классный выпуск,большое спасибо! js, reduce, map, filter, sort, pop.

[@wisejs]

Спасибо за ключевые слова!

[@Veremey]

Great job 🔥 Keep on going!

[@dmitriystoyanov933]

Сейчас готовлюсь к собесам на новую работу, ставил на паузу и решил всё, НО некоторые твои варианты взорвали мозг) реально круто!

[@Yupitrer]

Как новая работа?

[@dmitriystoyanov933]

@@Yupitrerда жестко бывает т.к. компания небольшая и должность размыта.. я типа фронтенд, но так же и бекенд писать приходится, и на AWS колупаться постоянно.. такое..но, бабки платят и хорошо;)

[@adamarturov6361]

Какие задачи по алгоритмам пригодились для собеса
?

[@dmitriystoyanov933]

@@adamarturov6361 это год назад уже было, не помню, но может быть что угодно из них.

[@kitaimanit6000]

спасибо, контент огонь

[@robbyandreasian]

Полезно ! спасибо !

[@assetdev1859]

ты крутой! я подписался) нажал лайк, надеюсь у вас будут выходить такие позновательные видео

[@dmaberlin]

спасибо , продолжай!

[@theoty-js-react]

👌 буду решать

[@mxrquez7692]

Для разворачивания массива можно воспользоваться методом массива reduceRight, который работает как обычный, но итерируется с конца массива
const reversedArray = array.reduceRight((accum, elem) => {
accum.push(elem);
return accum;
}, []);

[@SuperPirks]

array.reduceRight((acc, item) => {
return [
...acc, item
]
},
[])
Пушить в аккумулятор плохая практика

[@BOCbMOU]

@@SuperPirks в каком месте это плохая практика? Вот клонировать массив на каждой итерации - это действительно плохая практика.

[@vjachet]

​@@SuperPirks лучше acc.concat(item)

[@max_mgtow]

Привет ✌️
Спасибо 🔥👍

[@user-mh2fz7tx3j]

Класс! Сделай еще задачки с циклами))

[@wisejs]

Хорошая идея)

[@ArtcticUFO]

Отличный видос)

[@haibova_irisha]

привет . спасибо за видео

[@andreykrav3274]

it's most popular information! thanks

[@valeriathor1597]

12:00: вторым аргументом назначаем this = наш array. первым аргументом, т.е. в качестве вызываемого колбэка передаем метод массива pop(), который внутри обращается к this т.е. к массиву, у которого вызывается. если я правильно поняла, когда что-то передается в качестве аргумента оно теряет контекст, потому что это вроде как эквивалентно присвоению переменной. поэтому нам нужно передать контекст вторым аргументом

[@user-yj4ln8mi6b]

Делюсь опытом, была задача на собеседовании написать функцию для проверки слова на палиндром, там работа и с массивом, и с строкой. Кто не знает, что это такое и как ее решать, советую глянуть.

[@zizu2499]

А где найти видео не смог найти видео с решением задачи

[@user-on4di6lb3j]

А чего там решать? Слово в массив, массив развернуть и склеить в слово, результат сравнить с первоначальный словом. Можно с циклом заморочится или рекурсией. Для зарядки ума.

[@volshebniyfonar]

Перевернуть массив можно и нужно за O(n) и без доппамяти.
Нужно в цикле от 0 до length/2 менять местами i-ый элемент с length - 1 - i

[@raff_m_d6971]

От души

[@loadmore]

Обычно в продакшене готовые апи юзаешь, Бек уже все отфильтровал )

[@whiteguards43]

не понял про array.filter(boolean) почему работает? Если весь массив передается, почему он возвращает все те что тру ведь boolean === true равно фолс

[@getshou]

а почему, если не использовать деструктуризацию в выражении array.map(array.pop, array), вернет [6,6,5,4,,,] ?

[@user-yv4ou3jl8y]

Привет, найти самое редковстречающееся значение в числовом массиве, или сгенерировать n массив, заполненный рандомными числами от min до max)

[@wisejs]

Тоже попадалось с рандомными числами

[@lambdius]

В версиях node до 12, можно обмануть систему, т.к. сорт на малых объемах массива использует сортировку слиянием, мы можем произвести следующиее, a.sort(e=>1), еденицу можно заменить на любое положительное число, оно будет выполнять роль положительного резульятата сравнения элементов слева на право. Если уж идти по тропе шизокода, стоит писать все в круглых скобках, дабы избавиться от ключевых слов, методы вызывать следующим образом - a=[3,4,5,1,2,6], [j,o,i,n]=`join`, eval(a[j+o+i+n]`+`) и многое другое )))))
И решение - a.map(a.pop,[...a]), взято из задачи 3 kyu на CW )))))
У тебя хороший контент по технологиям, но задачки, это совсем другое, все тонкости JS врядли выйдет разобрать, да это и не нужно обычным людям.
Ставлю этому видику 7kyu ))))

[@wisejs]

Интересно 🧐

[@lambdius]

@@wisejs Если человек хочет впечатлить собеседующего, рекомендую провести тутор - как писать код столбиком, по 1 символу в строке ))))

[@wisejs]

@@lambdius 😂

[@denmccormik7654]

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

[@wisejs]

Все так, но вместо объекта лучше Map 😆

[@senyashtyak]

Найти максимальный элемент массива через сортировку это гениально

[@LuNa-om8ci]

Это был сарказм? Просто я новичок и немогу пока точно понять хорошо это или плохо.

[@senyashtyak]

@@LuNa-om8ci объясню проще: вместо линейной сложности мы используем квадратичную

[@thecatwrites9731]

прикольный канал, не помню откуда я тебя взял

[@wisejs]

🧐

[@notIdeal78]

09:50
const arrow = [1,2,3,4,5,6,7,9,12]
console.log(arrow.sort(() => {return -1}));
тоже идеально будет работать

[@klash1401]

отлично решение, вот его упрощенная запись (без return и фигурных скобок):
arrow.sort(() => -1)

[@asifabbasov3801]

Можно больше задач по JS c собеседований

[@user-ni4oh6rs3e]

В последней задаче зачем в иф делать !! если все что в условии и так приведется в бул значение

[@mathiaswei8715]

Спасибо, array.filter(item => item) тоже сработает

[@lolphdundgren4328]

8:38 ошибка в строке 23, в if-е должен стоять ===.

[@velikorossnationalist4259]

В предпоследней задаче можно было бы воспользоваться методом sort:
const arr = [1, 2, 3, 4, 5, 6, 88];
const reversed = arr.sort((a, b) => {
return b - a;
});
console.log(reversed);

[@PlaymoreDev]

не можно, потому что задача развернуть а не отсортировать. вот с таким массивом не будет работать верно: const arr = [1, 22, 3, 4, 5, 6, 88]

[@kirushaa]

Привет ) Скажи пожалуйста что за шрифт у тебя в web-storm ? Заранее спасибо )

[@wisejs]

Дефолтный, не менял

[@kirushaa]

@@wisejs спасибо )

[@user-zd6yk9pi1y]

jetbrains mono

[@granmini]

Есть еще функция Есть еще функция getMaxOfArray ([1, 2, 3])

[@Max_Ineos]

Решение второй задачи, зачем мудрить?))
const max = Math.max(...array);
const min = Math.min(...array);

[@BobbyBob21]

За eval по рукам надо бить))

[@hyannikolas697]

Задача. Есть четыре массива по 4 цифры, цифры разбросаны, найти максимальное число , и вывести новый массив максимальных чисел.

[@wisejs]

Сводится к поиску максимального числа в матрице (насколько я понимаю)

[@user-sy7cn6vc1m]

лайк за localeCompare

[@senyashtyak]

Никто не пишет вручную алгоритмы, вместо этого используют lodash, в котором они реализованы

[@Witcher-simple-YouTube]

Это websrorm ?

[@andrTaylor]

Альтернатива для reverse)
array.reduceRight((acc, item) => [...acc, item], [])
Это когда лень писать for с обратным циклом))

[@SerzhNesteruk]

Спасибо, что поделились решением! Способ вполне работающий, но у него всё же квадратичная сложность по времени из-за пепесоздания массива на каждой итерации. Можно переписать примерно так: array.reduceRight((acc, item) => (acc.push(item), acc), [])
...или даже решить через map:
array.map((_, i, arr) => arr.at(~i))

[@andrTaylor]

@@SerzhNesteruk с первым вашим решением согласен, да, но второе читается сложновато)) заставляет залезть в доку и чекнуть инфу про тильду и at

[@yuriiyurii6656]

map(callbackFn, thisArg)
Array(array.length).fill(null).map([].pop, [...array]);
де:
Array(array.length).fill(null) - масив будь-яких значень аналогічної довжини
[].pop - потрібна сама функція
[...array] - масив, з якого на кожному кроці буде забиратися останнє значення. Якщо без ... (деструктиризації), тоді очистить попередній масив array

[@vjachet]

array.map([].pop, [...array])

[@Shperung]

const max = arr.toSorted((a, b) => b - a)[0];

[@JohnDoe-hw1sm]

Касательно варианта с разворотом массива, можно еще воспользоваться reduceRight. =)
arr.reduceRight((p, c) => [...p, c], []);

[@kittycat5403]

а разве нельзя развернуть массив тем же методом sort, только возвращать x2 - x1 вместо x1 - x2?

[@kittycat5403]

и в filter просто использовать сам текущий item без boolean

[@wisejs]

x2 - x1 - отсортирует по убыванию

[@wisejs]

да, так можно, но не особо очевидно как по мне

[@user-vu6hn4ul2i]

Нет, нельзя. Если массив изначально не сортирован, то такой "разворот" вернёт сортированный.

[@pasha2927]

Домашнее задание: Можно использовать new Set... [...new Set(someArray)]

[@wisejs]

Не убрать их, а найти :)

[@user-jf3uf2ur4e]

eval это прикол конечно, думаю лучше так не делать на собеседовании 😅

[@user-sz7pu7qj3z]

Стосовно розвертання масиву через map(array.pop, array) функція видаляє останній елемент масиву і повертає його, який в свою чергу записується в результат функції map. А в якості this для метода pop передається array, який скорочується.

[@b1sh855]

const arrey = [1, 2, 3, 4]
const xw = arrey.reduce((x, y) => x + y);
console.log(xw)
это по короче

[@user-rj6ro3mp1p]

Стало интересно и пошел разбираться. С некоторым успехом вроде что-то вышло.😁
Для данной записи: [...ourArr].map(array.pop, ourArr)
- array.pop - это мы просто передаем метод массива, аналогично и этой записи: [].pop
Метод array.pop удаляет последний элемент массива и возвращает его.
Второй агрумент "ourArr" для метода map нужен для того, чтобы именно было что возвращать в новый массив, который создает метод map. Значение для нового элемента массива возвращается на каждой итерации из ourArr, который мы передали для метода [].pop в качестве this.
Новый массив [...ourArr] нужен только для того, чтобы было по чему нам итерироваться. Будет аналогично и работать так же для записи:
[undefined, undefined, undefined, undefined, undefined].map(array.pop, ourArray)
Кажется, что я только запутал.😂

[@wisejs]

Ход мыслей верный 🙂

[@user-rj6ro3mp1p]

@@wisejs Ну и хорошо значит.😁

[@Kaorichvagon]

Array.from( new Array(arr.length) , () => arr.pop() ) в пустой массив той же длины накидываются попнутые значения. Так это выглядит в читаемой реализации, хотя всё равно способ идиотский, так как происходит мутация исходного массива. Еще при этом зачем-то усложнил получением ссылки на метод массива и прокинутым в неё this. Любителей всё усложнять везде же любят)

[@SerzhNesteruk]

​@@Kaorichvagon Здесь, кстати, тоже можно поумничать с Array.prototype.pop и thisArg, но хотя бы сохранив иммутабельность исходного массива:
Array.from(arr, [].pop, [...arr])
А учитывая, что вторым аргументом Array.from является mapFn, то можно просто использовать сам метод map:
arr.map([].pop, [...arr])
Но можно решить и рациональнее:
arr.map((_, i, arr) => arr.at(~i))

[@oldiBerezkoo]

3:11 через sort было бы легче и быстрее сделать как мне кажется

[@Goddamn_Right]

4:19

[@kosmodemyan_sugar]

ну не знаю не знаю, мне и на джуна задачи сложнее попадались

[@GagikHarutyunyan_dev]

Последний пример мутирует предыдущий массив, это плохо)

[@wisejs]

Последний пример какой задачи?

[@GagikHarutyunyan_dev]

Развернуть массив

[@wisejs]

не всегда плохо, зависит от требований

[@vjachet]

@@wisejs но сначала-то все примеры без мутации
что мешало array.map([].pop, [...array]) ?
если мутировать оригинальный массив - надо было и с двумя указателями дать пример

[@azizoid]

просили найти второе и третье максимальное значение массива перебрав его всего один раз

[@wisejs]

Как решали? Сортировкой?

[@azizoid]

@@wisejs сортировкой делать было нельзя. Поэтому прошелся обычным for-ом. Но и это их не устроило. Сказали мой алгоритм слишком затратный. Это было тюлет 3 назад

[@wisejs]

@@azizoid O(n2 если 2 раза перебирал. Хотели, наверное, быстрее.

[@plart2006]

@@wisejs простой сортировкой эту задачу не решить, потому что могут быть дубликаты, придется set еще городить, это не рационально
upd: зато читабельно, и чаще всего на фронте глубоко пофиг, сколько займет операция с массивом - 3мс или 10мс, а вот разбираться с кодом из кучи циклов нахрен никому не упало

[@plart2006]

let max = -Infinity,
second = -Infinity,
third = -Infinity
for (const value of arr) {
if (value > max) {
[second, max] = [max, value] // save previous max
} else if (value < max && value > second) {
second = value // new second biggest
third = second // new third biggest
} else if (value < second && value > third) {
third = value // new third biggest
}
}
return [second, third]

[@deantek]

а нельзя в максимальном или минимальном элементе массива сделать так?
const arr = [3, 2, 4, 5, 1]
const min = arr.sort()[0]
const max = arr.sort()[arr.length - 1]

[@user-ui1fe2bd9w]

да кнчн

[@kindaart7451]

Если в массиве будет 100, то max у Вас будет равна 5, что будет ошибкой.

[@user-yh6jq7iz2u]

каким каким оператором? тренарным? 😂 может тернарным?

[@dogfrogfog]

тернарным, а не тренарным

[@chinzano]

Вопросы на уровне стажёра, на Джуна уж посложнее задачи спрашивают, как минимум, средний уровень с leetcode

[@wisejs]

Собеседование довольно стрессовый процесс. И даже, порой простые вопросы и задачи вызывают трудности. Даже на 1 задачу среднего уровня нужно выделять все собеседование, а ведь спросить хочется не только 1 задачу.

[@user-mn3ic2ct8d]

Сделать плоский массив, нельзя использовать flat

[@pinkiseven659]

А также нельзя использовать рекурсию

[@wisejs]

А так же, нельзя использовать массив 😆

[@pinkiseven659]

@@wisejs будет тогда сложно

[@ruslantsarenko3036]

Сомнительно чтобы давали настолько простые задачи на собесе

[@plart2006]

Если просят крутить деревья, лучше сразу уйти. Потом такие особи крутят тебе мозги

[@McNeelone]

@@plart2006 по подробней можно?

[@KrivovNikolay]

@@McNeelone я думаю он имел ввиду работу с DOM элементами , если сразу просят работать с ними ,то лучше сразу покинуть собеседование...
Я так его понял

[@Snezh88k]

@@KrivovNikolay бинарные деревья поиска

[@user-vu6hn4ul2i]

@@plart2006 ну такой себе совет. Если ты умеешь крутить деревья, то почему бы и не покрутить? Если не умеешь, то да, можно сразу уходить: у тебя и у компании разные взгляды на то, что ты должен знать и уметь на той позиции, куда тебя собеседуют. И консенсус вряд-ли получится.

[@n0rison]

ну middle вряд ли

[@user-tb3mm6dl3z]

Почему этот парень не моргает а я сразу не понял че не так🤔

[@user-xn2cr5oe4p]

Почему ты таким устаревшим циклом пользуешься? И ещё вводишь в заблуждение новичков! А также тут многие пишут что таких задач нет на собесах! Зря потерянное время …

[@phat80]

Такой легкотни на собеседовании быть просто не может. Это даже не уровень джуна. Да, задачи тоже на массивы могут быть, но они будут куда сложнее и не такими очевидными, да еще и с особыми требованиями, типа сделать то-то, не используя что-то (например, какие-то стандартные методы) или не используя дополнительную память, либо показать алгоритм с заданной сложностью. В общем, такие задачи могут быть лишь на собеседовании в какой-то сказочной компании. А таковых давно не существует.

[@plart2006]

Чаще задвигают всякую теоретическую хрень типа прототипов и принципов ооп. Как говорится, особый js для собесов, который в реальной работе никогда не используется

[@wisejs]

Принципы ООП не связаны с js и их у любого программиста могут спросить

[@alexandroppolus]

Искать максимум в массиве через сортировку - это дичь. Хуже неё только последний способ Math.max(...arr), приводящий к переполнению стека на длинном массиве. Автор, не учи джунов всякому плохому )

[@carry-on-chaos4032]

а как правильно? я делал через reduce

[@alexandroppolus]

@@carry-on-chaos4032 через reduce вполне норм. Ну или обычным циклом.

[@pkorneev5226]

junior еще бы поверил для первой легкой задачки на собеседовании, но точно не мидл, это уровень интерна, не более

[@user-ms5vu1zp9d]

На собесе такое не просят решать. Это детсадовские задачи.

[@benchik100]

😵😵😵 не лишайте меня мотивации.

[@DreamMaster_ru]

array.reduce((acc:number, next:number) - Почему у меня аккумуляторы не работают? Все примеры из видео с аккумулятормаи у меня не пашут.
Хотя reduce вот так работает:
const array = [1, 2, 2, 4, 5, 6, 6, 100];
let sum = array.reduce(function (currentSum, currentNumber) {
return currentSum + currentNumber
} , 0)

[@oleksandr_h]

const A = [1, 2, 3, 4, 5, 2, 1];
console.log([...new Set(A.filter((a) => A.length - A.filter((f) => f != a).length > 1))]);

[@bjdsn]

function duplicate(nums) {
return new Set(nums.filter(n => nums.indexOf(n) !== nums.lastIndexOf(n)))
}

[@wisejs]

Крутое решение 👍

[@Ushakov.M]

Только Big O у решения большая

[@user-xn2cr5oe4p]

Зашёл увидел старющий как мир цикл и сразу закрыл видео 🤮