Массивы

JavaScript простым языком

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

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

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

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)

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

2. Думаешь ответ 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

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