Методы массивов: splice, slice, concat

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

Метод splice

В предыдущей статье мы узнали как добавлять элементы в начало/конец массива, а так же как удалять элементы из конца/начала массива. Ты, скорее всего, задавался вопросом, а как же удалить элемент, если он не в начале массива и не в конце.

Для данного действия, существует метод splice, которым ты в будущем будешь пользоваться очень часто, т.к. этот метод умеет и добавлять и удалять элементы в любом месте массива. Переходим к примеру использования:

const languages = ['python', 'java', 'js'];
languages.splice(0, 2);
console.log(languages); // ['js']

Обрати внимание на аргументы при вызове splice().
Первый аргумент – 0, а второй –2.

Первый аргумент – это указание индекса(позиции) элемента в массиве с которого нужно начинать удаление.

Второй аргумент – количество элементов, которые нужно удалить с указанной позиции.

Итого, этим languages.splice(0, 2), мы сказали: "Удали 2 элемента начиная с индекса 0".

У этого метода есть еще одно достоинство – умение добавлять элементы(любое количество) на место удаленных элементов. Пример:

const languages = ['python', 'java', 'js'];
languages.splice(0, 2, 'php', 'c#', 'c++');
console.log(languages); // ['php', 'c#', 'c++', 'js']

Первый два аргумента метода объяснены выше, а вот следующие за ними аргументы будут вставляться в массив на место удаленных элементов. Их количество не ограничено – хочешь добавь один элемент, хочешь 10 тысяч элементов, все будет прекрасно работать.

P.S. Данный метод изменяет массив "по месту", т.е. изменяет исходный массив.

Метод slice

Этот метод копирует указанные элементы массива и создает из них новый массив.

const languages = ['java', 'python', 'php', 'c++', 'js'];
const newList = languages.slice(2, 4);

console.log(newList); // ['php', 'c++']

Метод slice не изменяет исходный массив, а возвращает новый массив, поэтому для сохранения результатов его выполнения нужно эти самые результаты куда-то записать, для этого я определил константу newList.

Метод имеет только 2 аргумента.

Первый аргумент – индекс элемента с которого нужно начинать копирование.

Второй аргумент – индекс до которого нужно копировать элементы не включая его.

languages.slice(2, 4) – в данном случае, мы говорим: "Скопируй элементы с индексом 2 и 3". Элемент с индексом 4 не будет включен.

Аргументы могут быть не только положительными числами, но и отрицательными, в таком случае отсчет будет начинаться с конца массива.

Метод concat

Метод concat, фактически, создает из нескольких массивов/значений один объединяя их. Результат выполнения метода – новый массив, который нужно куда-то записать для дальнейшей работы с ним.

const languages = ['python', 'java', 'js'];
const additionalLanguages = ['c#', 'c++'];

const summary = languages.concat(additionalLanguages); 
console.log(summary); // ['python', 'java', 'js', 'c#', 'c++']

Метод принимает неограниченное количество аргументов. Если аргумент является массивом, то все его элементы копируются. В противном случае, копируется сам аргумент.

const languages = ['js'];
languages.concat(['python', 'php'], 'java'); // ['js', 'python', 'php', 'java']