Справочник · JavaScript

Метод slice(): часть массива без изменений

Редакция PraktumОбновлено 25 октября 20265 мин чтенияУровень: новичок

Метод slice(start, end) возвращает новый массив с элементами от индекса start до end, не включая end. Исходный массив не меняется. Отрицательные индексы считаются с конца, поэтому arr.slice(-3) — три последних элемента, а arr.slice() без аргументов — поверхностная копия массива.

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

const tasks = ['купить хлеб', 'позвонить', 'сделать ДЗ', 'погулять', 'прочитать'];

tasks.slice(0, 3);   // ['купить хлеб', 'позвонить', 'сделать ДЗ']
tasks.slice(-2);     // ['погулять', 'прочитать']
tasks.length;        // 5 — исходный массив не изменился

Первые три задачи для превью и две последние — без изменения исходного списка.

Аргументы start и end

Удобно помнить: длина результата равна end - start для неотрицательных индексов внутри массива. Индексы за пределами не вызывают ошибку, они просто обрезаются по границам.

Копия массива

const original = [3, 1, 2];
const sorted = original.slice().sort((a, b) => a - b);

original; // [3, 1, 2] — не тронут
sorted;   // [1, 2, 3]

// современные альтернативы
const copy = [...original];
const sorted2 = original.toSorted((a, b) => a - b);

sort и reverse меняют исходный массив, поэтому перед ними часто делают копию через slice или spread. Новые методы toSorted и toReversed сразу возвращают копию.

Поверхностная копия

const users = [{ name: 'Аня' }, { name: 'Боря' }];
const copy = users.slice();

copy[0].name = 'Вика';
users[0].name; // 'Вика' — объект общий

slice копирует сам массив, но объекты внутри остаются теми же. Для глубокой копии используй structuredClone(users).

Пагинация и «показать ещё»

const PAGE_SIZE = 10;

function getPage(items, page) {
  const start = (page - 1) * PAGE_SIZE;
  return items.slice(start, start + PAGE_SIZE);
}

getPage(products, 1); // товары 0–9
getPage(products, 3); // товары 20–29

Классический приём для пагинации на клиенте и кнопки «Показать ещё»: items.slice(0, shown), где shown растёт на шаг при каждом клике.

slice у строк

'praktum.ru'.slice(0, 7);  // 'praktum'
'report.pdf'.slice(-3);    // 'pdf'

У строк есть свой метод slice с той же логикой индексов. Он тоже возвращает новую строку. Подробнее — на странице slice для строк.

Один последний элемент: at()

const arr = [10, 20, 30];
arr.slice(-1);  // [30] — массив
arr.at(-1);     // 30 — элемент

slice всегда возвращает массив. Если нужен один элемент с конца, используй at(-1).

slice или splice

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

• Ждут, что элемент с индексом end попадёт в результат.
• Путают slice и splice и случайно меняют исходный массив.
• Передают вторым аргументом количество элементов, как в splice.
• Считают slice глубокой копией массива объектов.
• Используют slice(-1), когда нужен элемент, а не массив, — для этого at(-1).

Доступность

Если показываешь часть списка через slice и кнопку «Показать ещё», переноси фокус на первый новый элемент или объявляй количество через aria-live, чтобы пользователи клавиатуры и скринридеров поняли, что список вырос.

Поддержка браузерами

slice поддерживается всеми браузерами. at, toSorted и structuredClone — во всех актуальных браузерах.

function preview(list, n) {
  const shown = list.slice(0, n).join(', ');
  const rest = list.length - n;
  return rest > 0 ? `${shown} и ещё ${rest}` : shown;
}

preview(['HTML', 'CSS', 'JS', 'React'], 2); // 'HTML, CSS и ещё 2'