Массивы

Массив - это структура которая содержит элементы строго по порядку. Для создания массива использоются квадратные [] скобки. Обращаться к элементам можно через их индекс(Позиция), начинается от 0.

const arr = [1,2,3,8,9]; // все в квадратныых скобках - массив

// Мы выбрали 0 индекс - первый элемент
console.log(arr[0]); // 1

// Так же работают и строки.
console.log('012345'[4]); // 4
// мы указали строку и сразу рядом использовали [] скобки, что бы указать индекс в этой же строке.

length в массивах

length состоит из последнего индекса указываемого массива и прибавляет + 1.

const arr = [1,2,3,8,9];  // индекс последнего элемента 4
// что сделал length? Он взял последний индекс и прибавил к нему 1 
console.log(arr.length); // выдаст нам 5

Немного сломаем length для примера его работы:

const arr = [1,2,3,8,9];  // мы имеем все тот же массив
arr[99] = 0; // присваиваем на позицию 99 ноль. У нас такого индекса нет, но теперь он появится со значением 0

console.log(arr.length); // выдает 100, потому что length взяло последний индекс и +1 прибавило.
console.log(arr); // [ 1, 2, 3, 8, 9, <94 empty items>, 0 ] - вот как выглядит наш массив. 6 элементов и 94 пустых ячейки.
// у нас было 5 элементов на позициях от 0 до 4, потом идет 94 пустых ячейки и на 99 у нас наш 0. 

А так же помним, что мы можем массиву задать ключ:значение . Так вот в таком случае индекс не будет учитываться как часть массива и его размер не увеличится.

const arr = [1];
arr[1] = 2;
arr['abc'] = 3;

console.log(arr.length) // 2
console.log(arr) // [ 1, 2, abc: 3 ]

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

pop()

pop( ) - удаляет последний элемент из массива.

const arr = [1,2,3,4,5];
arr.pop();
console.log(arr); // [ 1, 2, 3, 4 ];

push()

push( ) - добавляет элемент в конец массива.

const arr = [1,2,3,4,5];
arr.push(9);
console.log(arr); // [ 1, 2, 3, 4, 5, 9];

shift() и unshift(...items)

shift( ) - извлекает элемент из начала массива.
unshift( ) - добавляет элемент в начало.
Эти методы в реальных проектах используются редко, так как после их использования индексы смещаются.

const arr = [0,1,2,3,4,5];
arr.shift();

console.log(arr); // [1, 2, 3, 4, 5] - Теперь под индексом 0 у нас 1, а не 0 как было.

const arr = [0,1,2,3,4,5];
arr.unshift(10);

console.log(arr) //  [10, 0, 1, 2, 3, 4, 5]; - теперь под индексом 0 у нас 10, а не 0.

split()

split(тут разделитель) - разбивает строчку на массив строк путём разделения указанным разделителем.

const str = 'п,р,и,в,е,т';
const products = str.split(','); // здесь мы указали (,) и если строки будут через (,) то они образуют массив
console.log(products); // [ 'п', 'р', 'и', 'в', 'е', 'т' ]

Мы сформировали на основании строки, массив, так же мы можем сделать и на оборот с помощью join( ).

join()

join(тут разделитель) - объеденяет элементы массива.

const str = 'п,р,и,в,е,т';
const products = str.split(',');
// join() - собрал массив в строку через '' путсую строку, что в итоге нам дало строчку 'привет'
console.log(products.join('')); // привет
// Еще примерчик. Поставим точку как разделитель.
console.log(products.join('.')); // п.р.и.в.е.т

sort()

sort( ) - метод сортировки. Eсли мы его просто применим в таком виде .sort( ) то он отсортирует все по алфавиту, если это массив из строчных элементов

const arr = ['b','s','c','g','t','a','h','u'];
console.log(arr.sort());
/*  Получим такой массив по алфовиту
[
  'a', 'b', 'c',
  'g', 'h', 's',
  't', 'u'
]
*/

А что будет если массив будет из цифр и чисел?

const arrNew = [2,13,26,8,10];
arrNew.sort();
console.log(arrNew); // вот что мы получим [10, 13, 2, 26, 8] - фишка в том, что sort все сортирует как строки.
 // Все числа начинающиеся с 1 (если бы был 0 - он был бы первым) встали на первое место далее сравниваются вторые числа
 // Идет 10 и 13. первыми сравниваются 1 и 1, далее 0 и 3, 0 меньше чем 3, по этому 10 впереди.
 // Далее идут все что начинается на 2, то есть сама 2.
 // Потом 26 и 8 - самое большое. Все отсортировалось как строки. по сути сравнивается каждая отдельная цифра от числа, а не число целиком.

Что бы избежать такого поведения и правильно сортировать цифры и числа:

// Для этого передадим в  sort( ) колбек функцию. Которая будет пары чисел проверять на их положение.
const arrNew = [2,13,26,8,10];
console.log(arrNew.sort(compareNum)) // [2, 8, 10, 13, 26] Все отсортировалось как нужно

function compareNum (a, b) {  // a - b это наши элементы массива.
        return a - b;  // таким образом мы проверяем положения числа.
 }
// если a < b тогда a - b = отрицательное число. a будет располагаться перед b в отсортированном массиве.
// если a === b тогда a - b = 0.  порядок a и b в отсортированном массиве будет сохранен.
// если a > b тогда a - b = будет положительное число. b будет располагаться перед a в отсортированном массиве.

/* 
Пример на нашем массиве.
2 - 13, равно -11, поэтому 2 идет перед 13.
13 - 26, равно -13, поэтому 13 идет перед 26.
26 - 8,равно 18, поэтому 8 идет перед 26.
26 - 10,равно 16, поэтому 10 идет перед 26.
итог [2, 8, 10, 13, 26]
*\

Перебираем массив с помощью for, forEach и for of

for

const arr = [1,2,3,4,5,6,7,8,9,10];
for (let i = 0; i < arr.length; i++) { // До тех пор пока i меньше arr.length( кол элементов в массиве)                                
    console.log(arr[i]); // Обращаемся к элементам нашего массива с помощью синтаксиса []. Сначала в i = 0 - мы обратимся к 1 элементу
    // потом  i++ (ув на 1 ед) и тогда уже обратимся ко второму элементу и так далее пока не выполнится условие. Пока не закончатся все элементы (i < arr.length) 
}

for of

for of работает только с массиво подобными сущностями мы можем перебрать массив, псевдомассив, строку и тд.. Так же у for of и for есть преимущество перед forEach. Здесь можно использовать breake и continue

const arr = [1,2,3,4,5,6,7,8,9,10];
for (let value of arr) {    // создаем переменную, в ней будет храниться каждый элемент массива, обычно называют ее value. Далее указываем массив в котором будем работать
    console.log(value); // выведем только до 7, Так как ниже мы использовали break
    if(value === 7) { // если value равно 7, мы используем break и цикл остановит свою работу.
    break;
    }
} 

forEach()

forEach( ) - фишка этого метода в том, что его можно подробнее настроить. forEach принимает в себя еще одну функцию, так как метод это функция то выходит, что наша функция внутри это - callback Так же метод forEach есть у псевдомассива получаемым с помощью querySelectorAll( )

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
arr.forEach(function (item, i, arr) { // callback функция может принимать в себя 3 аргумента
        // 1 - тот элемент, что перебираем
        // 2 - это номер по порядку (индекс)
        // 3 - это ссылка на тот массив который перебираем
        // наша функция внунтри будет выполняться для каждого элемента массива
        // forEach будет проходить по каждому элементу и применять эту функцию

        console.log(`${i + 1}: ${item} внутри массива ${arr}`);
});

Псевдомассивы

Псевдомассивы - это сруктура которая просто хранит данные по порядку! Без всяких методов и тд. Можно сказать, это более легковесный массив.
В псевдомассивах есть свойство length и на некоторых из них можно использовать forEach. Когда мы будем получать элементы со страницы, мы все будем получать в псевдомассивах.