splice() в JavaScript

splice() изменяет массив: удаляет, добавляет или заменяет элементы.

let fruits = ['apple', 'orange', 'banana'];

fruits.splice(1, 1);

console.log(fruits);

Результат:

['apple', 'banana']

Из массива удалили один элемент, начиная с индекса 1.

Что делает splice()

splice() работает с исходным массивом. Он не создает новый массив с изменениями, а меняет тот массив, у которого вызван.

let numbers = [10, 20, 30, 40];

numbers.splice(1, 2);

console.log(numbers); // [10, 40]

Здесь с индекса 1 удалили два элемента: 20 и 30.

Основная запись выглядит так:

array.splice(start, deleteCount, item1, item2)

start - индекс, с которого начинается изменение.

deleteCount - сколько элементов нужно удалить.

item1, item2 и следующие значения - элементы, которые нужно вставить.

let fruits = ['apple', 'orange', 'banana'];

fruits.splice(1, 1, 'grape');

console.log(fruits);

Результат:

['apple', 'grape', 'banana']

Чтобы удалить элементы, передают индекс начала и количество элементов для удаления.

let fruits = ['apple', 'orange', 'banana', 'grape'];

fruits.splice(1, 2);

console.log(fruits);

Результат:

['apple', 'grape']

Метод начал с индекса 1 и удалил два элемента.

Если не указать deleteCount, метод удалит все элементы от start до конца массива.

let numbers = [10, 20, 30, 40];

numbers.splice(2);

console.log(numbers); // [10, 20]

Чтобы добавить элементы и ничего не удалять, вторым аргументом передают 0.

let fruits = ['apple', 'banana'];

fruits.splice(1, 0, 'orange');

console.log(fruits);

Результат:

['apple', 'orange', 'banana']

Новый элемент вставился перед элементом с индексом 1.

Можно добавить несколько элементов за один вызов.

let numbers = [10, 40];

numbers.splice(1, 0, 20, 30);

console.log(numbers); // [10, 20, 30, 40]

Замена через splice() - это удаление старых элементов и вставка новых на их место.

let fruits = ['apple', 'orange', 'banana'];

fruits.splice(1, 1, 'grape');

console.log(fruits);

Результат:

['apple', 'grape', 'banana']

Элемент ‘orange’ удалили, а на его место вставили ‘grape’.

Можно заменить несколько элементов.

let numbers = [10, 20, 30, 40];

numbers.splice(1, 2, 200, 300);

console.log(numbers); // [10, 200, 300, 40]

splice() возвращает массив удаленных элементов.

let fruits = ['apple', 'orange', 'banana'];

let removed = fruits.splice(1, 1);

console.log(removed);
console.log(fruits);

Результат:

['orange']
['apple', 'banana']

Если ничего не удаляли, вернется пустой массив.

let fruits = ['apple', 'banana'];

let removed = fruits.splice(1, 0, 'orange');

console.log(removed); // []

В start можно передать отрицательный индекс. Тогда отсчет идет с конца массива.

let fruits = ['apple', 'orange', 'banana'];

fruits.splice(-1, 1);

console.log(fruits);

Результат:

['apple', 'orange']

-1 указывает на последний элемент массива.

splice() и slice() легко перепутать по названию, но они делают разные вещи.

slice() возвращает часть массива и не меняет исходный массив.

let numbers = [10, 20, 30];

let part = numbers.slice(1);

console.log(part); // [20, 30]
console.log(numbers); // [10, 20, 30]

splice() меняет исходный массив.

let numbers = [10, 20, 30];

let removed = numbers.splice(1);

console.log(removed); // [20, 30]
console.log(numbers); // [10]

splice() используют, когда нужно изменить массив на месте.