Массивы

Упустил очень важный момент, без которого дальше ехать сложно. Речь пойдет о массивах.

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

Чтобы было проще понять что это и зачем это нужно я приведу пример. Представьте, что у нашего героя будет несколько видов оружия, а возможно, мы сделаем так, что можно будет "подбирать" новое оружие. К примеру, у нашего героя имеется: меч, секира, булава, лук. Где хранить эту информацию?

Именно для таких случаев и придумали массивы. Массив описывается следующим образом:

const arr = new Array();
const arr2 = [];

Существует 2 способа записи. Но я рекомендую тебе использовать всегда второй способ. И я это не чисто моя рекомендация, а лучшая практика среди разработчиков.

Массивы – это списки. При этом списки из чего угодно. Это может быть список из строковых значений:

const arr = ['ручка', 'карандаш'];

цифровых значений:

const arr = [1, 2, 3, 4, 5];

из объектов:

const arr = [
    {name: 'Name 1', value: 1},
    {name: 'Name 2', value: 2}
];

и из всего того, что ты можешь придумать.

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

Длина массива

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

const arr = ['ручка', 'карандаш', 'ластик'];

arr.lenght;// 3

Получение элемента из массива

Каждый элемент массива имеет свой идентификатор(индекс). Это означает, что, фактически каждый элемент в массиве нумеруется. Нумерация начинается не с единицы, как ты привык в обычной жизни, а с нуля. Чтобы выбрать нужный элемент из массива нужно указать его индекс:

const arr = ['ручка', 'карандаш', 'ластик'];

arr[0]; //ручка
arr[1]; //карандаш
arr[2]; //ластик
arr[3]; //undefined

Изменение элемента в массиве

Изменить элемент массива очень просто. Выбираешь элемент по индексу и присваиваешь нужное значение. Вот и все:

let arr = ['ручка', 'карандаш', 'ластик'];

arr[0] = 'пластелин';

console.log(arr); // ['пластелин', 'карандаш', 'ластик']

Добавление элемента в массив

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

const arr = ['вилка'];

arr[1] = 'ложка';

arr; // ['вилка', 'ложка']

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

const arr = [];
arr[0] = 'трололо';
arr[1] = 'лол';
arr[24] = 'кек';

Ты просто можешь по ошибке(или специально) вписать индекс больше количества элементов в массиве. Тут кроется "свинья", так как если после кода выше запросить длину массива, то ты офигеешь, вместо ожидаемого значения 3, ты увидишь значение 25:

const arr = [];
arr[0] = 'трололо';
arr[1] = 'лол';
arr[24] = 'кек';

arr.length; //25

Вся загвоздка в том, что length на самом деле выдает не считает количество элементов, а просто выдает наибольший цифровой индекс в массиве и прибавляет к нему единицу.

Следующий способ добавления можно назвать классическим:

const arr = [];

arr.push('вилка');
arr.push('ложка');

arr; //['вилка', 'ложка']

Метод push добавляет элементы в конец массива. Это является классической ситуацией, когда мы добавляем элемент в конец массива, но бывают ситуации, когда требуется вставить элемент в начало массива. Для данной операции существует метод unshift:

const arr = ['ручка', 'карандаш', 'ластик'];

arr.unshift('циркуль');

arr;// ['циркуль', 'ручка', 'карандаш', 'ластик']

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

Для удаления элементов существует тоже не один способ.

Для того чтобы удалить элемент из конца массива нужно воспользоваться методом pop:

const arr = ['ручка', 'карандаш', 'ластик'];

arr.pop();

arr;// ['ручка', 'карандаш']

Интересным моментом является то, что метод pop возвращает удаленный элемент, т.е. если ты хочешь узнать какой элемент был удален, то просто запиши результат метода pop в переменную:

const arr = ['ручка', 'карандаш', 'ластик'];

const delElement = arr.pop(); // 'ластик'

arr;// ['ручка', 'карандаш']

Для удаления элемента из начала массива существует метод shift, который подобно pop возвращает удаленный элемент:

const arr = ['ручка', 'карандаш', 'ластик'];

const delElement = shift(); // 'ластик'

arr;// ['ручка', 'карандаш']

Перебор элементов массива

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

Для этого можно использовать циклы for или встроенный метод forEach.

Цикл for с массивом (является старым способом):

const arr = ['ручка', 'карандаш', 'ластик'];

for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

Надеюсь код понятен. Мы запускаем цикл for с индекса 0 и бежим до значения arr.length(не включая его), т.е. до конца массива. И выводим значение каждого элемента, подставляя значение переменной i в качестве индекса массива.

Так же можно воспользоваться циклом for ... of:

const arr = ['ручка', 'карандаш', 'ластик'];

for (let el in arr) {
    console.log(el);
}

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

Также можно перебрать массив с помощью встроенного метода массива forEach:

const arr = ['ручка', 'карандаш', 'ластик'];

arr.forEach((elem, index) => {
   console.log(elem);
});

Этот метод требует передать функцию, которая будет выполнятся для каждого элемента массива. В переданной функции, в качестве первого аргумента elem будет подставляться текущий элемент массива, а в качестве второго index будет подставляйся индекс элемента.

Почему не стоит использовать new Array()

В самом начале статьи я рекомендовал для создания массива использовать [], но никак не new Array() .

Первая причина не использовать данный способ очень простой. Сравни и поймешь:

const arr = ['ручка', 'карандаш'];

const arr2 = new Array('ручка', 'карандаш');

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

Вторая причина не использовать данный способ намного страшнее. Посмотри код:

const arr = new Array(50);

console.log(arr); //что выведет? (1)
console.log(arr.length); //что выведет? (2)

Ты наверное думаешь, что там выведется [50]?
Ты думаешь, что выведет 1?

А вот и нет... Если new Array() принимает только один числовой аргумент, то он устанавливает это число в длину массива. Сам же не содержит ни одного элемента. Вызов arr[0] выдаст тебе значение undefined:

const arr = new Array(50);

console.log(arr); //[empty x 50]
console.log(arr[0]); //undefined
console.log(arr.length); //50

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