\nВ этом примере элемент

будет добавляться или удаляться из DOM при каждом нажатии на кнопку.\n\nС v-show:\n\n\n\nВ этом примере элемент

всегда присутствует в DOM, но его видимость контролируется с помощью CSS.\n\n✅v-if: Условное добавление и удаление элементов в DOM.\n✅v-show: Условное изменение видимости элементов с помощью CSS.\n\n👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент\n\n🔐 База собесов | 🔐 База тестовых","datePublished":"2024-06-23T09:10:12Z","dateModified":"2024-06-23T09:10:12Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":8,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":6578},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":22},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":17},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":8}]}},{"@type":"ListItem","position":10,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/270","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/270","mainEntityOfPage":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/270","headline":"Как добавить слушатель события ? Спросят с вероятностью 7% Добавление слушателя события — это важный аспект р…","articleBody":"Как добавить слушатель события ?\nСпросят с вероятностью 7%\n\nДобавление слушателя события — это важный аспект работы с веб-приложениями, так как позволяет реагировать на действия пользователя, такие как клики, ввод текста, прокрутка и другие. В современных фреймворках и библиотеке JavaScript есть несколько способов добавить слушатели событий.\n\nПочему это нужно?\n\nСлушатели событий позволяют интерактивно реагировать на действия пользователей, делая приложения динамичными и отзывчивыми. Например, при клике на кнопку можно вызвать определенную функцию, при вводе текста в поле — обновить состояние и так далее.\n\nКак это используется?\n\nРассмотрим три основных подхода к добавлению слушателей событий: в чистом JavaScript, в React и с использованием jQuery.\n\n1️⃣Чистый JavaScript\nДля добавления слушателя события используется метод addEventListener.\n\nПример:\n\n\n\n \n \n\n\n Click me\n\n \n\n\n\nВ этом примере мы получаем элемент кнопки по её id и добавляем слушатель события click, который вызывает функцию, отображающую сообщение.\n\n2️⃣React\nОбработчики событий добавляются непосредственно к JSX-элементам с использованием специальных атрибутов, таких как onClick, onChange и т.д.\n\nПример:\nimport React from 'react';\n\nfunction App() {\n const handleClick = () => {\n alert('Button was clicked!');\n };\n\n return (\n

\n );\n}\n\nexport default App;\n\nВ этом примере мы определяем функцию handleClick и передаем её в атрибут onClick кнопки. Когда пользователь нажимает на кнопку, вызывается функция handleClick.\n\n3️⃣jQuery\nЕсли вы используете его, добавление слушателей событий также очень просто и удобно.\n\nПример:\n\n\n\n \n \n \n\n\n Click me\n\n \n\n\n\nВ этом примере мы используем jQuery для добавления обработчика события click к кнопке.\n\nПочему это удобно и важно:\n✅Интерактивность: Позволяет создавать динамичные и отзывчивые интерфейсы.\n✅Гибкость: Возможность реагировать на различные действия пользователей.\n✅Удобство: В каждом подходе (чистый JavaScript, React, jQuery) есть свои удобства и особенности, которые помогают решать задачи более эффективно.\n\nДобавление слушателя события позволяет реагировать на действия пользователя и делает приложения интерактивными. В зависимости от технологии (чистый JavaScript, React или jQuery) процесс добавления слушателя может немного отличаться, но цель остается той же — улучшить взаимодействие пользователя с приложением.\n\n👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент\n\n🔐 База собесов | 🔐 База тестовых","datePublished":"2024-06-22T10:07:07Z","dateModified":"2024-06-22T10:07:07Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":1,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":6395},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":33},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":20},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":1}]}},{"@type":"ListItem","position":11,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/269","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/269","mainEntityOfPage":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/269","headline":"📌 Составили список лучших каналов от действующих разработчиков: Frontend Developer — советы и практики от дей…","articleBody":"📌 Составили список лучших каналов от действующих разработчиков:\n\nFrontend Developer — советы и практики от действующего Senior-разработчика\n\nPython Developer — готовый код и полезные ресурсы для любого питониста\n\nJava Developer — секреты и тонкости программирования на Java","datePublished":"2024-06-22T08:07:06Z","dateModified":"2024-06-24T08:13:29Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":3446},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":2},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":4}]}},{"@type":"ListItem","position":12,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/268","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/268","mainEntityOfPage":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/268","headline":"Frontend | Вопросы собесов","datePublished":"2024-06-21T16:03:09Z","dateModified":"2024-06-21T16:03:09Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":4,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":6616},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":21},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":14},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":4}]}},{"@type":"ListItem","position":13,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/267","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/267","mainEntityOfPage":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/267","headline":"Хватит терять время на уже готовый код! Frontend Trends — библиотека фронтендера, где собраны готовые CodePen…","articleBody":"Хватит терять время на уже готовый код!\n\nFrontend Trends — библиотека фронтендера, где собраны готовые CodePen решения для ежедневных задач. Эффекты при наведении, 3D-анимации, готовые карточки и др.\n\nЗашли – сохранили – применили в своём проекте. Пользуйтесь: @trends_frontend","datePublished":"2024-06-21T14:03:08Z","dateModified":"2024-06-23T14:03:21Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":3713},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":12},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":20}]}},{"@type":"ListItem","position":14,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/266","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/266","mainEntityOfPage":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/266","headline":"Как отрисовать компоненты на основе массива ? Спросят с вероятностью 7% В современных фреймворках, таких как…","articleBody":"Как отрисовать компоненты на основе массива ?\nСпросят с вероятностью 7%\n\nВ современных фреймворках, таких как React, отрисовка компонентов на основе массива данных — это стандартная задача. Она позволяет динамически создавать элементы интерфейса на основе данных, что делает код более гибким и адаптируемым к изменениям.\n\nПочему это нужно?\n\nОтрисовка компонентов на основе массива данных позволяет:\n✅Динамически создавать и отображать элементы интерфейса.\n✅Управлять отображением элементов на основе данных (например, список задач, карточки пользователей и т.д.).\n✅Избегать дублирования кода, создавая компоненты в цикле.\n\nКак это используется?\nДля этого обычно используется метод массива .map(), который перебирает массив данных и возвращает новый массив с JSX-элементами.\n\nПример:\n\n1️⃣Подготовка данных:\nПредположим, у нас есть массив объектов с данными пользователей:\nconst users = [\n { id: 1, name: 'Иван', age: 30 },\n { id: 2, name: 'Мария', age: 25 },\n { id: 3, name: 'Петр', age: 40 },\n];\n\n2️⃣Создание компонента для отрисовки каждого пользователя:\nСоздадим компонент User, который принимает данные пользователя через props:\nfunction User({ name, age }) {\n return (\n \n );\n}\n\n3️⃣Отрисовка списка пользователей:\nИспользуем метод .map() для создания списка компонентов User на основе массива users:\nfunction UserList({ users }) {\n return (\n \n );\n}\n\nЗдесь важно использовать уникальный key для каждого элемента списка, чтобы React мог оптимально управлять рендерингом этих элементов.\n\n4️⃣Использование в основном компоненте:\nНаконец, используем компонент UserList в основном компоненте приложения:\nfunction App() {\n return (\n \n );\n}\n\nexport default App;\n\nПочему это удобно и важно:\n✅Динамичность: Мы можем легко изменить массив users, и наш интерфейс автоматически обновится.\n✅Читаемость: Код становится более структурированным и легче поддерживается.\n✅Оптимизация: Использование ключей позволяет React эффективно обновлять элементы, минимизируя количество изменений в DOM.\n\nОтрисовка компонентов на основе массива данных позволяет динамически создавать элементы интерфейса и улучшает читаемость и поддержку кода.\n\n👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент\n\n🔐 База собесов | 🔐 База тестовых","datePublished":"2024-06-21T08:10:10Z","dateModified":"2024-06-21T08:10:10Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":13,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":6658},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":36},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":29},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":13}]}},{"@type":"ListItem","position":15,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/265","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/265","mainEntityOfPage":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/265","headline":"Все надоело и пропал интерес, чувствуешь себя амебой и хочется только залипать в телефоне. Бывает? Психолог в…","articleBody":"Все надоело и пропал интерес, чувствуешь себя амебой и хочется только залипать в телефоне. Бывает?\n\nПсихолог взрослого человека - канал для айтишников, у которых периодически опускаются руки и отключается мозг, ибо переработки и постоянная тревожность не приводят к другим исходам.\n\n▪️ Как научиться отвлекаться от работы и отдыхать?\n▪️ Как совместить кучу рабочих задач и время с семьей?\n▪️ Как справиться с прокрастинацией?\n▪️ Как не растерять запал, даже если начальник и коллеги 💩 и кажется, что ничего не выходит?\n\nПодписывайтесь на канал @vadimpetrov_psy и научитесь работать без упахивания, выгорания и ущерба для личной жизни!\n\n👨🏻‍💻 Псс. Заходите в закреп канала - там много полезного.","datePublished":"2024-06-21T06:10:09Z","dateModified":"2024-06-23T06:10:15Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":3858},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":7},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":3}]}},{"@type":"ListItem","position":16,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/264","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/264","mainEntityOfPage":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/264","headline":"Frontend | Вопросы собесов","datePublished":"2024-06-20T16:03:12Z","dateModified":"2024-06-20T16:03:12Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":8,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":6749},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":23},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":6},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":8}]}},{"@type":"ListItem","position":17,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/263","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/263","mainEntityOfPage":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/263","headline":"Что такое интерполяция ? Спросят с вероятностью 7% Интерполяция — это метод вставки значений или выражений в…","articleBody":"Что такое интерполяция ?\nСпросят с вероятностью 7%\n\nИнтерполяция — это метод вставки значений или выражений в строки. Она позволяет динамически встраивать переменные и выражения в текстовые строки, делая их более гибкими и удобными для использования. Например, интерполяция достигается с помощью шаблонных строк.\n\nПочему это нужно?\n\nУпрощает работу с текстом, который должен включать значения переменных или результаты вычислений. Без интерполяции, программистам пришлось бы вручную конкатенировать строки и переменные, что делает код менее читаемым и более сложным в поддержке.\n\nКак это используется?\n\nДля примера возьмём JavaScript и его шаблонные строки. Шаблонные строки заключаются в обратные кавычки (``) и позволяют включать выражения внутри них с помощью конструкции ${}.\n\nПример кода:\nconst name = 'Иван';\nconst age = 30;\nconst greeting = `Привет, меня зовут ${name} и мне ${age} лет.`;\n\nconsole.log(greeting); // Вывод: Привет, меня зовут Иван и мне 30 лет.\n\nВ данном примере переменные name и age интерполируются в строку greeting.\n\nКак это работает и почему это удобно?\n✅Читаемость: Шаблонные строки делают код более читабельным и понятным, так как видна вся строка целиком, без необходимости объединения отдельных частей.\n✅Удобство: Позволяет легко включать значения переменных и результаты выражений в строку.\n✅Избежание ошибок: Снижает вероятность ошибок, которые могут возникнуть при ручной конкатенации строк.\n\nШаблонные строки также поддерживают выполнение выражений внутри интерполяции:\nconst a = 5;\nconst b = 10;\nconst result = Сумма ${a} и ${b} равна ${a + b}.;\n\nconsole.log(result); // Вывод: Сумма 5 и 10 равна 15.\n\nИнтерполяция — это метод вставки значений и выражений в строки, который улучшает читаемость и удобство работы с текстом в коде. Например, это делается с помощью шаблонных строк и конструкции ${}.\n\n👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент\n\n🔐 База собесов | 🔐 База тестовых","datePublished":"2024-06-20T09:10:12Z","dateModified":"2024-06-20T09:10:12Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":5,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":7179},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":33},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":32},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":5}]}},{"@type":"ListItem","position":18,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/262","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/262","mainEntityOfPage":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/262","headline":"Frontend | Вопросы собесов","datePublished":"2024-06-19T16:03:14Z","dateModified":"2024-08-23T17:30:53Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":8,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":6911},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":43},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":7},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":8}]}},{"@type":"ListItem","position":19,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/261","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/261","mainEntityOfPage":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/261","headline":"Что делает $emit ? Спросят с вероятностью 7% $emit — это метод, используемый для отправки событий из дочернег…","articleBody":"Что делает $emit ?\nСпросят с вероятностью 7%\n\n$emit — это метод, используемый для отправки событий из дочернего компонента в родительский компонент. Он позволяет дочернему компоненту уведомлять родительский компонент о том, что что-то произошло, передавая вместе с этим событием любые необходимые данные.\n\nКак его использовать\n\n1️⃣В дочернем компоненте:\n✅Используйте метод $emit, чтобы отправить событие.\n✅Передайте имя события и любые данные, которые нужно передать родительскому компоненту.\n\n2️⃣В родительском компоненте:\n✅Слушайте это событие, используя директиву v-on или её сокращение @.\n✅Обработайте событие в методе родительского компонента.\n\nДочерний компонент (ChildComponent.vue)\n\n\n\n\nРодительский компонент (ParentComponent.vue)\n\n\n\n\nПояснение\n\n1️⃣В дочернем компоненте `ChildComponent`:\n✅Мы создали кнопку и добавили к ней обработчик события @click, который вызывает метод notifyParent.\n✅Метод notifyParent использует $emit для отправки события childClicked и передает строку 'Данные от дочернего компонента' в качестве данных.\n\n2️⃣В родительском компоненте ParentComponent:\n✅Мы добавили дочерний компонент в шаблон и прослушиваем событие childClicked с помощью директивы @childClicked.\n✅Когда событие childClicked происходит, вызывается метод handleChildClick, который принимает данные, переданные дочерним компонентом, и выводит их в консоль.\n\nПочему это важно?\n\n✅Коммуникация между компонентами: $emit позволяет организовать эффективную коммуникацию между компонентами, передавая данные и уведомления от дочернего компонента к родительскому.\n✅Разделение обязанностей: С помощью событий можно поддерживать чистую и разделенную архитектуру, где каждый компонент отвечает только за свои задачи и уведомляет другие компоненты о произошедших изменениях через события.\n✅Масштабируемость и поддерживаемость: Использование событий делает приложение более масштабируемым и поддерживаемым, так как компоненты остаются независимыми и могут повторно использоваться в разных частях приложения.\n\n$emit используется для отправки событий из дочернего компонента в родительский, позволяя передавать данные и уведомления о произошедших изменениях.\n\n👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент\n\n🔐 База собесов | 🔐 База тестовых","datePublished":"2024-06-19T09:10:10Z","dateModified":"2024-06-19T09:10:10Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":4,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":7361},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":22},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":26},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":4}]}},{"@type":"ListItem","position":20,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/260","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/260","mainEntityOfPage":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/260","headline":"Frontend | Вопросы собесов","datePublished":"2024-06-18T16:03:10Z","dateModified":"2024-06-18T16:03:10Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":27,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":7049},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":55},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":12},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":27}]}}]}

Frontend | Вопросы собесов

17 296

Что такое стрелочная функция ? Спросят с вероятностью 7% Стрелочная функция (arrow function) — это сокращённый синтаксис для создания функций, введённый в стандарте ES6 (ECMAScript 2015). Стрелочные функции имеют компактный синтаксис и обладают некоторыми особенностями в отношении контекста this. Зачем они нужны Полезны для: 1️⃣Упрощения записи функций. 2️⃣Автоматического привязывания контекста this к окружению, в котором они были созданы (лексическое привязывание). Синтаксис Синтаксис стрелочной функции:

const функция = (аргументы) => {
  // тело функции
};

Примеры 1️⃣Функция без аргументов:

const sayHello = () => {
     console.log('Hello!');
   };

2️⃣Функция с одним аргументом:

const double = num => num * 2;

3️⃣Функция с несколькими аргументами:

const add = (a, b) => a + b;

4️⃣Функция с телом, содержащим несколько выражений:

      const sumAndLog = (a, b) => {
     const result = a + b;
     console.log(result);
     return result;
   };

Особенности 1️⃣Лексическое привязывание this: В стрелочных функциях this привязывается к контексту, в котором функция была определена. Это отличие от обычных функций, где this определяется в момент вызова функции.

      function Person() {
     this.age = 0;
   
     setInterval(() => {
       this.age++;
       console.log(this.age);
     }, 1000);
   }
   
   const person = new Person();
   

В этом примере стрелочная функция внутри setInterval использует this от внешней функции Person, что позволяет корректно увеличивать значение age. 2️⃣Отсутствие своего this, arguments, super и new.target: Стрелочные функции не имеют своих собственных версий этих объектов, что делает их непригодными в некоторых случаях, например, при использовании в качестве методов объекта. 3️⃣Нельзя использовать как конструкторы: Стрелочные функции нельзя использовать с оператором new.

const MyFunc = () => {};
   const instance = new MyFunc(); // Ошибка: MyFunc не является конструктором

Стрелочная функция — это короткий синтаксис для создания функций в JavaScript, который автоматически привязывает this к контексту, в котором она была создана. Они удобны для коротких функций и ситуаций, где требуется лексическое привязывание this. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент 🔐 База собесов | 🔐 База тестовых

6.7k44311

Аналитика

Frontend | Вопросы собесов

17 296

🤔 Какой метод оптимально использовать для создания SPA?

Anonymous voting

6.3k911338

Аналитика

Frontend | Вопросы собесов

17 296

Ad

У топовых айтишников есть секрет, они работают не 8 часов, а головой! Понимают, что без английского в айти делать нечего. Поэтому в начале карьеры изучают технический английский, а потом смело прибавляют +40% к рыночной зарплате. Знают где в телеграме брать современные идеи и материалы для работы. Например, для web-разработчиков – это Сайтодел. Становись Senior-разработчиком. Всё просто, два клика: → Английский для программистов → Сайтодел 🎁 Бесплатно: Поиск разработчика для сайта и первый созвон по обучению английскому. Не упускай такую возможность!

4.1k1518

Аналитика

Frontend | Вопросы собесов

17 296

Как работают map, reduce и filter ? Спросят с вероятностью 7% map, reduce и filter — это методы массивов, которые позволяют обрабатывать и трансформировать массивы функциональным способом. Метод map Создает новый массив, в котором каждый элемент является результатом вызова предоставленной функции на каждом элементе исходного массива. Как он работает ✅Итерирует по каждому элементу массива. ✅Применяет к каждому элементу функцию. ✅Возвращает новый массив с результатами вызова функции для каждого элемента.

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8]

В этом примере функция умножает каждый элемент массива numbers на 2, и результат сохраняется в новом массиве doubled. Метод reduce Применяется к массиву и сводит его к одному значению. Функция принимает аккумулятор и текущий элемент, производит операцию и возвращает новый аккумулятор. Как он работает ✅Итерирует по каждому элементу массива. ✅Применяет к каждому элементу функцию, которая обновляет аккумулятор. ✅Возвращает единственное значение — аккумулятор.

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum); // 10

Здесь reduce суммирует все элементы массива, начиная с аккумулятора, равного 0. Метод filter Создает новый массив, содержащий все элементы исходного массива, для которых функция-условие возвращает true. Как он работает ✅Итерирует по каждому элементу массива. ✅Применяет к каждому элементу функцию-условие. ✅Возвращает новый массив с элементами, прошедшими условие.

const numbers = [1, 2, 3, 4];
const even = numbers.filter(num => num % 2 === 0);
console.log(even); // [2, 4]

В этом примере filter создает новый массив, содержащий только четные числа из массива numbers. ✅map: создает новый массив, преобразуя каждый элемент по заданной функции. ✅reduce: сводит массив к одному значению, применяя функцию к каждому элементу. ✅filter: создает новый массив, содержащий только элементы, которые соответствуют условию. Все три метода делают код более читаемым и декларативным, облегчая работу с массивами. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент 🔐 База собесов | 🔐 База тестовых

6.7k55442

Аналитика

Frontend | Вопросы собесов

17 296

Что такое самовызывающаяся функция ? Спросят с вероятностью 7% Самовызывающаяся функция (IIFE, Immediately Invoked Function Expression) — это функция, которая вызывается сразу же после её объявления. Используется для создания локальной области видимости и изоляции кода от глобальной области видимости. Зачем нужны самовызывающиеся функции Самовызывающиеся функции используются для: 1️⃣Изоляции переменных и предотвращения их попадания в глобальную область видимости. 2️⃣Создания замыканий. 3️⃣Инициализации кода, который должен выполняться сразу после загрузки страницы или выполнения скрипта. Как пишется самовызывающаяся функция Синтаксис IIFE выглядит следующим образом:

(function() {
  // код функции
})();

Или с использованием стрелочных функций:

(() => {
  // код функции
})();

Примеры: Изоляция переменных

(function() {
  var message = 'Hello, World!';
  console.log(message); // Вывод: Hello, World!
})();

console.log(message); // Ошибка: message is not defined

В этом примере переменная message существует только внутри IIFE и недоступна вне её. Создание замыканий

var counter = (function() {
  var count = 0;
  return function() {
    count += 1;
    return count;
  };
})();

console.log(counter()); // Вывод: 1
console.log(counter()); // Вывод: 2

Здесь IIFE создаёт локальную переменную count, к которой можно получить доступ только через возвращаемую функцию. Инициализация кода

(function() {
  console.log('IIFE выполнена сразу после объявления!');
})();

Этот пример демонстрирует выполнение кода сразу после объявления функции. Самовызывающаяся функция (IIFE) — это функция, которая вызывается сразу после её объявления. Она используется для изоляции переменных и создания замыканий. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент 🔐 База собесов | 🔐 База тестовых

6.3k31412

Аналитика

Frontend | Вопросы собесов

17 296

Что делает метод apply ? Спросят с вероятностью 7% Метод apply позволяет вызвать функцию с определённым значением this и передать аргументы в виде массива (или массивоподобного объекта). Он является частью прототипа функции и используется для управления контекстом выполнения функции и передачи аргументов. Зачем он нужен Метод apply полезен в ситуациях, когда: 1️⃣Нужно вызвать функцию с конкретным значением this. 2️⃣Необходимо передать аргументы в виде массива, особенно когда их количество заранее неизвестно. Как он используется Синтаксис метода apply выглядит так:

function.apply(thisArg, [argsArray])

✅thisArg: Значение, используемое для this при вызове функции. ✅argsArray: Массив или массивоподобный объект, содержащий аргументы для функции. Пример

function greet(greeting, punctuation) {
  console.log(greeting + ', ' + this.name + punctuation);
}

const person = { name: 'Alice' };

greet.apply(person, ['Hello', '!']); // Вывод: "Hello, Alice!"

В этом примере: ✅Функция greet принимает два аргумента и использует this.name. ✅Метод apply вызывает greet с this, указывающим на объект person, и передает массив аргументов ['Hello', '!']. Зачем использовать apply вместо других методов Особенно удобен, когда аргументы уже находятся в массиве. Если бы использовался метод call, пришлось бы передавать аргументы вручную:

greet.call(person, 'Hello', '!'); // То же самое, но аргументы передаются по отдельности

Еще один пример: использование с встроенными методами Метод apply можно использовать для передачи массивов встроенным функциям, которые не работают напрямую с массивами. Например, использование метода Math.max для нахождения максимального значения в массиве:

const numbers = [5, 6, 2, 3, 7];
const max = Math.max.apply(null, numbers); // 7

Здесь: ✅Math.max ожидает список отдельных чисел, а не массив. ✅apply передает массив как набор отдельных аргументов. Метод apply вызывает функцию с определённым значением this и аргументами в виде массива. Это удобно, когда аргументы уже находятся в массиве и нужно управлять контекстом выполнения функции. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент 🔐 База собесов | 🔐 База тестовых

6.5k28301

Аналитика

Frontend | Вопросы собесов

17 296

Какие структуры данных есть в js ? Спросят с вероятностью 7% Существует несколько основных структур данных, которые используются для хранения и управления данными. Рассмотрим их подробнее: 1️⃣Массивы (Arrays) ✅Что это: Упорядоченные списки элементов. ✅Зачем нужны: Для хранения коллекций данных, которые можно обрабатывать по индексу. ✅Как использовать:

          let fruits = ["Apple", "Banana", "Cherry"];
     console.log(fruits[0]); // Apple
     

✅Пример использования: Хранение списка товаров в корзине интернет-магазина. 2️⃣Объекты (Objects) ✅Что это: Наборы пар "ключ-значение". ✅Зачем нужны: Для хранения данных в виде ассоциативных массивов, где ключами могут быть строки или символы. ✅Как использовать:

          let person = {
       name: "John",
       age: 30
     };
     console.log(person.name); // John
     

✅Пример использования: Хранение информации о пользователе. 3️⃣Map (Карты) ✅Что это: Коллекции пар "ключ-значение", где ключи могут быть любого типа. ✅Зачем нужны: Для хранения данных с уникальными ключами, с более гибкими возможностями по сравнению с объектами. ✅Как использовать:

          let map = new Map();
     map.set('name', 'John');
     map.set(1, 'one');
     console.log(map.get('name')); // John
     

✅Пример использования: Хранение настроек с ключами различного типа. 4️⃣Set (Множества) ✅Что это: Коллекции уникальных значений. ✅Зачем нужны: Для хранения множества значений, где каждое значение уникально. ✅Как использовать:

          let set = new Set();
     set.add(1);
     set.add(1); // Значение не добавится, так как оно уже существует
     console.log(set.size); // 1
     

✅Пример использования: Хранение уникальных тегов из списка статей. 5️⃣WeakMap (Слабые карты) ✅Что это: Коллекции пар "ключ-значение", где ключи являются объектами и имеют слабые ссылки. ✅Зачем нужны: Для хранения данных с автоматическим удалением неиспользуемых объектов. ✅Как использовать:

          let weakMap = new WeakMap();
     let obj = {};
     weakMap.set(obj, 'value');
     obj = null; // Теперь объект может быть удалён из памяти
     

✅Пример использования: Хранение метаданных объектов без риска утечек памяти. 6️⃣WeakSet (Слабые множества) ✅Что это: Коллекции объектов, где каждое значение может быть удалено автоматически, если больше не используется. ✅Зачем нужны: Для хранения уникальных объектов с возможностью автоматического удаления. ✅Как использовать:

          let weakSet = new WeakSet();
     let obj = {};
     weakSet.add(obj);
     obj = null; // Теперь объект может быть удалён из памяти
     

✅Пример использования: Отслеживание объектов без риска утечек памяти. 7️⃣String (Строки) ✅Что это: Последовательности символов. ✅Зачем нужны: Для хранения и обработки текстовых данных. ✅Как использовать:

          let greeting = "Hello, world!";
     console.log(greeting.length); // 13
     

✅Пример использования: Хранение и манипулирование текстовой информацией, такой как имена пользователей или сообщения. 8️⃣Typed Arrays (Типизированные массивы) ✅Что это: Массивы, которые предоставляют массивы с фиксированной длиной для различных типов данных. ✅Зачем нужны: Для работы с бинарными данными и оптимизации производительности. ✅Как использовать:

          let buffer = new ArrayBuffer(16);
     let int32View = new Int32Array(buffer);
     int32View[0] = 42;
     console.log(int32View[0]); // 42
     

✅Пример использования: Обработка данных в WebGL или манипулирование бинарными данными. Есть массивы, объекты, Map, Set, WeakMap, WeakSet, строки и типизированные массивы. Они нужны для хранения и управления различными типами данных, от упорядоченных списков до ассоциативных массивов и уникальных наборов значений. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент 🔐 База собесов | 🔐 База тестовых

6.8k854617

Аналитика

Frontend | Вопросы собесов

17 296

Ad

Мидл-специалист отличается от джуниор-разработчика не только опытом и уровнем владения технологиями, но и софт-скилами. На курсе Практикума вы сможете прокачать все необходимые навыки и построить новую карьеру. На курсе мы поможем вам: — освоить новые навыки и извлекать больше пользы из своих софт-скилов; — углубить знания в алгоритмах, DevOps, бэкенд‑разработке и смежных сферах; — сделать с нуля 2 проекта — до работающих приложений. Если вы не уверены, подойдёт ли вам профессия, — пройдите бесплатную часть и тест в конце. Если понравится, платите за остальную часть как удобно: в рассрочку или целиком. → Начать курс бесплатно

3.9k84

Аналитика

Frontend | Вопросы собесов

17 296

Назови отличия директив v show и v if ? Спросят с вероятностью 7% v-show и v-if — это две директивы, которые используются для условного отображения элементов в DOM. Однако они работают по-разному и имеют разные случаи использования. Рассмотрим их отличия более детально. Основные отличия 1️⃣Рендеринг в DOM: ✅v-if: Элемент с v-if рендерится в DOM только тогда, когда условие истинно. Если условие ложно, элемент не создаётся и удаляется из DOM. ✅v-show: Элемент с v-show всегда рендерится в DOM, независимо от условия. Однако, его видимость контролируется с помощью CSS-свойства display. 2️⃣Переключение состояния: ✅v-if: Переключение между состояниями приводит к созданию или уничтожению элемента в DOM. Это может быть медленнее при частом переключении, так как каждый раз происходит перерисовка. ✅v-show: Переключение состояния происходит мгновенно, поскольку элемент уже присутствует в DOM, и меняется только его CSS-свойство display. 3️⃣Использование в условиях: ✅v-if: Рекомендуется использовать, когда элемент должен быть условно добавлен или удален из DOM. Полезно, когда условие меняется редко. ✅v-show: Рекомендуется использовать, когда необходимо часто переключать видимость элемента, поскольку это более производительно. Примеры: С v-if:

<template>
  <div>
    <button @click="toggle">Toggle</button>
    <p v-if="isVisible">Этот текст отображается только если isVisible истинно</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  },
  methods: {
    toggle() {
      this.isVisible = !this.isVisible;
    }
  }
};
</script>

В этом примере элемент <p> будет добавляться или удаляться из DOM при каждом нажатии на кнопку. С v-show:

<template>
  <div>
    <button @click="toggle">Toggle</button>
    <p v-show="isVisible">Этот текст всегда присутствует в DOM, но может быть скрыт</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  },
  methods: {
    toggle() {
      this.isVisible = !this.isVisible;
    }
  }
};
</script>

В этом примере элемент <p> всегда присутствует в DOM, но его видимость контролируется с помощью CSS. ✅v-if: Условное добавление и удаление элементов в DOM. ✅v-show: Условное изменение видимости элементов с помощью CSS. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент 🔐 База собесов | 🔐 База тестовых

6.6k17228

Аналитика

Frontend | Вопросы собесов

17 296

Как добавить слушатель события ? Спросят с вероятностью 7% Добавление слушателя события — это важный аспект работы с веб-приложениями, так как позволяет реагировать на действия пользователя, такие как клики, ввод текста, прокрутка и другие. В современных фреймворках и библиотеке JavaScript есть несколько способов добавить слушатели событий. Почему это нужно? Слушатели событий позволяют интерактивно реагировать на действия пользователей, делая приложения динамичными и отзывчивыми. Например, при клике на кнопку можно вызвать определенную функцию, при вводе текста в поле — обновить состояние и так далее. Как это используется? Рассмотрим три основных подхода к добавлению слушателей событий: в чистом JavaScript, в React и с использованием jQuery. 1️⃣Чистый JavaScript Для добавления слушателя события используется метод addEventListener. Пример:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Event Listener Example</title>
</head>
<body>
  <button id="myButton">Click me</button>

  <script>
    const button = document.getElementById('myButton');
    
    button.addEventListener('click', () => {
      alert('Button was clicked!');
    });
  </script>
</body>
</html>

В этом примере мы получаем элемент кнопки по её id и добавляем слушатель события click, который вызывает функцию, отображающую сообщение. 2️⃣React Обработчики событий добавляются непосредственно к JSX-элементам с использованием специальных атрибутов, таких как onClick, onChange и т.д. Пример:

import React from 'react';

function App() {
  const handleClick = () => {
    alert('Button was clicked!');
  };

  return (
    <div>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}

export default App;

В этом примере мы определяем функцию handleClick и передаем её в атрибут onClick кнопки. Когда пользователь нажимает на кнопку, вызывается функция handleClick. 3️⃣jQuery Если вы используете его, добавление слушателей событий также очень просто и удобно. Пример:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Event Listener Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <button id="myButton">Click me</button>

  <script>
    $(document).ready(function() {
      $('#myButton').on('click', function() {
        alert('Button was clicked!');
      });
    });
  </script>
</body>
</html>

В этом примере мы используем jQuery для добавления обработчика события click к кнопке. Почему это удобно и важно: ✅Интерактивность: Позволяет создавать динамичные и отзывчивые интерфейсы. ✅Гибкость: Возможность реагировать на различные действия пользователей. ✅Удобство: В каждом подходе (чистый JavaScript, React, jQuery) есть свои удобства и особенности, которые помогают решать задачи более эффективно. Добавление слушателя события позволяет реагировать на действия пользователя и делает приложения интерактивными. В зависимости от технологии (чистый JavaScript, React или jQuery) процесс добавления слушателя может немного отличаться, но цель остается той же — улучшить взаимодействие пользователя с приложением. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент 🔐 База собесов | 🔐 База тестовых

6.4k20331

Аналитика

Frontend | Вопросы собесов

17 296

Ad

📌 Составили список лучших каналов от действующих разработчиков: Frontend Developer — советы и практики от действующего Senior-разработчика Python Developer — готовый код и полезные ресурсы для любого питониста Java Developer — секреты и тонкости программирования на Java

3.4k42

Аналитика

Frontend | Вопросы собесов

17 296

Как изменяется контекст this в JavaScript при использовании стрелочной функции вместо обычной функции?

Anonymous voting

6.6k14214

Аналитика

Frontend | Вопросы собесов

17 296

Ad

Хватит терять время на уже готовый код! Frontend Trends — библиотека фронтендера, где собраны готовые CodePen решения для ежедневных задач. Эффекты при наведении, 3D-анимации, готовые карточки и др. Зашли – сохранили – применили в своём проекте. Пользуйтесь: @trends_frontend

3.7k2012

Аналитика

Frontend | Вопросы собесов

17 296

Как отрисовать компоненты на основе массива ? Спросят с вероятностью 7% В современных фреймворках, таких как React, отрисовка компонентов на основе массива данных — это стандартная задача. Она позволяет динамически создавать элементы интерфейса на основе данных, что делает код более гибким и адаптируемым к изменениям. Почему это нужно? Отрисовка компонентов на основе массива данных позволяет: ✅Динамически создавать и отображать элементы интерфейса. ✅Управлять отображением элементов на основе данных (например, список задач, карточки пользователей и т.д.). ✅Избегать дублирования кода, создавая компоненты в цикле. Как это используется? Для этого обычно используется метод массива .map(), который перебирает массив данных и возвращает новый массив с JSX-элементами. Пример: 1️⃣Подготовка данных: Предположим, у нас есть массив объектов с данными пользователей:

const users = [
  { id: 1, name: 'Иван', age: 30 },
  { id: 2, name: 'Мария', age: 25 },
  { id: 3, name: 'Петр', age: 40 },
];

2️⃣Создание компонента для отрисовки каждого пользователя: Создадим компонент User, который принимает данные пользователя через props:

function User({ name, age }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>Возраст: {age}</p>
    </div>
  );
}

3️⃣Отрисовка списка пользователей: Используем метод .map() для создания списка компонентов User на основе массива users:

function UserList({ users }) {
  return (
    <div>
      {users.map(user => (
        <User key={user.id} name={user.name} age={user.age} />
      ))}
    </div>
  );
}

Здесь важно использовать уникальный key для каждого элемента списка, чтобы React мог оптимально управлять рендерингом этих элементов. 4️⃣Использование в основном компоненте: Наконец, используем компонент UserList в основном компоненте приложения:

function App() {
  return (
    <div>
      <h1>Список пользователей</h1>
      <UserList users={users} />
    </div>
  );
}

export default App;

Почему это удобно и важно: ✅Динамичность: Мы можем легко изменить массив users, и наш интерфейс автоматически обновится. ✅Читаемость: Код становится более структурированным и легче поддерживается. ✅Оптимизация: Использование ключей позволяет React эффективно обновлять элементы, минимизируя количество изменений в DOM. Отрисовка компонентов на основе массива данных позволяет динамически создавать элементы интерфейса и улучшает читаемость и поддержку кода. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент 🔐 База собесов | 🔐 База тестовых

6.7k293613

Аналитика

Frontend | Вопросы собесов

17 296

Ad

Все надоело и пропал интерес, чувствуешь себя амебой и хочется только залипать в телефоне. Бывает? Психолог взрослого человека - канал для айтишников, у которых периодически опускаются руки и отключается мозг, ибо переработки и постоянная тревожность не приводят к другим исходам. ▪️ Как научиться отвлекаться от работы и отдыхать? ▪️ Как совместить кучу рабочих задач и время с семьей? ▪️ Как справиться с прокрастинацией? ▪️ Как не растерять запал, даже если начальник и коллеги 💩 и кажется, что ничего не выходит? Подписывайтесь на канал @vadimpetrov_psy и научитесь работать без упахивания, выгорания и ущерба для личной жизни! 👨🏻‍💻 Псс. Заходите в закреп канала - там много полезного.

3.9k37

Аналитика

Frontend | Вопросы собесов

17 296

В JavaScript, что происходит, если метод или свойство не найдено в объекте, но есть в его прототипе?

Anonymous voting

6.7k6238

Аналитика

Frontend | Вопросы собесов

17 296

Что такое интерполяция ? Спросят с вероятностью 7% Интерполяция — это метод вставки значений или выражений в строки. Она позволяет динамически встраивать переменные и выражения в текстовые строки, делая их более гибкими и удобными для использования. Например, интерполяция достигается с помощью шаблонных строк. Почему это нужно? Упрощает работу с текстом, который должен включать значения переменных или результаты вычислений. Без интерполяции, программистам пришлось бы вручную конкатенировать строки и переменные, что делает код менее читаемым и более сложным в поддержке. Как это используется? Для примера возьмём JavaScript и его шаблонные строки. Шаблонные строки заключаются в обратные кавычки (``) и позволяют включать выражения внутри них с помощью конструкции ${}. Пример кода:

const name = 'Иван';
const age = 30;
const greeting = `Привет, меня зовут ${name} и мне ${age} лет.`;

console.log(greeting); // Вывод: Привет, меня зовут Иван и мне 30 лет.

В данном примере переменные name и age интерполируются в строку greeting. Как это работает и почему это удобно? ✅Читаемость: Шаблонные строки делают код более читабельным и понятным, так как видна вся строка целиком, без необходимости объединения отдельных частей. ✅Удобство: Позволяет легко включать значения переменных и результаты выражений в строку. ✅Избежание ошибок: Снижает вероятность ошибок, которые могут возникнуть при ручной конкатенации строк. Шаблонные строки также поддерживают выполнение выражений внутри интерполяции:

const a = 5;
const b = 10;
const result = Сумма ${a} и ${b} равна ${a + b}.;

console.log(result); // Вывод: Сумма 5 и 10 равна 15.

Интерполяция — это метод вставки значений и выражений в строки, который улучшает читаемость и удобство работы с текстом в коде. Например, это делается с помощью шаблонных строк и конструкции ${}. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент 🔐 База собесов | 🔐 База тестовых

7.2k32335

Аналитика

Frontend | Вопросы собесов

17 296

Какой метод массива в JavaScript немедленно прерывает выполнение текущей операции и возвращает значение?

Anonymous voting

6.9k7438

Аналитика

Frontend | Вопросы собесов

17 296

Что делает $emit ? Спросят с вероятностью 7% $emit — это метод, используемый для отправки событий из дочернего компонента в родительский компонент. Он позволяет дочернему компоненту уведомлять родительский компонент о том, что что-то произошло, передавая вместе с этим событием любые необходимые данные. Как его использовать 1️⃣В дочернем компоненте: ✅Используйте метод $emit, чтобы отправить событие. ✅Передайте имя события и любые данные, которые нужно передать родительскому компоненту. 2️⃣В родительском компоненте: ✅Слушайте это событие, используя директиву v-on или её сокращение @. ✅Обработайте событие в методе родительского компонента. Дочерний компонент (ChildComponent.vue)

<template>
  <button @click="notifyParent">Нажми меня</button>
</template>

<script>
export default {
  methods: {
    notifyParent() {
      this.$emit('childClicked', 'Данные от дочернего компонента');
    }
  }
}
</script>

Родительский компонент (ParentComponent.vue)

<template>
  <div>
    <h1>Родительский компонент</h1>
    <child-component @childClicked="handleChildClick"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleChildClick(message) {
      console.log('Событие от дочернего компонента:', message);
    }
  }
}
</script>

Пояснение 1️⃣В дочернем компоненте `ChildComponent`: ✅Мы создали кнопку и добавили к ней обработчик события @click, который вызывает метод notifyParent. ✅Метод notifyParent использует $emit для отправки события childClicked и передает строку 'Данные от дочернего компонента' в качестве данных. 2️⃣В родительском компоненте ParentComponent: ✅Мы добавили дочерний компонент <child-component> в шаблон и прослушиваем событие childClicked с помощью директивы @childClicked. ✅Когда событие childClicked происходит, вызывается метод handleChildClick, который принимает данные, переданные дочерним компонентом, и выводит их в консоль. Почему это важно? ✅Коммуникация между компонентами: $emit позволяет организовать эффективную коммуникацию между компонентами, передавая данные и уведомления от дочернего компонента к родительскому. ✅Разделение обязанностей: С помощью событий можно поддерживать чистую и разделенную архитектуру, где каждый компонент отвечает только за свои задачи и уведомляет другие компоненты о произошедших изменениях через события. ✅Масштабируемость и поддерживаемость: Использование событий делает приложение более масштабируемым и поддерживаемым, так как компоненты остаются независимыми и могут повторно использоваться в разных частях приложения. $emit используется для отправки событий из дочернего компонента в родительский, позволяя передавать данные и уведомления о произошедших изменениях. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент 🔐 База собесов | 🔐 База тестовых

7.4k26224

Аналитика

Frontend | Вопросы собесов

17 296

В чем заключается основное отличие между объявлениями переменных let и const в JavaScript?

Anonymous voting

7.0k125527

Аналитика

Больше