В начале вашего пути изучения Javascript, массивы могут быть довольно запутанными. Существует огромное количество различных методов, которые можно использовать для работы с ними. Я знаю, что у меня были проблемы, когда я только начинал учиться. Итак, давайте начнем с самого начала.

Что такое массив?

Массив — это структура данных, в которой хранятся данные. Это могут быть строки или другие структуры данных.

const myFruit = [
'apples', 'oranges', 'bananas', 'strawberries'
]

Это пример простого массива. Это массив строк.

const myFruit = [
'apples',['oranges',['bananas'], 'pineapple'],'strawberries'
]

Хотя здесь по-прежнему используются строки, вы можете видеть, что в myFruit встроены массивы.

const favoriteFruits = [
{name: 'Joe',
favoriteFruit: 'apples'},
{name: 'Susan',
favoriteFruit: 'bananas'},
{name: 'Steve',
favoriteFruit: 'pineapple'},
{name: 'Betty',
favoriteFruit: 'kiwi'}
]

Здесь у нас есть массив с вложенными объектами. За время изучения javascript это была самая распространенная форма массива, которую я видел.

Это вкратце описывает, что такое массив. Он может быть простым, как несколько строк, или иметь вложенную структуру данных. Далее я расскажу о различных способах модификации массивов.

Деструктивные и неразрушающие действия

Прежде чем мы перейдем к модификации массивов, нам нужно поговорить о деструктивном и неразрушающем способах.

Деструктивный

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

Недеструктивный

Если вы полагаете, что неразрушающий метод противоположен разрушающему, то вы правы! Когда вы используете неразрушающий метод, вы создаете новый массив из исходного. Это похоже на то, как если бы у вас был пакет m&m’s и вы пропустили его через машину, чтобы отобрать синие и желтые для создания нового пакета. Это обычные предпочтительные методы для работы с массивами.

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

Добро пожаловать в мир модификации массивов! Давайте начнем с разрушительных методов.

Деструктивные

Вот список деструктивных методов:

• .push()
• .unshift()
• .pop()
• .shift()
• .splice()

.push() и .unshift() добавляют элементы в исходный массив, а .pop() и .shift() удаляют элементы из исходного массива.

.push()

const myFruit = [
'apples', 'oranges', 'bananas', 'strawberries'];
myFruit.push('pineapple');
myFruit // =>['apples', 'oranges', 'bananas', 'strawberries', 'pineapple']

Здесь видно, что мы использовали .push(), чтобы «затолкать» ананас в исходный массив. .push() добавит переданный элемент в конец массива. Это сохраняет массив прежним, но добавляет новый элемент в исходный.

.unshift()

const myFruit = [
'apples', 'oranges', 'bananas', 'strawberries'];
myFruit.unshift('kiwi');
myFruit // =>['kiwi','apples', 'oranges', 'bananas', 'strawberries']

Возвращаясь к исходному массиву myFruit, вы можете увидеть, что я использовал .unshift() для добавления киви. .unshift() добавляет новый элемент в начало исходного массива. Что деструктивно изменяет исходный массив.

.pop()

const myFruit = [
'apples', 'oranges', 'bananas', 'strawberries'];
myFruit.pop();
myFruit //=> ['apples', 'oranges', 'bananas']

Возвращаясь к исходному массиву, .pop() удаляет последний элемент массива. Таким образом, вы видите, что в исходном массиве больше нет клубники. Обратите внимание, что я не передаю аргумент. Это потому, что вы не можете выбрать, какой элемент вы пытаетесь удалить. .pop() удаляет только последний элемент массива.

.shift()

const myFruit = [
'apples', 'oranges', 'bananas', 'strawberries'];
myFruit.shift();
myFruit //=> ['oranges', 'bananas', 'strawberries']

Снова видно, что через .shift() не передается никакого аргумента, но она удаляет яблоки. .shift() удаляет первый элемент вашего исходного массива.

.splice()

const myFruit = [
'apples', 'oranges', 'bananas', 'strawberries'];
myFruit.splice(2, 1, 'pineapple');
myFruit; // => ['apples', 'oranges', 'pineapple', 'strawberries']

У .splice() есть несколько различных способов использования. В примере выше я использовал оператор .splice(), чтобы удалить бананы из строки и вставить на их место ананас. Откуда он знает, что я хотел именно этого? Давайте разберем аргументы, которые я передал. Первый аргумент — 2, это означает, что оператор начинает с этой точки. Это выбранные бананы. Далее у нас есть 1, что означает, что он собирается удалить один элемент. Считайте, что вы выделили начальную точку и теперь собираетесь удалить ее и заменить чем-то новым. Далее идет ананас, который является новым элементом, добавляемым на место удаленного элемента. .splice() позволяет более конкретно изменить исходный массив. Вы можете добавить новый элемент в любое место массива. Не обязательно удалять какие-либо элементы, чтобы передать новый элемент. Как это выглядит? Давайте рассмотрим предыдущий пример.

const myFruit = [
'apples', 'oranges', 'bananas', 'strawberries'];
myFruit.splice(2, 0, 'pineapple');
myFruit; // => ['apples', 'oranges', 'pineapple', 'bananas', 'strawberries']

Видно, что передача 0 во втором аргументе не удаляет ни одного элемента, а просто добавляет третий аргумент в массив. Итак, теперь вы увидели, как можно использовать .splice() более чем одним способом.

Неразрушающие

Вот список неразрушающих методов:

• .slice()
• Оператор разделения

.slice()

const myFruit = [
'apples', 'oranges', 'bananas', 'strawberries'];
myFruit.slice(0,2);
// => ['apples', 'oranges', 'bananas']
myFruit;
//=> ['apples', 'oranges', 'bananas', 'strawberries']

.slice() — это отличный способ выбрать определенную часть исходного массива и превратить ее в новый массив. Выше вы можете видеть, что первый аргумент, который я передал, был отправной точкой для нового массива. Второй аргумент — это последний элемент, который я хотел взять из исходного массива, поэтому новый массив был составлен из ['яблоки', 'апельсины', 'бананы'].

Оператор разворачивания

const myFruit = [
'apples', 'oranges', 'bananas', 'strawberries'];
const copyMyFruit = ['pineapple', ...myFruit];
copyMyFruit;
// => ['pineapple', 'apples', 'oranges', 'bananas', 'strawberries']

Оператор spread позволяет создать новый массив и добавить в него новый элемент. Выше вы можете видеть, что я добавил pineapple в копию исходного массива, поскольку pineapple находился перед массивом, он добавил его в начало, но вы также можете добавить элемент в конец, поменяв их местами. Вы также можете добавить несколько элементов при использовании оператора spread.

Итераторы массива

Что такое итераторы массивов?

Ниже приведен список наиболее часто используемых итераторов массивов:

• .forEach()
• .map()
• .filter()
• .find()
• .reduce()
• .some()
• .every()

Итераторы массивов — это различные операторы, которые используются в массивах. У каждого из них своя цель. Некоторые создают новые массивы, некоторые просто помогают добраться до различных частей массивов. Все они являются неразрушающими методами для использования в массивах.

.forEach()

const myFruit = [
'apples', 'oranges', 'bananas', 'strawberries'];
myFruit.forEach(function(myFruit){
console.log(`Can I have some ${myFruit}, please?`)}
//Can I have some apples, please?
//Can I have some oranges, please?
//Can I have some bananas, please?
//Can I have some strawberries, please?

.forEach() проходит по массиву и подключает каждый элемент к тому, через что он проходит. Выше вы видите, что я console.log() строку и интерполировал массив в нее, что дало нам строки, которые использовали только один элемент из исходного массива.

.map()

const myNumbers =[ 45, 15, 12, 11];
myNumbers.map(function(num){
return num * 5 });
// [225, 75, 60, 55]

.map() возвращает новый массив после того, как исходный массив будет пропущен через функцию обратного вызова. Выше видно, что функция умножает каждый элемент массива на пять и возвращает новый массив.

.filter()

const myFruit = [
'apples', 'oranges', 'bananas', 'strawberries'];
myFruit.filter(function (fruit){
    return fruit[3] === 'a'});
//['bananas', 'strawberries']

.filter() возвращает новый массив, прошедший проверку функции, через которую прогоняется исходный массив. В примере выше показан тест проверки на то, что третьим символом фрукта является a. Видно, что только 'bananas', 'strawberries' прошли проверку и были сгенерированы в новый массив.

.find()

const myNumbers =[ 45, 15, 12, 11];
myNumbers.find(function (num) {
    return num < 13 });
// 12

.find() позволяет вам передать массив в функцию, которая имеет заданный параметр для того, какой элемент вы ищете. Выше вы можете видеть, что заданный мною параметр искал элемент, который меньше 13. Функция перебирает каждый элемент и возвращает первый элемент, удовлетворяющий этому параметру.

.reduce()

const myNumbers =[ 45, 15, 12, 11];
myNumbers.reduce((previousValue, currentValue) => previousValue + currentValue, 10)
//93

.reduce() уменьшает массив до одной суммы. Выше я передал предыдущее значение, а начиная с 0 нет никакого числа, поэтому я установил 10 в качестве базового числа. Затем функция продолжает добавлять каждый элемент к общей сумме, получая на выходе 93.

.some()

const myFruit = [
'apples', 'oranges', 'bananas', 'strawberries']
myFruit.some(fruit => fruit.length > 4);
//true

.some() возвращает true или false на основе отдельных элементов в массиве. Вы можете видеть выше, что мы проверяем длину элементов больше четырех. Поскольку длина яблок больше 4, возвращается true.

.every()

const myFruit = [
'apples', 'oranges', 'bananas', 'strawberries']
myFruit.every(fruit => fruit.length > 6);
//false

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

Это краткий обзор методов массивов. Если вы хотите прочитать больше, посмотрите документацию на Array MDN.