> For the complete documentation index, see [llms.txt](https://aleksandra-hrevtsova.gitbook.io/senior-front-end-javascript/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://aleksandra-hrevtsova.gitbook.io/senior-front-end-javascript/massivy/metody-massiva.md).
# Методы массива
### Методы `split()` и `join()`[](https://goit.global/textbooks/javascript-yk5evp/v2/docs/lesson-03/methods#%D0%BC%D0%B5%D1%82%D0%BE%D0%B4%D1%8B-split-%D0%B8-join)
Метод `split(delimeter)` превращает строку в массив, «разбив» её по разделителю `delimeter`. Если разделитель это пустая строка, то получится массив отдельных символов. Разделителем может быть один или несколько символов.
```
const name = "Mango";
console.log(name.split(""));
// ["M", "a", "n", "g", "o"]
const message = "JavaScript это интересно";
console.log(message.split(" "));
// ["JavaScript", "это", "интересно"]
```
Метод массивов `join(delimeter)` соединяет элементы массива в строку. В строке элементы будут разделены символом или группой символов указанных в `delimeter`. То есть это операция обратная методу строк `split(delimeter)`.
```
const words = ["JavaScript", "это", "интересно"];
console.log(words.join("")); // "JavaScriptэтоинтересно"
console.log(words.join(" ")); // "JavaScript это интересно"
console.log(words.join("-")); // "JavaScript-это-интересно"
```
### Метод `indexOf()`[](https://goit.global/textbooks/javascript-yk5evp/v2/docs/lesson-03/methods#%D0%BC%D0%B5%D1%82%D0%BE%D0%B4-indexof)
`indexOf(value)` возвращает первый индекс, в котором элемент со значением `value` был найден в массиве, или число `-1`, если такого элемента нет. Используйте `indexOf` тогда, когда необходимо получить непосредственно индекс элемента.
```
const clients = ["Mango", "Ajax", "Poly", "Kiwi"];
console.log(clients.indexOf("Poly")); // 2
console.log(clients.indexOf("Monkong")); // -1
```
### Метод `includes()`[](https://goit.global/textbooks/javascript-yk5evp/v2/docs/lesson-03/methods#%D0%BC%D0%B5%D1%82%D0%BE%D0%B4-includes)
`includes(value)` проверяет есть ли в массиве элемент со значением `value` и возвращает `true` или `false` соответственно. Область применения этого метода сводится к ситуациям когда необходимо проверить есть ли элемент в массиве и не важна его позиция (индекс).
```
const clients = ["Mango", "Ajax", "Poly", "Kiwi"];
console.log(clients.includes("Poly")); // true
console.log(clients.includes("Monkong")); // false
```
#### Проверка множественных условий с `includes()`[](https://goit.global/textbooks/javascript-yk5evp/v2/docs/lesson-03/methods#%D0%BF%D1%80%D0%BE%D0%B2%D0%B5%D1%80%D0%BA%D0%B0-%D0%BC%D0%BD%D0%BE%D0%B6%D0%B5%D1%81%D1%82%D0%B2%D0%B5%D0%BD%D0%BD%D1%8B%D1%85-%D1%83%D1%81%D0%BB%D0%BE%D0%B2%D0%B8%D0%B9-%D1%81-includes)
На первый взгляд код следующего примера выглядит хорошо.
```
const fruit = "apple";
if (fruit === "apple" || fruit === "strawberry") {
console.log("It is a red fruit!");
}
```
Однако, что если у нас будет больше красных фруктов, к примеру ещё вишня (cherry) или клюква (cranberries)? Будем ли мы расширять условие с помощью дополнительных `||`?
```
const fruit = "apple";
if ( fruit === "apple"
|| fruit === "strawberry"
|| fruit === "cherry"
|| fruit === "cranberries") {
console.log("It is a red fruit!");
}
```
Можем переписать условие используя метод `includes()`, это очень просто и масштабируемо.
```
// Выносим варианты в массив
const redFruits = ["apple", "strawberry", "cherry", "cranberries"];
const fruit = "cherry";
// Проверяем наличие элемента
const hasFruit = redFruits.includes(fruit);
if (hasFruit) {
console.log(`${fruit} is a red fruit!`);
}
```
### Методы `push()` и `pop()`[](https://goit.global/textbooks/javascript-yk5evp/v2/docs/lesson-03/methods#%D0%BC%D0%B5%D1%82%D0%BE%D0%B4%D1%8B-push-%D0%B8-pop)
Добавляют или удаляют крайние элементы массива. Работают только с крайним левым и крайним правым элементом и не могут поставить или удалить элемент с произвольной позиции.
Метод `push()` добавляет один или несколько элементов в конец массива, без необходимости указывать индексы добавляемых элементов. Возвращает длину массива после добавления элементов.
```
const numbers = [];
numbers.push(1);
console.log(numbers); // [1]
numbers.push(2);
console.log(numbers); // [1, 2]
numbers.push(3);
console.log(numbers); // [1, 2, 3]
numbers.push(4);
console.log(numbers); // [1, 2, 3, 4]
numbers.push(5);
console.log(numbers); // [1, 2, 3, 4, 5]
```
Метод `pop()` удаляет последний элемент из конца массива и возвращает удаленный элемент. Если массив пустой, метод возвращает `undefined`.
```
const numbers = [1, 2, 3, 4, 5];
console.log(numbers.pop()); // 5
console.log(numbers); // [1, 2, 3, 4]
console.log(numbers.pop()); // 4
console.log(numbers); // [1, 2, 3]
console.log(numbers.pop()); // 3
console.log(numbers); // [1, 2]
console.log(numbers.pop()); // 2
console.log(numbers); // [1]
console.log(numbers.pop()); // 1
console.log(numbers); // []
```
### Метод `slice()`[](https://goit.global/textbooks/javascript-yk5evp/v2/docs/lesson-03/methods#%D0%BC%D0%B5%D1%82%D0%BE%D0%B4-slice)
`slice(begin, end)` возвращает новый массив, содержащий копию части исходного массива, не изменяя его. Копия делается от `begin` и до, но не включая, `end` - индексы элементов исходного массива.
```
const clients = ["Mango", "Ajax", "Poly", "Kiwi"];
console.log(clients.slice(1, 3)); // ["Ajax", "Poly"]
```
Если `begin` и `end` не указаны, будет создана полная копия исходного массива.
```
const clients = ["Mango", "Ajax", "Poly", "Kiwi"];
console.log(clients.slice()); // ["Mango", Ajax", "Poly", "Kiwi"]
```
Если не указан `end`, копирование будет от `start` и до конца исходного массива.
```
const clients = ["Mango", "Ajax", "Poly", "Kiwi"];console.log(clients.slice(1)); // ["Ajax", "Poly", "Kiwi"]console.log(clients.slice(2)); // ["Poly", "Kiwi"]
```
Если значение `start` отрицательное, а `end` не указан, то будут скопированы последние `start` элементов
```
const clients = ["Mango", "Ajax", "Poly", "Kiwi"];
console.log(clients.slice(-2)); // ["Poly", "Kiwi"]
```
### Метод `splice()`[](https://goit.global/textbooks/javascript-yk5evp/v2/docs/lesson-03/methods#%D0%BC%D0%B5%D1%82%D0%BE%D0%B4-splice)
Швейцарский нож для работы с массивами, если исходный массив нужно изменить. Удаляет, добавляет и заменяет элементы в произвольном месте массива.
#### Удаление[](https://goit.global/textbooks/javascript-yk5evp/v2/docs/lesson-03/methods#%D1%83%D0%B4%D0%B0%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5)
Чтобы удалить элементы в массиве, передаются два аргумента.
```
splice(position, num)
```
* `position` - указывает позицию (индекс) первого элемента для удаления
* `num` - определяет количество удаляемых элементов
Метод `splice` изменяет исходный массив и возвращает массив, содержащий удаленные элементы. Например, у нас есть массив оценок, который содержит пять чисел от 1 до 5.
```
const scores = [1, 2, 3, 4, 5];
// Удаляем три элемента массива, начиная с первого элемента (индекс 0)
const deletedScores = scores.splice(0, 3);
// Теперь массив scores содержит два элемента
console.log(scores); // [4, 5]
// А массив deletedScores содержит три удаленных элемента
console.log(deletedScores); // [1, 2, 3]
```
На рисунке показан вызов метода `score.splice(0, 3)` из примера.
**ИНТЕРЕСНО**
На практике возвращаемое значение (массив удалённых элементов) используется редко. В основном просто необходимо удалить элементы из массива.
#### Добавление[](https://goit.global/textbooks/javascript-yk5evp/v2/docs/lesson-03/methods#%D0%B4%D0%BE%D0%B1%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5)
Для того чтобы добавить один или несколько элементов в массив, необходимо передать три или более аргумента, при этом второй аргумент должен быть равен нулю.
```
splice(position, 0, new_element_1, new_element_2, ...)
```
Скопировать
* Аргумент `position` указывает начальную позицию в массиве, куда будут вставлены новые элементы.
* Второй аргумент это ноль, он говорит методу не удалять элементы в месте добавления новых.
* Третий, четвертый и все последующие аргументы - это новые элементы, которые добавляются в массив.
Например, у нас есть массив с названиями цветов в виде строк. Добавим новый цвет перед элементом с индексом 2.
```
const colors = ["red", "green", "blue"];colors.splice(2, 0, "purple");console.log(colors); // ["red", "green", "purple", "blue"]
```
Скопировать
На рисунке показан вызов метода `colors.splice(2, 0, 'purple')` из примера.
Можно добавить произвольное количество элементов, передав четвертый, пятый аргумент и т. д.
```
const colors = ["red", "green", "blue"];
colors.splice(1, 0, "yellow", "pink");
console.log(colors); // ["red", "yellow", "pink", "green", "blue"]
```
#### Замена[](https://goit.global/textbooks/javascript-yk5evp/v2/docs/lesson-03/methods#%D0%B7%D0%B0%D0%BC%D0%B5%D0%BD%D0%B0)
Замена это операция добавления в которой удаляются элементы в месте добавления новых. Для этого необходимо передать минимум три аргумента. Количество удаляемых и добавляемых элементов может не совпадать.
```
splice(position, num, new_element_1, new_element_2, ...)
```
* `position` - указывает позицию (индекс) первого элемента для удаления
* `num` - определяет количество удаляемых элементов
* Третий, четвертый и все последующие аргументы - это новые элементы, которые добавляются в массив.
например, у нас есть массив языков программирования из четырех элементов.
```
const languages = ["C", "C++", "Java", "JavaScript"];
// Заменяем элемент с индексом 1 на новый
languages.splice(1, 1, "Python");
console.log(languages); // ["C", "Python", "Java", "JavaScript"]
// Заменяем один элемент (с индексом 2) на несколько
languages.splice(2, 1, "C#", "Swift", "Go");
console.log(languages); // ["C", "Python", "C#", "Swift", "Go", "JavaScript"]
```
На рисунке показан вызов метода `languages.splice(1, 1, 'Python')` из примера.
### Метод `concat()`[](https://goit.global/textbooks/javascript-yk5evp/v2/docs/lesson-03/methods#%D0%BC%D0%B5%D1%82%D0%BE%D0%B4-concat)
Объединяет два или более массива в один. Он не изменяет массив на котором вызывается, а возвращает новый. Порядок аргументов метода влияет на порядок элементов нового массива.
```
const oldClients = ["Mango", "Ajax", "Poly", "Kiwi"];
const newClients = ["Monkong", "Singu"];
const allClientsWithOldFirst = oldClients.concat(newClients);
console.log(allClientsWithOldFirst); // ["Mango", "Ajax", "Poly", "Kiwi", "Monkong", "Singu"]
const allClientsWithNewFirst = newClients.concat(oldClients);
console.log(allClientsWithNewFirst); // ["Monkong", "Singu", "Mango", "Ajax", "Poly", "Kiwi"]console.log(oldClients); // ["Mango", "Ajax", "Poly", "Kiwi"]
console.log(newClients); // ["Monkong", "Singu"]
```