Топ-12 фишек программирования на JavaScript с массивами. Ты просто обязан их знать!
Вставка
- Опубліковано 12 чер 2020
- Мы продолжаем рубрику улучшение кода на JavaScript и в этом видео я покажу топ-12 фишек в програмировании JavaScript для массивов данных. Мы разберем много задач, которые вам могут попасться на собеседовании или на тестировании Junior JavaScript разработчика. Если вы начинающий JavaScript программист, то вам будет полезно ознакомиться на практике с методами массивов и решением задач с их применением. Если вы уже имели опыт с программированием javascript, то данное видео поможет вам освежить память и вспомнить как работают методы массивов.
Деструктуризация по ключу из объекта с помощью Array.from(new_car, ({car}) => car)
Очень помогла мне в одной из моих задач на работе, спасибо за видео. Интересно посмотреть про интересные и полезные фишки по работе с объектами!
Огромное спасибо, очень полезная информация. Успехов тебе !
Спасибо автору. Продолжай пилить годные видео🙂
Отличное видео. Спасибо!
Спасибо автору, супер видео!!!
Ты мне сильно помог, спасибо!)
хорошо было бы к следующим таким видео в описании увидеть тайм коды с примерами которые рассматриваются
Люблю смотреть подобные видео. Всегда что-то новенькое нахожу. Автору спасибо!
Один совет и автору и зрителям: в этом видео можно было бы заменить почти что все операторы "let" на операторы "const". Если правильно помню, то только в одном случае в видео оператор let нужен. Приучите себя всегда использовать const, а let использовать только тогда, когда вам это действительно очень сильно нужно. Вы сэкономите себе кучу часов бессмысленного дебага в будущем, когда будете писать более сложные проекты!
Еслинт потом просканит твой код и заменит все не нужные лет на конст)
В чем проблема?)
да и все таки рубрика збс, это был интересный материал, добавляю себе в плейлист для шпаргалок
Привет, хотел бы заметить, что метод reverse меняет исходный массив, а не возвращает новый. На это нужно обратить внимание.
Оо, вот за fill спасибо! Не знала такого)
Спасибо за видео)
Спасибо за это видео
Дай бог тебе здоровья
Насчет реверса вообще убило, на собеседовании часто интересуются как вы мыслите в таких задачках, а ты подсказываешь просто метод использовать и всё))
Вот примерчики собственной реализации reverse, а то знание метода reverse как такового не очень хороший ответ))
let reverse = [...arr1].map((item, idx, source) => source[source.length - idx - 1]);
let reverse = [...arr1].reduce((acc, item, idx, source) => acc = [...acc, source[source.length - idx - 1]], []);
Ну ну, и часто тебе на собеседованиях такое выдают? Думаю весьма редко
@@SuprunAlexey собеседование, чаще всего, проводят с целью узнать как человек мыслит и общий уровень навыков. В нормальных компаниях не гоняют, насколько мне известно, по конкретным методам и узко специализированному функционалу без веской необходимости. Всего не запомнишь. Или я с таким не сталкивался к счастью.
Спасибо за видео
Спасибо!)
И вот ты решил задачу в одну строку красиво, хорошим методом. А следующий вопрос на собеседовании такой: теперь сделай тоже самое без использования методов массива, чисты js. Я так делал на нативе найти совпадения из одного массива в другом, с сохранением сколько раз получается совпадение :)
Пишите комментарии/вопросы, на все отвечаю ✌🏻✌🏻
Do you can create tutorial maybe for mobx and typescript it will be nice because i can't find good explication
Брат, помоги если можешь, я хочу зайти в чат рулетку пишет нет доступа к камере(сначала вообще не заходило на сайт, установил впн зашёл на сайт но выдал эту ошибку) как бороться с ней
Купи пожалуйста quokka js
Бро, почему это так сложно? :(
Crystal CCCP что именно сложно?
В первые раз вижу что примеры кода используются на фоне городского трафика, превосходно )) с объектами ещё фишки покажи буду признателен
Будут с объектами в среду или четверг)
Спасибоо!
Thank you!
Array.reverse() на месте меняет сортировку, поэтому нет смысла создавать ещё одну переменную. Это не очевидно, но многие джуны могут много времени потратить на дебаг с вопросом: "Какого ХХХ у меня массив развёрнут?" )
developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse
Возможные решения: const new_arr = [...nums].reverse(); const new_arr = nums.slice().reverse();
Можно немного добавлю. Если вы не собираетесь в данной итерации менять содержимое переменной, то лучше использовать const, а не let. Столкнулся с этим только когда начал работать.
полезно спасибо
Очень круто я пересечения масивов решал чере loop где сравнивал значения... короче спс!!!!!!
Все гениальное - просто 😃
эх, где ты был раньше) скок нервов было потрачено
Всему своё время 😃
Насчёт поиска пересечений двух массивов не согласен. Filter с вложенным include даст ужасную асимптотику O(n²). Лучше использовать структуру данных Set. Запихнуть туда весь меньший массив и искать вложения элементов из большего массива. Тогда мы получаем O(nlog2(n)), что намного лучше. Код не очень сильно усложнится, зато скорость поднимется значительно.
На самом деле, можно даже не смотреть на то, какой массив больше, а какой меньше, асимптотика останется одна и та же. Но эта оптимизация, всё-таки, должна немного помочь.
@@witaway "запихнуть в Set ... и искать вложения элементов из большего массива."
так а как искать? с помощью тех же filter+includes?
Удивило, как ты определил асимптотику, производишь впечатление человека в теме. Возможно, подскажешь, что можно почитать/изучить на тему сложности? (Я полунулевой джун, профильного образования нет, возможно поэтому не знаю куда копать). Иногда в процессе работы понимаю "это явно быстрее", но мне это видится несерьезным, хочется хотя бы примерно прикидывать сложность того или иного решения - как в твоем комменте. Но надолго закапываться в теорию не хотелось бы, кажется, на моём этапе этот навык оценки на глаз не особо актуален)
@@artinstitoris одна из самых популярных книг по теме "Грокаем алгоритмы". Я читал, когда ещё неделю был знаком с программированием. Всё понятно, рассказано как считать скорость выполнения, как составлять оптимальный алгоритм и т.д.
@@artinstitoris в универе поучится
оч полезно) знаю 7/10, но круто, спс
спасибо
4:27 Несмотря на то, что это правильный ответ, я бы на собеседовании спросил бы ещё: а как эту задачу можно выполнить без spread-оператора? Например, с помощью того же Array#reduce (+ Object.keys), который в этом уроке показан, но как с ним работать на практике - не показано. Конкретно, не показана очень важная фича Array#reduce - в качестве аккумулятора может выступать не только примитивное значение, но и объект.
Nice
10:57 Очень сомневаюсь, что с таким решением задачи по нахождению пересечения массивов, человек пройдет собеседование. Я бы точно не принял такой вариант. Банально из-за производительности и невозможности масштабирования (без потери производительности). Правильный вариантом тут будет цикл по всем элементам всех массивов с сохранением значения элемента в качестве ключа во временном hash (если элементе массива это объект, то для такого кейса тоже можно придумать решение).
Очень упрощенное решение:
var arr1 = [1,2,3,4,5,], arr2 = [4,5,6], arr3 = [7,8,9,1];
var hash = {}, uniq = [...arr1, ...arr2, ...arr3].filter(item => { if (hash[item])return false; return (hash[item] = true); });
var hash2 = {}, dupl = [...arr1, ...arr2, ...arr3].filter(item => { return (hash2[item] = (hash2[item] || 0) + 1) > 1; });
console.log(uniq, dupl);
Абсолютно верный комментарий
Да и к тому же, если во втором массиве было бы две единички то и в пересечнии должно быть две. А тем что автор сначала убрал дубли он сделал пересечение неправильным в некоторых случаях.
Спасибо! Искал чтото похожее. От #6 в восторге . Запиши еще как перебирать вложенные массивы обьектов и обьекты массивов.
11:36 - надо было так же указать что .reverse(), .sort() - методы массивов модифицируют основной массив! Поэтому надо создавать копию массива и на этой копии уже применять те методы
Запишите свое видео и расскажите!
@@SuprunAlexey Друг, не обижайся! Я просто лишь подметил этот на мое мнение важный нюанс! А так видео топ и канал тоже!
Если бы я мог так рассказывать я бы тебя не смотрел)
В последнем примере можно записать вот так
let random_num = arr[~~(Math.random() * arr.length)]
отличное видео! будет ли прододжение с методами строк или обьектов? или задачки на собеседовании?
Да, сейчас хочу сделать про фишки HTML, CSS тоже будет интересно и потом про объекты
Да, спасибо, было полезно, лайк)
9:31 Почему arr.splice(0, arr.length) это "самый правильный способ" для очистки массива?
Почитал ветку на stackoverflow посвященную этому вопросу и пришел к выводу (как я и думал раньше), что самый правильный способ это arr.length = 0;
согласен
Возможно ли видео с детальным разбором метода reduce()? уж очень сложно понять его... особенно когда дело доходит до ассоциативных массивов..
Есть в планах
@@SuprunAlexey круто! буду ждать!
ПРобуй смотреть элементы через console.log(), так сможешь понять как работают разные методы + MDN документация developer.mozilla.org
у метода reduce 2 параметра, первый это колбэк - функция с 4-мя параметрами: аккумулятор, текущие значение массива, который перебираем, индекс, сам массив; второй параметр - начальное значение аккумулятора.
arr.reduce((acc, curr, index, arr)=>{ return acc + curr }, 0)
такой пример вернет сумму всех элементов
вместо 0 вторым параметром можно также подставить строку или например промис
@@keksinjo нихуя не понял, но читал с интересом
5:34
Извиняюсь, я прям слишком мало знаю о js, но очень интересно знать зачем в 4 строке, перед new ставить три точки?
Vladislav Antonov учите сначала JavaScript. Почитайте про spread оператор.
@@SuprunAlexeyПрочитал, загуглил, понял. Благодарю
@@Vintelhalter а как щас у тебя с джава скриптом ? Лучше стал понимать ? Или забил ?)
можете снимать такие видео на c++ и java oop
Чтобы очистить массив ты применяешь 2 функции, просто поставить [] куда лучше
Привет. Спасибо за видео! А как собрать все объекты в массив, которые находятся в массивах массива, без for each? Есть способ?
Если правильно понял вопрос, то вам надо сделать массив плоским. Есть замечательный метод flat(). myArray.flat()
let prices = {
orange: 10,
banana: 5,
total: 15
}
let mod = Object.entries(prices).map(( arr) => {
return [arr]
}).map((arr) => {
return Object.fromEntries(arr)
});
5 копеек : раз уж про собеседования, falsy значения явно кастуются в примере#2 к Boolean, но console.log(undefined&&true) // undefined
Что про собеседования
@Web Developer Blog @Web Developer Blog в видео говориться, что эта информация может быть полезна при собеседовании
1) Метод reduce - почему пишется в 1 одну строчку?
Не лучше ли для читабельности создать переменную reducer = (a,b) => a+b ? В чем разница ?
И как узнать в VScode за сколько миллисекунд выполняется задача ?
Если я правильно понял последний вопрос, то установите расширение code runner
9:30
Чем метод splice правильней присваивания пустого массива?
При работе с крупным массивом ответ от splice занимает от 2-3мс и выше,когда же присваивание пустого массива 0.
Часто массивы объявляют через *const* , присваивание в этом случае не сработает. А arr.length = 0 и arr.splice сработают, но вариант со splice редко встречается.
@@TheProfessionalGambler Да,конечно, в таком случае работа с прототипами будет работать,но все равно. splice по производительности, проигрывает в этом случае. splice конечно универсальный и удобный метод, знать его надо и показывать как топ фишка стоит,но не в данном примере..
@@TheProfessionalGambler что мешает объявить переменную через let?
@@russellray1219 потому что нужна константа, чтобы сразу были видны ошибки
@@TheProfessionalGambler константа не поможет видеть ошибки.
вам нужен тайпскрипт для этой цели, он покажет где потенциальные ошибки и не даст их совершить.
10 лет назад люди писали var и как то жили с этим ;)
Очень помогает. 🐕🐕🐕🐕🐕🐕🐕🐕🐕
Я рад 😌
Можно nums.splice(0) раз уж на то пошло. Без второго параметра и так удалит все до конца.
а чего картинку про: Array(10),.map((_, i) => i) // undefined показал, а решение не показал?
Блин, сейчас как раз учу массивы на одном сайте и иногда всё не получается выполнять задания, которые там дают, становится стыдно из-за этого. Хотел бы узнать, это нормально или нет.
Нормально
Стыдно должно быть не тому кто пытается и у него не выходит, а тому кто не пытается, а ты молодец и у тебя все получится, главное терпение и время, в начале всегда трудно, а потом будет легче
Я уже работаю фронтенд разработчиком, но у меня каждый день - это бой, постоянно что-то не получается, что-то работает не так как надо, иногда кажется, что конца и края нет поставленной задаче. Но как же круто, когда наконец получается сделать этот "каменный цветок".
Два последних приёма были показаны в предыдущем видео.
А зачем в примере, где выводим рандомный элемент масива, нужны скобки вокруг nums2.length?
Да и вокруг Math.floor(...) - тоже скобки не нужны вроде. Или нужны? А зачем?
Math.floor даёт целое число. Зачем там лишние скобки? Оно без скобок индексом не сможет быть?
А зачем было использовать Spread operator вместе с сэтом для того, чтобы получить эррэй с уникальными значениями? Я сделал так: const newArr = [new Set(oldArr)], не используя спрэд, и мне выдало тот-же эррэй с уникальными значениями.
Все знал, все понятно.. Но три точки пред "new" что означают?
Пересмотрите, я вроде проговорил
Ты просто Супер)))
fill, reverse и random уже были в прошлом уроке, чтобы этого не происходило можно добавлять в описание список фишек
Все норм, не все смотрят каждое видео))
В варианте очистки массива путём присваивания пустого массива будет работать если в коде больше нету переменных ссылающихся на исходный массив...
допустим есть некоторая переменная
let arrayOfNums = nums;
после присвоения перменной nums пустого массива привязку arrayOfNums мы не очищаем...
В реальности такой метод, с высокой вероятностью, приведёт к ошибке в логике..
Именно поэтому надо всегда использовать const вместо let, если действительно не нужно переназначать массив. И тогда эту ошибку программер словит гораздо раньше и без многочасовой боли дебага ))) Ведь он просто не сможет переназначить массив таким образом
Почему snake_case в js?
Как я понял, трудно найти вакансию js, почти всегда требуется ещё и хорошо вёрстку знать
Нода, РН в помощь, да и в целом верстки мало сейчас, дешевле нанять верстальщика
чо там знать то
@@user-nn6mb9tv1b в вёрстке? Ну вот нравится js, и ориентируешся для работы в в вёрстке, чтобы цеплять ее на js,а тебя ещё и верстать заставляют, сидишь верстаешь половину времени вместо любимого js
@@user-hz3tr9bu1h так ориентируйтесь на фуллстэк, чтобы не заставляли.
Возможно, сделать видео по классам в JS ?
Да
Создание массива уникальных элементов через new Set очень индусским кодом отдаёт )
а ты руки помой и отдавать не будет
А как лучше?
Кто-нибудь знает как удалить превью так чтобы она не отправлялось форме (php). Input type = file atr. Multiple .
Если вдруг например передумал отправлять какой-либо из выбранных файлов.
Проблема в том что Preview удаляется, но видимо не полностью и все равно отправляется форме.
Здравствуйте
Пересечение двух массива был чуть чуть не попятен
reduce не стоит делать без дефолтного значения, иначе пустой массив уронит этот код
Что значит дефолтного? Я новичок. Массив не должен быть пустым для этой функции?
@@humanengine2385 дефолтный = по умолчанию. В reduce можно передать второй параметр - его вернёт функция, если входящий массив пустой. Если второго параметра нет, упадёт ошибка при пустом массиве.
Я 2
красава
Почему в reduce не указал значение по умолчанию
‘’’arr.reduce((acc, cur) => acc + cur, 0)’’’
Если значение по умолчанию не указано, им будет первый элемент массива
3:31 "и в скобках мы пишем по какому значению. В нашем случае рассматриваем только булевы значения." А как метод filter узнал, что из булевых нам нужны только "верные" значения? Магия однако)) Я знаю как это работает, поэтому объяснять мне ничего не надо. Знают ли новички и знает ли сам автор? Ведь он просто в скобках просит: "пожалуйста по булевому значению". И вуаля.
Вообще-то filter сам преобразует айтем в булево значение и использует его.
согласен, с вами и хочу дополнить.
у методов массивов зачастую больше одного параметра в функции handler, поэтому более правильно юзать их через стрелочную функцию
list.filter((item) => Boolean(item))
а еще вот такой код будет выдавать не то что вы ожидаете
[1.3, 2.6, 1.7].map(parseInt) // хотим список int
// => [1, NaN, 1]
это все не вам, а новичкам кто будет читать ваш коммент)
forEach
Есть такое
splice не очищает Boolean
Следующие методы обьектов ?)
Да
@@SuprunAlexey круто👍 коротко и все по делу , годнота
Сделай пожалуйста про electron.js
let sum = eval(nums.join('+'))
Неплохо
nums.reduce((acc, cur) => acc + cur, 0)
+
Привет, а как написать функцию в консоль, чтоб к примеру на почте gmail удалить каждое второе сообщение?
Ни разу таким не занимался
What is your site's url, pls?
Какой сайт
@@SuprunAlexey the one with the lessons you ve been reffering to in this video
не забивайте людям могли говно-кодом, тестируйте пожалуйста эффективность своего кода, когда советуете.
const arr = new Array(1000000).fill(Math.floor(1 + Math.random() * 1000));
let test=[];
let count=100000;
let times = [];
let startDate, endDate = 0;
console.time('F1.length');
startDate= new Date().getTime();
for(i=0; i
1) Первое задание предпочитаю на практике решать таким способом:
let sum = 0;
arr.map(x => sum += x);
map возвращает новый массив, что требует чуть больше памяти чем reduce.
в большинстве случаев это не важно, но при разработке специфических или огромных приложений это уже играет роль.
Если у меня есть три объекта, у каждого объекта есть св-ва age, я хочу просуммировать их общий возраст, я иду по массиву методом reduce и в return пишу return acc.age + next.age, получаю Nan, потому что age записан как строка, как мне преобразовать age в number? в итоге я перед этим прошёл по массиву методом map и преобразовал age в int, но это ш маразам, я б и циклом быстрее сделал, кто знает почему я лох?)
А как удалить истинные значения, из массива? 2:57
const arr = [false, "red", 0, 2, true,"", null, NaN, undefined]
const onlyTrue = arr.filter(some => !some)
let sum = arr.reduce((total, current) => total + current);
А почему на превьюхе связной список?
Картинка просто подходящая
Связной - это у партизан, а список - связанный. Вам бы с русского начать.
@@aammssaamm это комментарий ради комментария?
@@poperechniy, чтобы показать вашу безграмотность как в программировании, так и в русском языке.
@@aammssaamm если хотел показать мою неграмотность в русском и программировании, нужно было сначала хотя бы проверить свои аргументы на прочность. Зайди в гугл и посмотри какой бывает список, связанный или связный.
Так где 1080p?
Редактор видео глючит 😩😩
а зачем выводить в консоль, если данные выводятся в сообщениях, то ни лучше ли выводить в пользовательских сообщениях, таких как alert, innerHTML, document.getElementById или document.write? или консоли нужны для тестирования?
в консоли можно получить больше инфы о том, что выводишь, да и порядок исполнения кода можно отследить,
можно выводить не только логи но и стек-трейсы, можно прыгать в место объявления функции в дебагере браузера, если в консоль вывести функцию
в общем, без консоли никуда
Массив это тоже объект
в js все объект
false.constructor.__proto__.__proto__.constructor.name // "Object"
(0).constructor.__proto__.__proto__.constructor.name // "Object"
и т.д.
На первьюхе односвязный список, а не массив
Нашли к чему придраться 😃
Фильтрация булевых значений - у вас ошибка, так как значение "red" является строкой, и 2 - это Number.
Нет ошибки
@@SuprunAlexey Отличный ответ )
@@demchenkodmytro1403 строка и число это true
@@user-gs5xp8yp5k строка и число - это идите спать )
nums.reduce((a , b) => a + b)
Понятно только тем, кто и так в теме. Минин намого лучше это рассказывает.
Минин вообще не умеет рассказывать - от слова совсем
@@user-nn6mb9tv1b тебе походу к айтикамасутра , который повторяет все по десять раз..
@@shemetovvitaly5482 тот даже сам до сих пор не понял, вот и повторяет в надежде когда-либо понять.
Про reduce нужно подробнее рассказывать - он на первый взгляд кажется тупым и бесполезным.
да, это самый мощный метод массивов, тема reduce не раскрыта
Серьезно такие вопросы на собесах?Пффффф, слишком легко
Бывают и такие, я ж не сказал что только исключительно эти
обычно спрашивают рекурсию, замыкания и понимание асинхронного исполнения кода ;)
Можно немного добавлю. Если вы не собираетесь в данной итерации менять содержимое переменной, то лучше использовать const, а не let. Столкнулся с этим только когда начал работать.