В этой статье мы детально рассмотрим важнейшие вопросы для собеседования по JavaScript. Надеюсь, что скрупулезный разбор каждого вопроса поможет вам усвоить основные концепции и ответить на другие подобные вопросы на собеседованиях.
1. Подробнее о свойствах операторов + и —
console.log(1 + '1' - 1);
Можете ли вы предположить,
как поведут себя операторы + и — в ситуациях, подобных приведенной выше?Когда JavaScript имеет дело с выражением
1 + '1',
то обрабатывает его с помощью оператора +. Интересным свойством этого оператора является то, что он предпочитает конкатенацию строк, когда один из операндов является строкой. В нашем случае
‘1’
является строкой, поэтому JavaScript неявно преобразует числовое значение 1 в строку. Следовательно, 1 + '1' становится '1' + '1', в результате чего получается строка '11'.Теперь у нас есть выражение
'11' - 1.
Поведение оператора — прямо противоположно. Приоритет отдается числовому вычитанию независимо от типа операндов. Если операнды не относятся к числовому типу, JavaScript
выполняет неявное принуждение для их преобразования в числа. В данном случае '11' преобразуется в числовое значение 11, и выражение упрощается до 11 - 1.Собираем все вместе:
'11' - 1 = 11 - 1 = 10
2. Дублирование элементов массива
Рассмотрите следующий JavaScript-код и постарайтесь найти в нем какие-либо проблемы:
function duplicate(array) {
for (var i = 0; i < array.length; i++) {
array.push(array[i]);
}
return array;
}
const arr = [1, 2, 3];
const newArr = duplicate(arr);
console.log(newArr);
В этом фрагменте кода требуется создать новый массив, содержащий дублированные элементы входного массива. При первоначальном рассмотрении кажется, что код создает новый массив newArr, дублируя каждый элемент исходного массива arr. Однако в самой функции duplicate возникает критическая проблема.
Функция duplicate использует цикл для перебора каждого элемента конкретного массива. Но внутри цикла она добавляет новый элемент в конец массива, используя метод push(). В результате массив каждый раз становится длиннее, что создает проблему, при которой цикл никогда не останавливается. Условие цикла (i < array.length) всегда остается истинным, поскольку массив продолжает увеличиваться. В результате цикл может продолжаться бесконечно, что приводит к зацикливанию программы.
Чтобы решить проблему бесконечного цикла, вызванного ростом длины массива, можно перед входом в цикл сохранить начальную длину массива в переменной. Затем эту начальную длину можно использовать в качестве ограничения для итерации цикла. Таким образом, цикл будет выполняться только для исходных элементов массива и перестанет зависеть от роста массива за счет добавления дубликатов. Вот модифицированная версия кода:
function duplicate(array) {
var initialLength = array.length; // Сохранение начальной длины
for (var i = 0; i < initialLength; i++) {
array.push(array[i]); // Дублирование каждого элемента
}
return array;
}
const arr = [1, 2, 3];
const newArr = duplicate(arr);
console.log(newArr);
В результате дублированные элементы окажутся в конце массива, и цикл не будет бесконечным:
[1, 2, 3, 1, 2, 3]
📌Читать дальше
@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
👍26❤5🔥3
This media is not supported in your browser
VIEW IN TELEGRAM
Movie Poster Interaction - Стильные карточки с анимацией и эффектом размытия.
https://codepen.io/pleasedonotdisturb/pen/oNQLVXB
@javascriptv
https://codepen.io/pleasedonotdisturb/pen/oNQLVXB
@javascriptv
❤12🔥4👍2🥰1
This media is not supported in your browser
VIEW IN TELEGRAM
Card — анимированная карточка. Реализована с помощью CSS и JavaScript
https://codepen.io/BlogFire/pen/yLRgbwO
@javascriptv
https://codepen.io/BlogFire/pen/yLRgbwO
@javascriptv
👍12🔥4❤1
🔥 Дайджест полезных материалов из мира Javascript за неделю
Почитать:
— Миграция с Webpack и react-scripts на Vite: Путь к Быстрому и Легковесному React
— Откройте свое будущее: Изучите 15 бесплатных курсов IBM прямо сейчас
— Юриспруденция и программирование: что общего?
— Heretic: full stack фреймворк на основе Marko.js
— Как типизировать Vuex Store
— Кулинарный гид по Vue.js: всё о props
— Как декораторы могут упростить разработку веб-форм
— React Fiber & Concurrency Part 2 (2)
— DOMPurify,增加網站對 XSS 攻擊的防護力
— After changing the usage of axios, my work efficiency increased by 3 times
— Latest Newsletter: Walled Gardens and Reality Interfaces (Issue #135)
— I need issues for my Repo 😐
— The Ultimate Guide to Java Testing Frameworks: JUnit and TestNG
— Buy Google Voice Accounts
— Veracity Accounting in Canada: Navigating Financial Clarity
— Concrete Estimator Canada and USA: Calculating Costs with Precision
— Turning my codepen into an actual app - Brick 1100
— Connect With Customers From Email List on LinkedIn With Automation
Посмотреть:
🌐 How To Create 3 Levels Of React Image Sliders - Beginner, Intermediate, Expert (⏱ 37:25)
🌐 This New CSS Property Is Simple Yet Useful (⏱ 00:54)
Хорошего дня!
@javascriptv
Почитать:
— Миграция с Webpack и react-scripts на Vite: Путь к Быстрому и Легковесному React
— Откройте свое будущее: Изучите 15 бесплатных курсов IBM прямо сейчас
— Юриспруденция и программирование: что общего?
— Heretic: full stack фреймворк на основе Marko.js
— Как типизировать Vuex Store
— Кулинарный гид по Vue.js: всё о props
— Как декораторы могут упростить разработку веб-форм
— React Fiber & Concurrency Part 2 (2)
— DOMPurify,增加網站對 XSS 攻擊的防護力
— After changing the usage of axios, my work efficiency increased by 3 times
— Latest Newsletter: Walled Gardens and Reality Interfaces (Issue #135)
— I need issues for my Repo 😐
— The Ultimate Guide to Java Testing Frameworks: JUnit and TestNG
— Buy Google Voice Accounts
— Veracity Accounting in Canada: Navigating Financial Clarity
— Concrete Estimator Canada and USA: Calculating Costs with Precision
— Turning my codepen into an actual app - Brick 1100
— Connect With Customers From Email List on LinkedIn With Automation
Посмотреть:
🌐 How To Create 3 Levels Of React Image Sliders - Beginner, Intermediate, Expert (⏱ 37:25)
🌐 This New CSS Property Is Simple Yet Useful (⏱ 00:54)
Хорошего дня!
@javascriptv
👍13🔥3❤1
This media is not supported in your browser
VIEW IN TELEGRAM
Transparent Sidebar | CSS - Выдвижное меню с кнопками + карточки
https://codepen.io/ecemgo/pen/yLGeKXE
@javascriptv
https://codepen.io/ecemgo/pen/yLGeKXE
@javascriptv
👍21🔥3❤1
This media is not supported in your browser
VIEW IN TELEGRAM
https://codepen.io/team/keyframers/pen/LYRmXBX
@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
❤9👍5🔥3
This media is not supported in your browser
VIEW IN TELEGRAM
https://codepen.io/danwilson/pen/abqGjVp
@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
👍17🔥5❤3
🔥 Дайджест полезных материалов из мира Javascript за неделю
Почитать:
— Современный junior frontend developer на двух работах уровня middle с общей ЗП 400к. Реальность ли в 2023 году?
— Wolfram Language JavaScript Frontend
— «Нейрогород»: игра на знание JavaScript про фронтендерские баги
— Мои первые шаги в создании браузерных 2D игр на чистом JavaScript + Canvas. Часть 1. Прототип
— Сайд эффект реактивности и апдейта компонента во Vue 3
— Вышел Chrome 118
— Что быстрее: Animated + useNativeDriver или Reanimated?
— Как внедрить гайд по стилю кода в проект
— My #30DayCodingChallenge
— 🔄 Displaying React Components in Reverse Order
— Easily style active links in Tanstack Router
— Weekly Dev Findings 9
— 🚀 Supercharge Your Next.js App with Stunning Images! Learn the Ultimate Cloudinary Image Upload Hack 🔥
— Latest Newsletter: Exhausted (Issue #136)
— Refactoring: Enhancing Code for Better Maintainability
— Vanilla-Tilt Js
— Understanding JavaScript Collections: Arrays, Sets, Maps, and More
— Junior to Senior Web Developer Roadmap: Breakdown
Посмотреть:
🌐 How To Create The YouTube Home Page With Tailwind, React, and TypeScript (⏱ 01:49:08)
Хорошего дня!
Почитать:
— Современный junior frontend developer на двух работах уровня middle с общей ЗП 400к. Реальность ли в 2023 году?
— Wolfram Language JavaScript Frontend
— «Нейрогород»: игра на знание JavaScript про фронтендерские баги
— Мои первые шаги в создании браузерных 2D игр на чистом JavaScript + Canvas. Часть 1. Прототип
— Сайд эффект реактивности и апдейта компонента во Vue 3
— Вышел Chrome 118
— Что быстрее: Animated + useNativeDriver или Reanimated?
— Как внедрить гайд по стилю кода в проект
— My #30DayCodingChallenge
— 🔄 Displaying React Components in Reverse Order
— Easily style active links in Tanstack Router
— Weekly Dev Findings 9
— 🚀 Supercharge Your Next.js App with Stunning Images! Learn the Ultimate Cloudinary Image Upload Hack 🔥
— Latest Newsletter: Exhausted (Issue #136)
— Refactoring: Enhancing Code for Better Maintainability
— Vanilla-Tilt Js
— Understanding JavaScript Collections: Arrays, Sets, Maps, and More
— Junior to Senior Web Developer Roadmap: Breakdown
Посмотреть:
🌐 How To Create The YouTube Home Page With Tailwind, React, and TypeScript (⏱ 01:49:08)
Хорошего дня!
👍5❤2🔥2
Данный репозиторий содержит JS-скрипт, предназначенный для удаления назойливого всплывающего окна "Блокировщик рекламы запрещен на Youtube". Для начала работы следуйте приведенным в репо инструкциям.
Проект также предлагаем незаметный способ пропускать рекламу, если вы заблокированы в видеоплеере.
• Github
@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
👍14🤔2❤1🔥1😁1
1. FlatMap
FlatMap в JavaScript — это отличная техника, с которой можно познакомиться здесь. FlatMap объединяет в себе функции map и метода массивов filter. Рекомендую использовать
flatMap()
вместо комбинации filter()
и map()
.2. Порядок использования методов массивов
Методы массивов — одни из самых важных методов, помогающих взаимодействовать с массивами. В JavaScript существует множество методов массивов.
3. Метод reduce
Я наблюдал эту проблему у многих фронтенд-разработчиков. Когда пакет типа react-charts запрашивает данные в объектоподобной структуре, а реализация react-charts запрашивает данные в формате, сгруппированном по ключу, большинство разработчиков применяют метод
.forEach()
или некорректно используют метод map()
.4. Генераторы
Генераторы и итераторы, пожалуй, относятся к элементам кода, не используемым JavaScript-разработчиками, знания которых ограничиваются вопросами для собеседования по программированию. В сценариях извлечения данных можно столкнуться с огромным объемом данных в БД/API, которые придется передавать во фронтенд. В этом случае наиболее часто используемым решением в react является бесконечная загрузка.
5. Нативные классы JavaScript
В комплект поставки JavaScript входят нативные классы, с помощью которых можно довольно легко создавать/инстанцировать такие элементы, как URL, заголовки и т. д.
Подробнее о каждом
Please open Telegram to view this post
VIEW IN TELEGRAM
👍12❤3🔥3
This media is not supported in your browser
VIEW IN TELEGRAM
🔥 Realistic 3D Photo Cards — всплывающие изображения. Реализована с помощью CSS и JavaScript
https://codepen.io/jouanmarcel/pen/JjjZRrW
@javascriptv
https://codepen.io/jouanmarcel/pen/JjjZRrW
@javascriptv
❤7👍2🔥2
This media is not supported in your browser
VIEW IN TELEGRAM
Frantic maze — безумный лабиринт. Реализована с помощью CSS и JavaScript
#анимация #css #javascript
https://codepen.io/Dillo/pen/jOQPWMe
@javascriptv
#анимация #css #javascript
https://codepen.io/Dillo/pen/jOQPWMe
@javascriptv
🔥7❤4👍2
This media is not supported in your browser
VIEW IN TELEGRAM
3D Gallery - Смена карточек с 3D-эффектом, выполненная с помощью SCSS и JavaScript.
https://codepen.io/jsulpis/pen/GRMwBGR
@javascriptv
https://codepen.io/jsulpis/pen/GRMwBGR
@javascriptv
👍11❤2🔥2
🔥 Дайджест полезных материалов из мира Javascript за неделю
Почитать:
— Fusor vs React
— JavaScript pattern CustomSwitch
— CRUD React c Redux и Saga + typescript в 2023
— Приглашаем на онлайн-митап «Гетерогенность, или Деплой JavaScript туда и обратно»
— Next JS и Nginx
— О чем расскажут на HolyJS 2023 Autumn: от архитектуры до карьеры
— Vue.js 3 — шаблоны проектирования и лучшие практики
— Небольшое React приложение со своим бекендом, запускаем с одного терминала
— PiterJS: сентябрь/октябрь
— Взаимодействие с Midjourney с использованием Discord API
— Weekly Dev Findings 10
— GraphQl Integration With React Native
— Building Accessible Web Apps
— Abstract Syntax Trees and Practical Applications in JavaScript
— Creating and Styling Forms with HTML and CSS: A Comprehensive Guide
— 7 Github Repositories to Master React 😎
— Proseso ng paggawa ng aking (dating) Website
— Cranberry: The Cure for Your URI
— JavaScript - Under the hood (Part 1 - Overview of Runtime Environment)
— 🤔My Underrated Nextjs Project 🔥
Посмотреть:
🌐 You Suck At Accessibility (But You Don't Have To) (⏱ 13:23)
🌐 This New Node Feature Is Super Convenient (⏱ 00:43)
Хорошего дня!
Почитать:
— Fusor vs React
— JavaScript pattern CustomSwitch
— CRUD React c Redux и Saga + typescript в 2023
— Приглашаем на онлайн-митап «Гетерогенность, или Деплой JavaScript туда и обратно»
— Next JS и Nginx
— О чем расскажут на HolyJS 2023 Autumn: от архитектуры до карьеры
— Vue.js 3 — шаблоны проектирования и лучшие практики
— Небольшое React приложение со своим бекендом, запускаем с одного терминала
— PiterJS: сентябрь/октябрь
— Взаимодействие с Midjourney с использованием Discord API
— Weekly Dev Findings 10
— GraphQl Integration With React Native
— Building Accessible Web Apps
— Abstract Syntax Trees and Practical Applications in JavaScript
— Creating and Styling Forms with HTML and CSS: A Comprehensive Guide
— 7 Github Repositories to Master React 😎
— Proseso ng paggawa ng aking (dating) Website
— Cranberry: The Cure for Your URI
— JavaScript - Under the hood (Part 1 - Overview of Runtime Environment)
— 🤔My Underrated Nextjs Project 🔥
Посмотреть:
🌐 You Suck At Accessibility (But You Don't Have To) (⏱ 13:23)
🌐 This New Node Feature Is Super Convenient (⏱ 00:43)
Хорошего дня!
👍5❤3🔥1
Этот репо репо поможет новичкам начать путь во фронтенде с уверенностью и подскажет опытным разработчикам, как развиваться дальше.
В нем собраны все актуальные инструменты и технологии, репо уже набрал более 250 000 звезд.
@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍13🔥5❤3
This media is not supported in your browser
VIEW IN TELEGRAM
#анимация #css #javascript
https://codepen.io/yexx/pen/OJzQNVN
@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
👍12🔥4❤2
➯ Создайте игру Flappy Bird.
http://youtube.com/watch?v=Ltg1fl4Obgg
➯ Игра "Хэнгмэн"
http://youtube.com/watch?v=hSSdc8vKP1I
➯ Слайдер изображений -
http://youtube.com/watch?v=PsNaoDhzQm0
➯ Переключение светлой/темной темы -
http://youtube.com/watch?v=CUEJkJ9HDbY
➯ Цифровые часы
http://youtube.com/watch?v=lsoCv8Agg6E
➯ Создание музыкального проигрывателя -
http://youtube.com/watch?v=oscPp3KghS8
➯ Список дел
http://youtube.com/watch?v=kzHmtmCMUwk
➯ Тетрис
http://youtube.com/watch?v=ZTHjT3bm-64
➯ Создание 15 проектов на JavaScript -
http://youtube.com/watch?v=3PHXvlpOkf4
@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
👍17🔥5❤1
This media is not supported in your browser
VIEW IN TELEGRAM
🚀 Work scroll — изящная реализация прокрутки страницы. Реализована с помощью CSS и JavaScript
#анимация #css #javascript
https://codepen.io/Zuraavl/pen/jOQEmzM
@javascriptv
#анимация #css #javascript
https://codepen.io/Zuraavl/pen/jOQEmzM
@javascriptv
❤11👍3👎1🔥1
➽ javascripting - http://javascripting.com
➽ codepen - http://codepen.io
➽ codemyui - http://codemyui.com
➽ jsfiddle - http://jsfiddle.net
➽ jsbin - http://jsbin.com
➽ 30secondsofcode - http://30secondsofcode.org/js/p/1/
➽ freefrontend - http://freefrontend.com
➽ snippit - http://snippit.io
➽ codesandbox - http://codesandbox.io
➽ glitch - http://glitch.com
➽ tabnine - http://tabnine.com
➽ github - http://github.com
@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
👍12🔥2❤1