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



### Методы `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) <a href="#metody-split-i-join" id="metody-split-i-join"></a>

Метод `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) <a href="#metod-indexof" id="metod-indexof"></a>

`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) <a href="#metod-includes" id="metod-includes"></a>

`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) <a href="#proverka-mnozhestvennykh-uslovii-s-includes" id="proverka-mnozhestvennykh-uslovii-s-includes"></a>

На первый взгляд код следующего примера выглядит хорошо.

```
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) <a href="#metody-push-i-pop" id="metody-push-i-pop"></a>

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

![array methods](https://goit.global/textbooks/javascript-yk5evp/v2/img/lesson-03/arr-methods.jpg)

Метод `push()` добавляет один или несколько элементов в конец массива, без необходимости указывать индексы добавляемых элементов. Возвращает длину массива после добавления элементов.

![push method](https://goit.global/textbooks/javascript-yk5evp/v2/img/lesson-03/push.png)

```
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`.

![pop method](https://goit.global/textbooks/javascript-yk5evp/v2/img/lesson-03/pop.png)

```
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) <a href="#metod-slice" id="metod-slice"></a>

`slice(begin, end)` возвращает новый массив, содержащий копию части исходного массива, не изменяя его. Копия делается от `begin` и до, но не включая, `end` - индексы элементов исходного массива.

![slice method](https://goit.global/textbooks/javascript-yk5evp/v2/img/lesson-03/slice.png)

```
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) <a href="#metod-splice" id="metod-splice"></a>

Швейцарский нож для работы с массивами, если исходный массив нужно изменить. Удаляет, добавляет и заменяет элементы в произвольном месте массива.

#### Удаление[​](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) <a href="#udalenie" id="udalenie"></a>

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

```
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)` из примера.

![splice remove](https://goit.global/textbooks/javascript-yk5evp/v2/img/lesson-03/splice-remove.png)

**ИНТЕРЕСНО**

На практике возвращаемое значение (массив удалённых элементов) используется редко. В основном просто необходимо удалить элементы из массива.

#### Добавление[​](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) <a href="#dobavlenie" id="dobavlenie"></a>

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

```
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')` из примера.

![splice insert](https://goit.global/textbooks/javascript-yk5evp/v2/img/lesson-03/splice-insert.png)

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

```
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) <a href="#zamena" id="zamena"></a>

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

```
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')` из примера.

![splice replace](https://goit.global/textbooks/javascript-yk5evp/v2/img/lesson-03/splice-replace.png)

### Метод `concat()`[​](https://goit.global/textbooks/javascript-yk5evp/v2/docs/lesson-03/methods#%D0%BC%D0%B5%D1%82%D0%BE%D0%B4-concat) <a href="#metod-concat" id="metod-concat"></a>

Объединяет два или более массива в один. Он не изменяет массив на котором вызывается, а возвращает новый. Порядок аргументов метода влияет на порядок элементов нового массива.

```
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"]
```
