Это структура данных, которая представляет собой упорядоченный список элементов. В JavaScript массивы могут содержать любые типы данных: числа, строки, объекты, другие массивы и даже функции.
Массивы помогают удобно хранить и обрабатывать наборы данных. Вместо того чтобы создавать множество переменных, можно использовать массив, чтобы хранить сразу несколько значений и работать с ними с помощью специальных методов.
Массивы позволяют:
Хранить несколько значений в одной переменной
Перебирать элементы с помощью циклов
Добавлять, удалять, изменять элементы
Выполнять операции, например, сортировку и фильтрацию
В JavaScript массив можно создать разными способами:
С использованием литерала массива
let fruits = ["яблоко", "банан", "апельсин"];
С использованием конструктора
Array let numbers = new Array(1, 2, 3, 4, 5);
Доступ к элементу массива осуществляется по индексу (начинается с 0):
let fruits = ["яблоко", "банан", "апельсин"];
console.log(fruits[0]); // "яблоко"
console.log(fruits[1]); // "банан"
Добавление элемента в конец
push() let arr = [1, 2, 3];
arr.push(4);
console.log(arr); // [1, 2, 3, 4]
Удаление последнего элемента
pop() arr.pop();
console.log(arr); // [1, 2, 3]
Добавление элемента в начало
unshift() arr.unshift(0);
console.log(arr); // [0, 1, 2, 3]
Удаление первого элемента
shift() arr.shift();
console.log(arr); // [1, 2, 3]
Перебор массива
forEach() arr.forEach(item => console.log(item));
Фильтрация элементов
filter() let evenNumbers = arr.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2]
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍12
Телепорт позволяет отрисовать элемент не внутри текущего компонента, а в другом месте DOM. Например, ты можешь открыть модальное окно или dropdown не внутри своей вложенной структуры, а сразу в body. Это решает проблемы с позиционированием и z-index — особенно для всплывающих элементов, которые не должны быть ограничены стилями родителя.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7🔥6
Чтобы увеличить элемент в размере при наведении, не сдвигая при этом соседние элементы, можно использовать CSS свойство
transform с функцией scale. Это позволяет изменять размер элемента, не влияя на его положение и соседние элементы, так как трансформация происходит в контексте самого элемента и не меняет его фактические размеры в документе.<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Увеличение при наведении</title>
<style>
.container {
display: flex;
gap: 10px;
}
.item {
width: 100px;
height: 100px;
background-color: lightblue;
text-align: center;
line-height: 100px;
transition: transform 0.3s;
}
.item:hover {
transform: scale(1.2); /* Увеличение размера при наведении */
}
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</body>
</html>
Увеличение элементов при наведении может служить для привлечения внимания пользователя или для улучшения взаимодействия, например, при работе с интерактивными элементами.
Применение трансформации с
transform: scale позволяет изменять размер элемента без изменения его фактического размера и расположения в документе, что сохраняет стабильность макета и не нарушает расположение соседних элементов.Использование
transition делает анимацию плавной и приятной для глаз, улучшая общее восприятие интерфейса.Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍11
Сравнение объектов и массивов происходит по ссылке, а не по содержимому. Даже два идентичных массива/объекта считаются разными, если созданы отдельно.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍17💊1
В JavaScript есть несколько способов сгенерировать уникальный идентификатор (ID), в зависимости от требований:
UUID (универсально уникальный идентификатор) – это 128-битное число, представленное строкой в формате
xxxxxxxx-xxxx-Mxxx-Nxxx-xxxxxxxxxxxx. Генерация с помощью
crypto.randomUUID() (современный способ) const id = crypto.randomUUID();
console.log(id); // Например: "3d593c8e-7a34-45f7-9a14-2f5f5788d4ec"
Использование библиотеки
uuid import { v4 as uuidv4 } from 'uuid';
const id = uuidv4();
console.log(id); // "f47ac10b-58cc-4372-a567-0e02b2c3d479"Если нужно вычислить уникальный идентификатор на основе входных данных (например, строки или объекта), можно использовать хеш-функции.
SHA-256 через
crypto.subtle async function generateHash(input) {
const encoder = new TextEncoder();
const data = encoder.encode(input);
const hashBuffer = await crypto.subtle.digest('SHA-256', data);
return [...new Uint8Array(hashBuffer)].map(b => b.toString(16).padStart(2, '0')).join('');
}
generateHash("hello").then(console.log);
// Например: "2cf24dba5fb0a30e26e83b2ac5b9e29e1b161e5c1fa7425e73043362938b9824"Если нужна просто случайная строка, можно использовать
Math.random(). Базовая генерация ID
const id = Math.random().toString(36).substring(2, 10);
console.log(id); // Например: "5g7f8a1z"
Более безопасный вариант с
crypto.getRandomValues()function generateRandomId(length = 16) {
const array = new Uint8Array(length);
crypto.getRandomValues(array);
return [...array].map(b => b.toString(16).padStart(2, '0')).join('');
}
console.log(generateRandomId(8)); // Например: "a3f9b8c7"Если нужно просто увеличивающееся число (например, ID для записей в массиве), можно использовать счётчик
let counter = 0;
function generateIncrementalId() {
return ++counter;
}
console.log(generateIncrementalId()); // 1
console.log(generateIncrementalId()); // 2
console.log(generateIncrementalId()); // 3
Можно создать ID, основываясь на JSON-объекте.
function hashObject(obj) {
return JSON.stringify(obj)
.split("")
.reduce((hash, char) => {
return ((hash << 5) - hash) + char.charCodeAt(0);
}, 0)
.toString(16);
}
console.log(hashObject({ name: "Alice", age: 25 })); // Например: "-3d4e5f"Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3