JavaScript

Как создать массив в JavaScript и что значит $props

Чтобы создать массив в JavaScript, используйте квадратные скобки: const items = []. Если в запросе встречается $props, важно разделить две вещи: массив — это обычная структура JavaScript, а $props — не синтаксис ванильного JavaScript, а конструкция из фреймворка Svelte. В React, Svelte и других фреймворках массив все равно создается обычным способом

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

const numbers = [1, 2, 3];
const empty = [];

empty.push("JavaScript");

console.log(numbers[0]); // 1
console.log(empty);      // ["JavaScript"]

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

Массив нужен, когда у вас есть список значений: товары, задачи, имена, карточки, пункты меню

const tasks = ["Написать HTML", "Подключить CSS", "Добавить JS"];

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

console.log(tasks[0]); // Написать HTML
console.log(tasks[2]); // Добавить JS

Количество элементов хранится в length:

console.log(tasks.length); // 3

Массив объектов

В интерфейсах чаще нужен не просто массив строк, а массив объектов:

const products = [
  { id: 1, title: "Курс JavaScript", price: 3000 },
  { id: 2, title: "Практикум DOM", price: 1500 }
];

Такой массив удобно выводить на страницу:

for (const product of products) {
  console.log(product.title, product.price);
}

Что делать с props

props — это данные, которые компонент получает снаружи. В React это может выглядеть так:

function ProductList({ products }) {
  return products.map((product) => product.title);
}

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

const products = [
  { id: 1, title: "HTML" },
  { id: 2, title: "JavaScript" }
];

Если вы увидели $props

В Svelte 5 $props() используется для получения свойств компонента. Например:

<script>
  let { items = [] } = $props();
</script>

{#each items as item}
  <p>{item.title}</p>
{/each}

Здесь items = [] — обычный массив по умолчанию. $props() только получает данные из компонента-родителя. Сам массив создается через те же квадратные скобки

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

Если вы работаете с обычным массивом:

const items = [];

items.push("Первый элемент");
items.push("Второй элемент");

console.log(items);

Если массив хранится в состоянии фреймворка, прямой push может быть плохой идеей. Часто безопаснее создать новый массив:

const nextItems = [...items, "Новый элемент"];

Такой подход особенно важен в React и похожих системах, где обновление интерфейса зависит от изменения ссылки на массив

Как вывести массив на странице

Если массив нужен не только для Console, а для HTML, используйте цикл и DOM:

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

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

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

Этот пример полезен для понимания props: родительский компонент может передать массив, а дочерний компонент или обычный скрипт уже решает, как этот массив вывести. Данные и отображение лучше держать отдельно

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

Думать, что $props создает массив

Нет. $props() получает входные данные компонента. Массив создается через [], приходит снаружи или задается как значение по умолчанию

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

Массив:

const list = ["a", "b"];

Объект:

const user = { name: "Anna" };

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

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

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

Создайте массив lessons из трех объектов с полями id и title. Выведите названия через for...of, затем добавьте четвертый урок через push. Если вы работаете во фреймворке, сделайте второй вариант через spread: const nextLessons = [...lessons, newLesson]

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

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

0 комментариев

Старые

Новые Популярные