Массивы в JavaScript

Эта статья не для того, что бы все разжевать новичкам. Скорее, это что-то вроде шпаргалки, что бы быстро освежить память перед важным собеседование или что-то быстро вспомнить

Для начала, давайте разберемся что такое массивы

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

Массив - особая разновидность объекта. Как и в объектах, мы можем обращаться к элементу по его ключу, только в случае с массивами этот ключ "невидим", и называется индексом.

Способы объявления массивов

В JavaScript пустой массив можно объявить двумя способами:

const arr1 = []
const arr2 = new Array()

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

const arr1 = [1, 2, 3]
const arr2 = new Array(1, 2, 3)

Что бы получить значение элемента массива, мы можем обратиться к нему по индексу. Напоминаю, что нумерация элементов массивов начинает с 0. Синтаксис следующий:

const arr = [1, 2, 3]
arr[0] // 1
arr[1] // 2
arr.at(-1) // 3
arr[arr.lenght-1] // 3

Обратимся к последней строчке. Здесь, мы получим последний элемент массива, т.к. длина массива начинает свой отчет с 1, а не с 0, то мы вычитаем 1, что бы "выровняться" со значением индексов

Зачастую, бывают ситуации, когда наш массив - динамический, т.е. заполняется по мере выполнения программы. Что бы добавить элемент в массив, мы можем выполнить следующие команды:

let arr = [1, 2, 3]
arr.push(4)
arr.unshift(0)
arr // [0, 1, 2, 3, 4]

Как видно из этих строчек, метод push добавляет элемент в конец коллекции, а unshift - в конец.

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

let arr = [0, 1, 2, 3, 4]
arr.pop(4)
arr.shift(0)
arr // [1, 2, 3]

pop - вставить в начало, shift - удалить первый элемент

Методы push/pop выполняются быстро, а методы shift/unshift – медленно.

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

Как-то давно я наткнулся на видео в ТикТоке, где парня, который работал в гугл, просят назвать 10 методов работы с массива. И на мое удивление, он вспомнил ровно те же, что и я. Но 10 я вам не назову, да они нам особо и не нужны, поэтому вот Вам 6 основных методов работы с массивами, которая значительно чаще будут встречаться Вам на практике

1. forEach

   Данный метод перебирает все элементы массива, и в callback'е мы пишем логику, что нужно сделать с каждым элементом массива

const arr = [1, 2, 3]
arr.forEach( (element, index, arr) => {
  console.log(element)
  console.log(index)
  console.log(arr)
})

// Вывод в консоль первой итерации
1
0
[1, 2, 3]
// и т.д.

Как мы видим, callback-функция может принимать 3 аргумента:

1. element - значение самого итерируемого элемента

2. index - индекс итерируемого элемента

3. arr - сам итерируемый массив

На практике, последний аргумент опускается в 99.99% случаев. Второй аргумент - index - используется в зависимости от ситуации, если вам нужно получить индекс, кроме значения, то вот вам готовый вариант. Но на практике я так же очень редко где это встречал. Но первый аргумент нельзя пропустить, потому что это "никнейм" элемента массива, который в данный момент итерируется

Поэтому мы в 95% случаев Вам нужно будет следующее

const arr = [1, 2, 3]
arr.forEach( element => {
  console.log(element)
})
// Вывод в консоль первой итерации
1
// и т.д.

2. Map

Метод map возвращает нам новый массив с видоизмененными данными. Принимает все те же 3 аргумента

const arr = [1, 2, 3]
const arrString = arr.map( element => {
 return element.toString()
})
const arrString2 = arr.map( element => element.toString())

arrString // ["1", "2", "3"]
arrString2 // ["1", "2", "3"]

В результате, в константах arrString и arrString2 мы получим одно и тоже. Важно помнить, что в данном методе мы обязательно должны что-то return'уть. Иначе получим undefined. Напиши в комментариях, почему arrString2 получился у нас правильным, ведь у нас нет ключевого слова return??

3. Filter

Для фильтрации массива по какому бы то ни было признаку используется метод filter. Он так же принимает в аргументы element, index, arr. Callback-функция данного метода возвращает true или false, что говорит методу filter нужно ли добавлять элемент в новый результирующий массив или нет

const arr = [1, 2, 3]
const result = arr.filter( element => element >= 2)
result // [1, 2]

4. Find

Метод find, в целом по синтаксису схож с методом filter, с одной лишь разницей, что он возвращает первый элемент удовлетворяющий условию

const arr = [1, 1, 1, 3]
const result = arr.find( element => element === 1)
result // 1

5. FindIndex

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

const arr = [1, 1, 1, 3]
const result = arr.findIndex( element => element === 1)
result // 0

6. Reduce

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

const arr = [1, 2, 3, 14]
const result = arr.reduce( (sum, element) => sum + element, 0)
result // 20
const result2 = arr.reduce( (sum, element) => sum + element, -20)
result2 // 0

С этим методом дела обстоят чуточку сложнее, чем с остальными. Сам метод принимает 2 параметра, собственно callback, а так же инициируемое значение. Инициируемое значение - то значение, в нашем случае суммы всех элементов массива, с которого начинается отсчет.

А сам callback принимает так же 2 аргумента, это sum - динамическое значение, изменяемое после каждого цикла. Для простоты понимания, в нашем случае sum, перед первым циклом будет равно 0 в первом случае, и -20 во втором. После каждой итерации он будет менять свое значение в зависимости от условия в теле функции.

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