Методы изменения структуры массива

Методы изменения структуры массива

Технический фундамент структурных операций

В этом уроке методы делятся на две группы:

  • не мутируют (slice, concat, join);
  • мутируют (splice, reverse).
const src = [1, 2, 3];
const copyPart = src.slice(0, 2);
src.reverse();

console.log(copyPart); // [1, 2]
console.log(src); // [3, 2, 1]

Ключевой момент: понимание мутации определяет, будет ли безопасно переиспользовать исходный массив дальше.

Вырезать часть без мутации: slice

slice(start, end) возвращает новый массив с частью элементов.

const items = ['a', 'b', 'c', 'd'];

console.log(items.slice(1, 3)); // ['b', 'c']
console.log(items); // ['a', 'b', 'c', 'd']

Ключевой момент: slice не меняет исходный массив.

Смотри, что важно:

  • второй аргумент end не включается;
  • slice() без аргументов часто используют как простой способ сделать поверхностную копию массива.
const nums = [1, 2, 3];
const clone = nums.slice();
console.log(clone); // [1, 2, 3]

Изменить на месте: splice

splice удаляет/вставляет элементы и мутирует исходный массив.

const items2 = ['a', 'b', 'c', 'd'];
items2.splice(1, 2, 'x');

console.log(items2); // ['a', 'x', 'd']

Здесь часто путаются с slice, потому что названия похожи.

Склейка массивов: concat

concat объединяет массивы в новый.

const base = ['js', 'ts'];
const extra = ['react', 'node'];

const stack = base.concat(extra);
console.log(stack); // ['js', 'ts', 'react', 'node']

Разворот порядка: reverse

reverse() меняет порядок элементов и мутирует массив.

const queue = [1, 2, 3];
queue.reverse();

console.log(queue); // [3, 2, 1]

Проверь себя: как получить развернутую версию, но не менять оригинал?

Подсказка:

const reversed = [...queue].reverse();

В современных окружениях еще есть toReversed(), который сразу возвращает новый массив без мутации:

const reversed2 = queue.toReversed();

Преобразование в строку: join

join(separator) объединяет элементы массива в строку.

const tags = ['js', 'arrays', 'basics'];

console.log(tags.join(', ')); // js, arrays, basics
console.log(tags.join(' | ')); // js | arrays | basics

Смотри, что важно: join приводит элементы к строке. Для null и undefined он подставляет пустую строку:

console.log([1, null, undefined, 4].join('-')); // 1---4

Микро-сценарии

  1. Пагинация: взять часть элементов для страницы.
const pageItems = allItems.slice(offset, offset + limit);
  1. Формирование строки тегов для UI.
const label = tags.join(' • ');

Типичные ошибки

  • Путать slice и splice.
  • Не учитывать мутацию у reverse.
  • Ожидать, что concat меняет исходный массив.
  • Выбирать неверные границы start/end.

Краткий итог

  • slice берет часть массива без мутации.
  • splice меняет массив на месте.
  • concat объединяет массивы в новый.
  • reverse разворачивает порядок и мутирует исходный массив.
  • join превращает массив в строку с выбранным разделителем.