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

JavaScript простым языком

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

Метод 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 тысяч элементов, все будет прекрасно работать.

Этот метод меняет массив по месту, т.е. меняет исходный массив.

Метод 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']