JS array: массивы в JavaScript простыми примерами

Array в JavaScript — это массив: список значений в определенном порядке. В массиве можно хранить строки, числа, объекты и другие значения. К элементам обращаются по индексу, а индексы начинаются с нуля

Минимальный пример:

const fruits = ["apple", "banana", "orange"];

console.log(fruits[0]); // apple
console.log(fruits[1]); // banana
console.log(fruits.length); // 3

Если пользователь ищет js array, ему обычно нужно понять базу: как создать массив, как достать элемент, как добавить новый и как пройти по списку

Как создать массив

Самый простой способ — квадратные скобки:

const numbers = [10, 20, 30];
const names = ["Анна", "Илья", "Мария"];
const empty = [];

Можно хранить разные типы:

const mixed = ["text", 42, true];

Но в реальном коде лучше не смешивать все подряд без причины. Массив легче читать, когда в нем однотипные данные: список товаров, список имен, список чисел

Индексы начинаются с нуля

const colors = ["red", "green", "blue"];

console.log(colors[0]); // red
console.log(colors[2]); // blue

Последний элемент имеет индекс length - 1:

const last = colors[colors.length - 1];
console.log(last); // blue

Это частая ловушка: если в массиве 3 элемента, последнего индекса 3 нет

Как добавить элемент

Метод push добавляет элемент в конец:

const tasks = ["Купить хлеб", "Ответить на письмо"];

tasks.push("Выучить массивы");

console.log(tasks);

Результат:

["Купить хлеб", "Ответить на письмо", "Выучить массивы"]

Как пройти по массиву

Для простого вывода удобен for...of:

const users = ["Anna", "Oleg", "Max"];

for (const user of users) {
  console.log(user);
}

Если нужен индекс, используйте обычный цикл:

for (let i = 0; i < users.length; i++) {
  console.log(i, users[i]);
}

Практический пример: список на странице

<ul id="list"></ul>

<script>
  const skills = ["HTML", "CSS", "JavaScript"];
  const list = document.querySelector("#list");

  for (const skill of skills) {
    const item = document.createElement("li");
    item.textContent = skill;
    list.append(item);
  }
</script>

Этот пример показывает, зачем массив нужен в веб-разработке: данные хранятся списком, а JavaScript выводит их на страницу

map, filter и find

Когда база понятна, переходите к методам массивов:

const prices = [100, 200, 300];
const withTax = prices.map((price) => price * 1.2);

console.log(withTax);

map создает новый массив. filter оставляет подходящие элементы. find ищет первый подходящий элемент. Но не начинайте с них, если еще путаетесь в индексах и length

Пример: найти задачу в массиве объектов

В реальных проектах массив часто хранит не строки, а объекты:

const tasks = [
  { id: 1, title: "Верстка", done: true },
  { id: 2, title: "JavaScript", done: false },
  { id: 3, title: "Публикация", done: false }
];

const activeTasks = tasks.filter((task) => !task.done);
const secondTask = tasks.find((task) => task.id === 2);

console.log(activeTasks);
console.log(secondTask.title);

Такой формат встречается в списках дел, корзинах интернет-магазина, таблицах заказов и ответах API. Если вы понимаете массивы объектов, дальше легче читать JSON и результаты fetch

Частые ошибки

Обращаться к несуществующему индексу

const items = ["a", "b"];
console.log(items[2]); // undefined

Это не авария, но сигнал: такого элемента нет

Путать массив и объект

Массив:

["red", "green"]

Объект:

{ color: "red", size: "M" }

Массив хорош для списка, объект — для описания одной сущности

Ждать, что push вернет новый массив

push меняет существующий массив и возвращает новую длину, а не массив

Мини-задание

Создайте массив из трех дел. Добавьте четвертое через push, выведите все дела через for...of, а затем выведите количество дел через length

Что почитать дальше по JavaScript

Если нужен общий маршрут по теме, откройте рубрику JavaScript. Для соседних задач пригодятся эти разборы:

• Переменные в JS: let, const и var простыми примерами
• Java и JavaScript: в чем разница простыми словами
• JavaScript на Android: что это такое простыми словами
• Как устроен JavaScript: движок, стек, DOM и event loop простыми словами