Please open Telegram to view this post
VIEW IN TELEGRAM
👍3
Метод slice()
Возвращает часть строки между указанными индексами. Отрицательные значения отсчитываются с конца строки.
Метод substring()
Аналогичен
Метод substr() (устаревший)
Принимает начальный индекс и длину подстроки.
Для простых случаев также можно использовать деструктуризацию или регулярные выражения.
Ставь👍 , если было полезно!
Больше ответов на сайте👈
✈️ Frontend собеседования
Возвращает часть строки между указанными индексами. Отрицательные значения отсчитываются с конца строки.
const str = 'Hello, world!';
const subStr = str.slice(0, 5); // 'Hello'
Метод substring()
Аналогичен
slice(), но не поддерживает отрицательные индексы.
const subStr = str.substring(7, 12); // 'world'
Метод substr() (устаревший)
Принимает начальный индекс и длину подстроки.
const subStr = str.substr(7, 5); // 'world'
Для простых случаев также можно использовать деструктуризацию или регулярные выражения.
Ставь
Больше ответов на сайте
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4
Основные возможности:
- Генерация проекта с предустановленными зависимостями (vue create).
- Плагины для добавления Vuex, Router, PWA и других технологий.
- Режим разработки с горячей перезагрузкой (vue serve).
- Оптимизированная сборка для продакшена (vue build).
Преимущества:
- Стандартизированная структура проекта.
- Гибкость через
настройку vue.config.js. - Интеграция с современным фронтенд-стеком (TypeScript, SCSS, Jest).
// vue.config.js
module.exports = {
devServer: { port: 8080 }
};
Упрощает разработку, обеспечивая лучшие практики из коробки.
Ставь
Больше ответов на сайте
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3🔥2
const value: string | number;
// Переменная value может быть строкой или числом
type A = { a: string };
type B = { b: number };
type C = A & B;
// Тип C должен содержать свойства a и bСтавь
Больше ответов на сайте
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4
git show HEAD # Просмотр текущего коммита
HEAD хранится в
.git/HEAD и может ссылаться на другой указатель (например, ref: refs/heads/main) или хэш коммита.Ставь
Больше ответов на сайте
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3
Создание контекста:
const StateContext = React.createContext();
Провайдер с состоянием:
function StateProvider({ children }) {
const [state, setState] = useState(initialState);
return (
<StateContext.Provider value={{ state, setState }}>
{children}
</StateContext.Provider>
);
}
Использование в компоненте:
const { state, setState } = useContext(StateContext);
Для сложного состояния можно использовать useReducer вместо useState. Такой подход заменяет Redux в небольших приложениях.
Ставь
Больше ответов на сайте
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3
Простейший прим
ер — проверка через typeof:
function printId(id: number | string) {
if (typeof id === 'string') {
console.log(id.toUpperCase());
} else {
console.log(id.toFixed(2));
}
}
Пользовательские Type Guards используют предикат типа (is):
function isString(value: unknown): value is string {
return typeof value === 'string';
}
Также работают с
instanceof и проверкой свойств объекта. Type Guards улучшают безопасность типов и помогают избежать ошибок.Ставь
Больше ответов на сайте
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4
Копирование и объединение массивов:
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5]; // [1, 2, 3, 4, 5]
Клонирование и модификация объектов:
const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 }; // { a: 1, b: 2, c: 3 }
Передача элементов массива как аргументов функции:
const nums = [1, 2, 3];
Math.max(...nums); // 3
Работает в любом итерируемом контексте, включая строки и коллекции.
Ставь
Больше ответов на сайте
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4
visibility.
.hidden-element {
visibility: hidden;
}
Элемент остается на странице, занимает место, но становится невидимым. В отличие от
display: none, не удаляется из потока документа. Альтернативный вариант — прозрачность:
.transparent-element {
opacity: 0;
}
Сохраняет кликабельность и взаимодействие, если не отключено pointer-events.
Ставь
Больше ответов на сайте
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4
Добавление файлов в индекс:
git add file.txt
Просмотр состояния индекса:
git status
Индекс позволяет точно контролировать, какие изменения попадут в коммит, включая частичное добавление изменений в файлах.
Ставь
Больше ответов на сайте
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3
<iframe src="page.html" width="300" height="200"></iframe>
Основные отличия:
- iframe работает как встроенный элемент, а фреймы требовали специальной структуры
<frameset> - iframe поддерживает стилизацию через CSS
- iframe безопаснее и современнее устаревших фреймов
Ставь
Больше ответов на сайте
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3
const users: Record<string, number> = {
'id1': 25,
'id2': 30
};
Используется для:
- Описания словарей с единым типом значений
- Создания map-подобных структур
- Гарантирует типобезопасность при динамических ключах
Альтернатива index signatures, но с более явным синтаксисом.
Ставь
Больше ответов на сайте
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4
setup(), где логика группируется по функциональности, а не по типам.
import { ref, computed } from 'vue';
export default {
setup() {
const count = ref(0);
const double = computed(() => count.value * 2);
function increment() {
count.value++;
}
return { count, double, increment };
}
}
Преимущества:
- Гибкая организация кода
- Повторное использование логики через composable-функции
- Лучшая типобезопасность с TypeScript
Ставь
Больше ответов на сайте
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4
vw (viewport width) и vh (viewport height) — относительные единицы, привязанные к размерам окна браузера. 1vw = 1% ширины, 1vh = 1% высоты viewport.
.element {
width: 50vw; /* 50% от ширины окна */
height: 100vh; /* 100% от высоты окна */
}
Применяются для:
- Адаптивных интерфейсов, масштабируемых относительно окна
- Создания полноэкранных секций
- Резиновых элементов без привязки к родительским блокам
Не учитывают скролл-бар, в отличие от
%.Ставь
Больше ответов на сайте
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4
git reflog для поиска последних действий и git checkout или git reset для возврата файлов.
git reflog # Поиск последнего коммита перед удалением
git checkout HEAD@{n} -- path/to/file # Восстановление файла из истории
Если файлы были проиндексированы, но не закоммичены:
git fsck --lost-found # Поиск dangling-объектов
Для восстановления после
git rm используйте git reset HEAD file перед git checkout -- file.Ставь
Больше ответов на сайте
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3
React.lazy и Suspense.
const LazyComponent = React.lazy(() => import('./LazyComponent'));
function App() {
return (
<React.Suspense fallback={<div>Loading...</div>}>
<LazyComponent />
</React.Suspense>
);
}
Основные особенности:
- Уменьшает начальный размер бандла
- Загружает компоненты динамически при необходимости
- Требует обертки в
<Suspense> для отображения fallback-контента Работает только с default-экспортами в компонентах.
Ставь
Больше ответов на сайте
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4