Лента Instagram — массив постов. История чата в Telegram — массив сообщений. Список треков в плейлисте Spotify — массив. Практически любые данные "много чего одного типа" хранятся в массивах.
Массивы хранят данные как переменные, у элементов есть типы. Для перебора элементов используются циклы, а для обработки — функции.
Без массивов для хранения 100 сообщений нужно 100 переменных: msg1, msg2, ..., msg100. Массив — это один контейнер для любого количества однотипных данных.
const messages = ['Привет!', 'Как дела?', 'Окей']
// Индексация с НУЛЯ
console.log(messages[0]) // 'Привет!'
console.log(messages[2]) // 'Окей'
console.log(messages.length) // 3
// Последний элемент
console.log(messages[messages.length - 1]) // 'Окей'
// Или современный способ:
console.log(messages.at(-1)) // 'Окей'| Метод | Действие | Возвращает |
|-------|----------|------------|
| push(x) | Добавить в конец | новую длину |
| pop() | Удалить последний | удалённый элемент |
| unshift(x) | Добавить в начало | новую длину |
| shift() | Удалить первый | удалённый элемент |
| splice(i, n) | Удалить n элементов начиная с i | массив удалённых |
const tags = ['javascript', 'react', 'node']
tags.includes('react') // true
tags.indexOf('node') // 2 (индекс)
tags.indexOf('vue') // -1 (не найден)
tags.find(t => t.length > 4) // 'javascript'Эти три метода используются в каждом реальном проекте:
const prices = [1000, 2500, 500, 3000]
// map — создаёт НОВЫЙ массив, трансформируя каждый элемент
const withTax = prices.map(p => p * 1.2) // [1200, 3000, 600, 3600]
// filter — создаёт НОВЫЙ массив только с подходящими элементами
const expensive = prices.filter(p => p > 1000) // [2500, 3000]
// find — возвращает ПЕРВЫЙ подходящий элемент (или undefined)
const cheap = prices.find(p => p < 1000) // 500Ключевое: map и filter не изменяют исходный массив — они возвращают новый.
Ошибка 1: Индекс начинается с 1 (а не с 0)
const users = ['Алексей', 'Мария', 'Иван']
console.log(users[1]) // 'Мария' — не первый пользователь!
console.log(users[0]) // 'Алексей' — вот первыйОшибка 2: Забыть что map/filter возвращают новый массив
const numbers = [1, 2, 3, 4, 5]
numbers.filter(n => n > 2) // Ошибка: результат выброшен!
const filtered = numbers.filter(n => n > 2) // Правильно: сохраняем
console.log(numbers) // [1, 2, 3, 4, 5] — исходный не изменился
console.log(filtered) // [3, 4, 5]Ошибка 3: Проверить наличие элемента через indexOf
if (arr.indexOf('item')) // 0 — это falsy! Не работает для первого элемента
if (arr.indexOf('item') !== -1) // Правильно
if (arr.includes('item')) // Лучше! ЧитаемееМассивы с map, filter, find — основа работы с данными из API. Когда сервер возвращает список продуктов, ты фильтруешь по категории, трансформируешь через map для отображения, ищешь конкретный товар через find.
Управление корзиной покупок и каталогом товаров
const products = [
{ id: 1, name: 'Ноутбук', price: 75000, category: 'tech', inStock: true },
{ id: 2, name: 'Мышь', price: 1500, category: 'tech', inStock: false },
{ id: 3, name: 'Монитор', price: 25000, category: 'tech', inStock: true },
{ id: 4, name: 'Стол', price: 12000, category: 'furniture', inStock: true },
]
// Только товары в наличии
const available = products.filter(p => p.inStock)
console.log('В наличии:', available.length) // 3
// Список названий для отображения в каталоге
const names = products.map(p => p.name)
console.log(names) // ['Ноутбук', 'Мышь', 'Монитор', 'Стол']
// Найти товар по ID (как при клике "в корзину")
const laptop = products.find(p => p.id === 1)
console.log('Нашли:', laptop.name, laptop.price) // Нашли: Ноутбук 75000
// Цены со скидкой 15% (не изменяем оригинал!)
const discounted = products.map(p => ({
...p,
price: Math.round(p.price * 0.85),
oldPrice: p.price,
}))
console.log(discounted[0].price, discounted[0].oldPrice) // 63750 75000
console.log('Оригинал цела:', products[0].price) // 75000Лента Instagram — массив постов. История чата в Telegram — массив сообщений. Список треков в плейлисте Spotify — массив. Практически любые данные "много чего одного типа" хранятся в массивах.
Массивы хранят данные как переменные, у элементов есть типы. Для перебора элементов используются циклы, а для обработки — функции.
Без массивов для хранения 100 сообщений нужно 100 переменных: msg1, msg2, ..., msg100. Массив — это один контейнер для любого количества однотипных данных.
const messages = ['Привет!', 'Как дела?', 'Окей']
// Индексация с НУЛЯ
console.log(messages[0]) // 'Привет!'
console.log(messages[2]) // 'Окей'
console.log(messages.length) // 3
// Последний элемент
console.log(messages[messages.length - 1]) // 'Окей'
// Или современный способ:
console.log(messages.at(-1)) // 'Окей'| Метод | Действие | Возвращает |
|-------|----------|------------|
| push(x) | Добавить в конец | новую длину |
| pop() | Удалить последний | удалённый элемент |
| unshift(x) | Добавить в начало | новую длину |
| shift() | Удалить первый | удалённый элемент |
| splice(i, n) | Удалить n элементов начиная с i | массив удалённых |
const tags = ['javascript', 'react', 'node']
tags.includes('react') // true
tags.indexOf('node') // 2 (индекс)
tags.indexOf('vue') // -1 (не найден)
tags.find(t => t.length > 4) // 'javascript'Эти три метода используются в каждом реальном проекте:
const prices = [1000, 2500, 500, 3000]
// map — создаёт НОВЫЙ массив, трансформируя каждый элемент
const withTax = prices.map(p => p * 1.2) // [1200, 3000, 600, 3600]
// filter — создаёт НОВЫЙ массив только с подходящими элементами
const expensive = prices.filter(p => p > 1000) // [2500, 3000]
// find — возвращает ПЕРВЫЙ подходящий элемент (или undefined)
const cheap = prices.find(p => p < 1000) // 500Ключевое: map и filter не изменяют исходный массив — они возвращают новый.
Ошибка 1: Индекс начинается с 1 (а не с 0)
const users = ['Алексей', 'Мария', 'Иван']
console.log(users[1]) // 'Мария' — не первый пользователь!
console.log(users[0]) // 'Алексей' — вот первыйОшибка 2: Забыть что map/filter возвращают новый массив
const numbers = [1, 2, 3, 4, 5]
numbers.filter(n => n > 2) // Ошибка: результат выброшен!
const filtered = numbers.filter(n => n > 2) // Правильно: сохраняем
console.log(numbers) // [1, 2, 3, 4, 5] — исходный не изменился
console.log(filtered) // [3, 4, 5]Ошибка 3: Проверить наличие элемента через indexOf
if (arr.indexOf('item')) // 0 — это falsy! Не работает для первого элемента
if (arr.indexOf('item') !== -1) // Правильно
if (arr.includes('item')) // Лучше! ЧитаемееМассивы с map, filter, find — основа работы с данными из API. Когда сервер возвращает список продуктов, ты фильтруешь по категории, трансформируешь через map для отображения, ищешь конкретный товар через find.
Управление корзиной покупок и каталогом товаров
const products = [
{ id: 1, name: 'Ноутбук', price: 75000, category: 'tech', inStock: true },
{ id: 2, name: 'Мышь', price: 1500, category: 'tech', inStock: false },
{ id: 3, name: 'Монитор', price: 25000, category: 'tech', inStock: true },
{ id: 4, name: 'Стол', price: 12000, category: 'furniture', inStock: true },
]
// Только товары в наличии
const available = products.filter(p => p.inStock)
console.log('В наличии:', available.length) // 3
// Список названий для отображения в каталоге
const names = products.map(p => p.name)
console.log(names) // ['Ноутбук', 'Мышь', 'Монитор', 'Стол']
// Найти товар по ID (как при клике "в корзину")
const laptop = products.find(p => p.id === 1)
console.log('Нашли:', laptop.name, laptop.price) // Нашли: Ноутбук 75000
// Цены со скидкой 15% (не изменяем оригинал!)
const discounted = products.map(p => ({
...p,
price: Math.round(p.price * 0.85),
oldPrice: p.price,
}))
console.log(discounted[0].price, discounted[0].oldPrice) // 63750 75000
console.log('Оригинал цела:', products[0].price) // 75000Ты работаешь над системой оценивания курса. Есть массив студентов с оценками. Используй filter чтобы найти тех кто сдал экзамен (score >= 60), затем map чтобы получить только их имена.
passed = students.filter(s => s.score >= 60), затем names = passed.map(s => s.name)