# Методы массива

## 1. Методы split() и join() <a href="#metody-split-i-join" id="metody-split-i-join"></a>

`split(s)` — позволяет превратить строку в массив, разбив ее по разделителю `s`. Это не метод массива, но рассматриваем мы его сейчас, так как раньше мы о массивах не знали.

`join(s)` — делает в точности противоположное `split`. Он берет массив и склеивает его в строку, используя `s` как разделитель.

```js
// split
const message = 'Welcome to Bahamas!';

// Разбивает строку по разделителю, в данном случае это пробел
console.log(message.split(' ')); // ["Welcome", "to", "Bahamas!"]

// Вызов split с пустой строкой разобьёт по буквам
console.log(message.split('')); // [много букв :)]

// join
const clients = ['Mango', 'Poly', 'Ajax'];

// Сошьет все элементы массива в строку,
// между каждой парой элементов будет указанный разделитель
console.log(clients.join(' ')); // "Mango Poly Ajax"
console.log(clients.join(',')); // "Mango,Poly,Ajax"
console.log(clients.join('-')); // "Mango-Poly-Ajax"
Copy
```

## 2. Методы indexOf() и includes() <a href="#metody-indexof-i-includes" id="metody-indexof-i-includes"></a>

`array.indexOf(x)` — возвращает первый индекс, в котором элемент `x` был найден в массиве или число `-1`, если такого элемента нет. Используйте `indexOf` тогда, когда необходимо получить непосредственно индекс элемента.

```js
const clients = ['Mango', 'Ajax', 'Poly', 'Kiwi'];

console.log(clients.indexOf('Poly')); // 2
console.log(clients.indexOf('Monkong')); // -1
Copy
```

`array.includes(x)` — определяет, содержит ли массив некоторый элемент `x`, возвращая `true` или `false` соответственно. Используйте `includes` тогда, когда необходимо проверить есть ли элемент в массиве и не важен его порядковый номер.

```js
const clients = ['Mango', 'Ajax', 'Poly', 'Kiwi'];

console.log(clients.includes('Poly')); // true
console.log(clients.includes('Monkong')); // false
Copy
```

### 2.1. Проверка множественных условий с includes() <a href="#proverka-mnozhestvennykh-uslovii-s-includes" id="proverka-mnozhestvennykh-uslovii-s-includes"></a>

На первый взгляд пример ниже выглядит вполне хорошо. Однако, что если у нас будет больше красных фруктов, к примеру ещё вишня (cherry) или клюква (cranberries)? Будем ли мы расширять условие с помощью дополнительных `||`?

```js
const fruit = 'apple';

if (fruit === 'apple' || fruit === 'strawberry') {
  console.log('It is a red fruit!');
}
Copy
```

Можем переписать условие, с использованием `Array.includes`, это очень просто и масштабируемо.

```js
// Выносим варианты в массив
const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries'];
const fruit = 'cherry';

if (redFruits.includes(fruit)) {
  console.log('It is a red fruit!');
}
Copy
```

## 3. Методы push(), pop(), shift(), unshift() <a href="#metody-push-pop-shift-unshift" id="metody-push-pop-shift-unshift"></a>

Добавляют или удаляют крайние элементы массива. Работают только с крайним левым и крайним правым элементом массива и не могут поставить или удалить элемент с произвольной позиции. Для наглядности, взгляните на иллюстрацию ниже.

<figure><img src="https://1103462354-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvU876pbEYmjt6apfq5hs%2Fuploads%2FhvgbQjeN1SmQhRBpvpoN%2Farr-methods.jpg?alt=media&#x26;token=df7b6e23-eb54-49f7-8486-0fe24016e660" alt=""><figcaption></figcaption></figure>

### 3.1. push и pop <a href="#push-i-pop" id="push-i-pop"></a>

`push()` — позволяет добавить один или несколько элементов в конец массива. Метод возвращает значение свойства `length`, которое определяет количество элементов в массиве.

<figure><img src="https://1103462354-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvU876pbEYmjt6apfq5hs%2Fuploads%2FmeFv0WmAwFb8HICbMTRo%2Fpush.png?alt=media&#x26;token=8d74c00c-3e44-4202-a28e-8aff0994db79" alt=""><figcaption></figcaption></figure>

`pop()` — удаляет элемент из конца массива и возвращает удаленный элемент. Если массив пуст, метод возвращает `undefined`.

<figure><img src="https://1103462354-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvU876pbEYmjt6apfq5hs%2Fuploads%2FghhllHDRsJreNNEHY9OS%2Fpop.png?alt=media&#x26;token=a41741e3-2e6c-4c2e-a21c-f2588d51733e" alt=""><figcaption></figcaption></figure>

В примере кодом описаны иллюстрации выше, первые 3 шага. Создается пустой массив с именем `stack` и в конец массива добавляется три числа, одно за другим используя `push()`, затем они удаляются используя `pop()`.

```js
// Создаем пустой массив
const stack = [];

// Добавляем элементы в конец массива
stack.push(1);
console.log(stack); // [1]

stack.push(2);
console.log(stack); // [1, 2]

stack.push(3);
console.log(stack); // [1, 2, 3]

// Удаляем элементы из конца массива
console.log(stack.pop()); //  3
console.log(stack); // [1, 2]

console.log(stack.pop()); //  2
console.log(stack); // [1]

console.log(stack.pop()); //  1
console.log(stack); // []

console.log(stack.pop()); //  undefined
Copy
```

### 3.2. shift() и unshift() <a href="#shift-i-unshift" id="shift-i-unshift"></a>

Реже используются методы `shift` и `unshift`.

* `shift()` — удаляет элемент из начала массива и возвращает его (элемента) значение.
* `unshift()` — добавляет элемент в начало массива.

```js
const clients = ['Mango', 'Ajax', 'Poly'];

console.log(clients.shift()); // Mango
console.log(clients); // ["Ajax", "Poly"]

clients.unshift('Kiwi');
console.log(clients); // ["Kiwi", "Ajax", "Poly"]
Copy
```

## 4. Метод slice() <a href="#metod-slice" id="metod-slice"></a>

Синтаксис метода `slice()` одинаков для строк и массивов. Его просто запомнить. Он позволяет извлекать элементы подмножества массива и добавлять их в новый массив. В большинстве случаев используется для создания копии части или целого исходного массива.

```bash
slice(begin, end)
Copy
```

Копирует элементы от `begin`, до, но не включая, `end`.

<div align="left"><figure><img src="https://1103462354-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvU876pbEYmjt6apfq5hs%2Fuploads%2FzjiSbO7C0MEC0vg9qHfd%2Fslice.png?alt=media&#x26;token=5df89f51-333b-46c8-bdcb-f6a82760593c" alt=""><figcaption></figcaption></figure></div>

* Оба аргумента ( `begin` и `end`) не обязательны.
* Параметр `begin` определяет индекс, с которого следует начинать извлечение.
* Параметр `end`, определяет индекс элемента, на котором следует закончить извлечение. Метод `slice` не включает элемент с индексом `end` в извлеченные элементы.
* Если `begin` и `end` не указаны, копирование будет с начала массива, с индекса `0`, - то есть скопируется весь массив.
* Если не указать параметр `end`, метод `slice` будет использовать длину массива (`length`) для параметра `end`.
* Метод `slice` не изменяет исходный массив, а возвращает новый массив, содержащий копию элементов исходного.
* Можно использовать отрицательные индексы, они отсчитываются с конца.

```js
const clients = ['Mango', 'Ajax', 'Poly', 'Kiwi'];

// Вернет новый массив в котором будут элементы с индексами от 1 до 2
console.log(clients.slice(1, 3)); // ["Ajax", "Poly"]

// Вернет новый массив в котором будут
// элементы с индексами от 1 до (clients.length - 1)
console.log(clients.slice(1)); // ["Ajax", "Poly", "Kiwi"]

// Вернет копию исходного массива
console.log(clients.slice()); // ["Mango", Ajax", "Poly", "Kiwi"]

// Вернет новый массив состоящих из последних двух элементом исходного
console.log(clients.slice(-2)); // ["Poly", "Kiwi"]
Copy
```

## 5. Метод splice() <a href="#metod-splice" id="metod-splice"></a>

`splice()` — швейцарский нож для работы с массивами, в том случае, если исходный массив необходимо изменить. Позволяет удалять, добавлять и заменять элементы в произвольном месте массива.

### 5.1. Удаление элементов массива <a href="#udalenie-elementov-massiva" id="udalenie-elementov-massiva"></a>

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

```bash
splice(position, num)
Copy
```

* `position` — указывает позицию (индекс) первого элемента для удаления
* `num` — определяет количество удаляемых элементов

Метод `splice` изменяет исходный массив и возвращает массив, содержащий удаленные элементы.

```js
// Предположим, у нас есть массив оценок, который содержит пять чисел от 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]
Copy
```

На рисунке показан вызов метода `score.splice(0, 3)` из примера выше.

<figure><img src="https://1103462354-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvU876pbEYmjt6apfq5hs%2Fuploads%2FrWLj5L1dTc05l4q0dWkd%2Fsplice-remove.png?alt=media&#x26;token=78f97db9-a554-429e-b291-ce21879a1235" alt=""><figcaption></figcaption></figure>

### 5.2. Вставка элементов в массив <a href="#vstavka-elementov-v-massiv" id="vstavka-elementov-v-massiv"></a>

Вы можете вставить один или несколько элементов в массив, передав три или более аргумента методу `splice`, при этом второй аргумент должен быть равен нулю.

```bash
splice(position, 0, new_element_1, new_element_2, ...)
Copy
```

* Аргумент `position` указывает начальную позицию в массиве, куда будут вставлены новые элементы.
* Второй аргумент равен нулю `0`, он говорит методу не удалять какие-либо элементы.
* Третий, четвертый и все последующие аргументы — это новые элементы, которые вставляются в массив.

{% hint style="success" %}
<mark style="color:green;">Обратите внимание, что метод</mark> <mark style="color:green;"></mark><mark style="color:green;">`splice`</mark> <mark style="color:green;"></mark><mark style="color:green;">изменяет исходный массив. Кроме того, он не удаляет какие-либо элементы, поэтому в этом случае возвращается пустой массив.</mark>
{% endhint %}

```js
// Предположим, что у вас есть массив с названиями цветов в виде строк.
const colors = ['red', 'green', 'blue'];

// Следующая операция помещает один новый элемент перед вторым элементом.
colors.splice(2, 0, 'purple');

// Теперь массив цветов содержит четыре элемента
// с новым элементом, вставленным во вторую позицию.
console.log(colors); // ["red", "green", "purple", "blue"]

// Вы можете вставить более одного элемента, передав четвертый, пятый аргумент и т. д.
colors.splice(1, 0, 'yellow', 'pink');
Copy
```

На рисунке показан вызов метода `colors.splice(2, 0, 'purple')` из примера выше.

<figure><img src="https://1103462354-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvU876pbEYmjt6apfq5hs%2Fuploads%2Fcri8KprtIIL3hiIr2WoZ%2Fsplice-insert.png?alt=media&#x26;token=0a543c68-0283-4646-b52e-7c92a992c6fc" alt=""><figcaption></figcaption></figure>

### 5.3. Замена элементов массива <a href="#zamena-elementov-massiva" id="zamena-elementov-massiva"></a>

Метод `splice()` также позволяет вставить новые элементы в массив при одновременном удалении существующих элементов.

Для этого необходимо передать по крайней мере три аргумента: вторым — количество элементов для удаления, а третьим — элементы для вставки. Количество удаляемых и добавляемых элементов может не совпадать.

```js
// Предположим, у вас есть массив языков программирования из четырех элементов.
const languages = ['C', 'C++', 'Java', 'JavaScript'];

// Следующая операция заменяет второй элемент на новый.
languages.splice(1, 1, 'Python');

// В массиве языков теперь все еще четыре элемента,
// но второй элемент теперь «Python» вместо «C++».
console.log(languages); // ["C", "Python", "Java", "JavaScript"]

// Вы можете заменить один элемент на несколько элементов,
// передав больше аргументов
languages.splice(2, 1, 'C#', 'Swift', 'Go');

console.log(languages);
// ["C", "Python", "C#", "Swift", "Go", "JavaScript"]
Copy
```

На рисунке показан вызов метода `languages.splice(1, 1, 'Python')` из примера выше.

![splice method](https://goit.global/javascript/ru/v1/module-02/images/splice-replace.png)

## 6. Метод concat() <a href="#metod-concat" id="metod-concat"></a>

Используется для объединения двух или более массивов. Этот метод не изменяет исходный массив, а возвращает новый.

```js
const oldClients = ['Mango', 'Ajax', 'Poly', 'Kiwi'];
const newClients = ['Monkong', 'Singu'];

const allClients = oldClients.concat(newClients);

console.log(allClients);
// ["Mango", "Ajax", "Poly", "Kiwi", "Monkong", "Singu"]

console.log(oldClients);
// ["Mango", "Ajax", "Poly", "Kiwi"]

console.log(newClients);
// ["Monkong", "Singu"]
```
