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

1. Методы split() и join()

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

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

// 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()

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

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 тогда, когда необходимо проверить есть ли элемент в массиве и не важен его порядковый номер.

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

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

2.1. Проверка множественных условий с includes()

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

const fruit = 'apple';

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

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

// Выносим варианты в массив
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()

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

3.1. push и pop

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

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

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

// Создаем пустой массив
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()

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

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

• unshift() — добавляет элемент в начало массива.

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()

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

slice(begin, end)
Copy

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

• Оба аргумента ( begin и end) не обязательны.

• Параметр begin определяет индекс, с которого следует начинать извлечение.

• Параметр end, определяет индекс элемента, на котором следует закончить извлечение. Метод slice не включает элемент с индексом end в извлеченные элементы.

• Если begin и end не указаны, копирование будет с начала массива, с индекса 0, - то есть скопируется весь массив.

• Если не указать параметр end, метод slice будет использовать длину массива (length) для параметра end.

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

• Можно использовать отрицательные индексы, они отсчитываются с конца.

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()

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

5.1. Удаление элементов массива

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

splice(position, num)
Copy

• 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]
Copy

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

5.2. Вставка элементов в массив

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

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

• Аргумент position указывает начальную позицию в массиве, куда будут вставлены новые элементы.

• Второй аргумент равен нулю 0, он говорит методу не удалять какие-либо элементы.

• Третий, четвертый и все последующие аргументы — это новые элементы, которые вставляются в массив.

Обратите внимание, что метод splice изменяет исходный массив. Кроме того, он не удаляет какие-либо элементы, поэтому в этом случае возвращается пустой массив.

// Предположим, что у вас есть массив с названиями цветов в виде строк.
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') из примера выше.

5.3. Замена элементов массива

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

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

// Предположим, у вас есть массив языков программирования из четырех элементов.
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

6. Метод concat()

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

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