Чем отличаются методы splice и slice?

👨‍💻 Frontend Developer 🟠 Может встретиться 🎚️ Средний
#JavaScript #Массивы #База JS

Краткий ответ

Главное отличие между [splice] и [slice]:

  1. splice — изменяет оригинальный массив и возвращает удалённые элементы ✂️
  2. slice — не меняет оригинал, а возвращает новый массив 🔄
const arr = [1, 2, 3, 4, 5];
 
// splice — изменяет массив
const removed = arr.splice(1, 2); // Удаляет 2 элемента с индекса 1
console.log(arr);     // [1, 4, 5] — массив изменился!
console.log(removed); // [2, 3] — удалённые элементы
 
// slice — не изменяет массив
const part = arr.slice(1, 3); // Берёт элементы с 1 по 3 (не включая 3)
console.log(arr);  // [1, 4, 5] — массив не изменился
console.log(part); // [4, 5] — новая часть

Полный ответ

Представь, что у тебя есть коробка с вещами. [slice] — это как сфотографировать часть коробки, а [splice] — как вынуть вещи из коробки! 📦📸 vs 📦👐

slice — “фотография” части массива

Создаёт копию части массива, не трогая оригинал:

const fruits = ['яблоко', 'банан', 'апельсин', 'груша'];
 
// Копируем элементы с индекса 1 до 3 (не включая 3)
const copy = fruits.slice(1, 3);
console.log(copy);  // ['банан', 'апельсин']
 
// Оригинал не изменился!
console.log(fruits); // ['яблоко', 'банан', 'апельсин', 'груша']
 
// Можно без второго параметра — до конца
const rest = fruits.slice(2); // ['апельсин', 'груша']

splice — “вынимание” элементов

Физически удаляет элементы из массива и возвращает их:

const fruits = ['яблоко', 'банан', 'апельсин', 'груша'];
 
// Удаляем 2 элемента с индекса 1
const removed = fruits.splice(1, 2);
console.log(removed); // ['банан', 'апельсин'] — удалённые элементы
 
// Оригинал изменился!
console.log(fruits); // ['яблоко', 'груша']

Добавление элементов

slice — только копирование

const arr = [1, 2, 3, 4];
const copy = arr.slice(1, 3); // Только копирует, не добавляет
 
// Нельзя добавить элементы через slice!

splice — можно добавить

const arr = [1, 2, 3, 4];
 
// Удаляем 1 элемент с индекса 1 и добавляем новые
arr.splice(1, 1, 'новый', 'элементы');
console.log(arr); // [1, 'новый', 'элементы', 3, 4]

Когда что использовать

slice — для копирования

// ✅ Когда нужно получить часть массива
const numbers = [1, 2, 3, 4, 5];
const middle = numbers.slice(1, 4); // [2, 3, 4]
 
// ✅ Для создания копии всего массива
const copy = numbers.slice(); // [1, 2, 3, 4, 5]

splice — для изменения

// ✅ Когда нужно изменить массив
const items = [1, 2, 3, 4, 5];
items.splice(2, 2); // Удаляем 2 элемента с индекса 2
console.log(items); // [1, 2, 5]

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

Путать методы

const arr = [1, 2, 3, 4];
 
// ❌ Ошибка — думают, что slice изменяет массив
const part = arr.slice(1, 3);
console.log(arr); // [1, 2, 3, 4] — не изменился!
 
// ❌ Ошибка — думают, что splice не изменяет массив
const removed = arr.splice(1, 2);
console.log(arr); // Изменился!

Забыть про возвращаемые значения

const arr = [1, 2, 3, 4];
 
// ❌ Ошибка — не понимают, что возвращается
const result1 = arr.slice(1, 3);  // Возвращает [2, 3]
const result2 = arr.splice(1, 2); // Возвращает [2, 3]
 
// ❌ Ошибка — думают, что splice возвращает новый массив
// На самом деле он возвращает УДАЛЁННЫЕ элементы!

Простые правила

  1. slice — копирует, не меняет оригинал 📸
  2. splice — вынимает, меняет оригинал ✂️
  3. slice(начало, конец) — копирует с начала до конца (не включая) 📋
  4. splice(начало, сколько, что добавить) — удаляет и может добавлять 🔄
  5. slice — возвращает копию части 🆕
  6. splice — возвращает удалённые элементы 🗑️

Понимание разницы между [slice] и [splice] помогает правильно работать с массивами! 💪


Хотите больше статей для подготовки к собеседованиям? Подписывайтесь на EasyAdvice, добавляйте сайт в закладки и совершенствуйтесь каждый день 💪