2.3.5 Подробнее о работе с массивами и разнице между копией и клоном

Изображение из открытых источников

В предыдущих статьях мы рассматривали переменные в JS: их объявление и присваивание значений. В частности, я упоминал о массивах.

В этой статье посмотрим как с ними работать.

Итак, массив в коде записывается в квадратных скобках и может иметь перечисление элементов. Объект записывается в фигурных скобках и всегда имеет ключ. Но на самом деле массив это тот же объект, у которого ключ нам не показывается в явном виде и имеет определенные правила определения: это только целочисленные значения.

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

// масив
var a = [0, 1, 2, 3, 4];

// объект
var a = {0: 1, 1: 2, 2: 3, 3: 4};

Массив можно задать двумя способами:

// Простой способ
var a = [0, 1, 2, 3, 4];

// Сложный способ
var a = new Array(5);

Второй вариант создает массив на 5 элементов. Причем это только "резервирование" количества элементов.

Получение значения из массива делается очень просто:

console.log(a[4]);
console.log(b[4]);

В консоли получим значение:

4
undefined

Обратите внимание, что массив в данном случае можно рассматривать как набор объявленных переменных с не присвоенным значением: значение вроде бы есть, но тип undefined. А так, как "переменные" объявлены (элементы массива в количестве пяти штук уже объявлены), то мы можем не только выводить, но и присваивать им значения:

var a = new Array(5);
a[1] = 2;
a[4] = 111;
console.log(a);

Как видно, элементы 0, 2 и 3 не объявлены, но подразумевается, что они есть.

Итак зачем нам сложный способ, если можно записать в одну строку? Это может пригодиться, когда потребуется иметь подготовленный массив. К примеру, для игры в крестики-нолики. Сравните сами:

Сейчас я получил двумя способами поле 3*3 клетки для игры в крестики-нолики, где undefined - возвращаемое значение для клетки, на которой пока ничего нет. a_1_1 и b_1_1 выыодят undefined: это центральная клетка на поле.

Это пример для поля 3*3. Казалось бы не зачем выделываться. Но если потребуется делать "поле" к примеру 20*60 для тетриса, то это будет уже видимое упрощение реализации и уменьшение кода.

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

Идем дальше. Как обращаться к элементу, проверять его существование и присваивать значение - выяснили. Что же можно делать с массивами?

1. Определение длины массива.

var a = [0, 1, 2, 3, 4];
console.log(a.length);

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

console.log(a[a.length - 1]);

2. Добавление элемента в конец массива

var a = [0, 1, 2, 3, 4];
console.log(a);
a.push(111);
console.log(a);

В консоли будет выведено два массива. Сначала "0, 1, 2, 3, 4", потом "0, 1, 2, 3, 4, 111".

3. Удаление последнего элемента

var a = [0, 1, 2, 3, 4];
console.log(a);
a.pop();
console.log(a);

В консоли будет выведено два массива. Сначала "0, 1, 2, 3, 4", потом "0, 1, 2, 3".

4. Добавление первого элемента

var a = [0, 1, 2, 3, 4];
console.log(a);
a.unshift(-1);
console.log(a);

В консоли будет выведено два массива. Сначала "0, 1, 2, 3, 4", потом "-1, 0, 1, 2, 3, 4".

5. Удаление первого элемента

var a = [0, 1, 2, 3, 4];
console.log(a);
a.shift();
console.log(a);

В консоли будет выведено два массива. Сначала "0, 1, 2, 3, 4", потом "1, 2, 3, 4".

5. Удаление элементов с заданной позиции

var a = [0, 1, 2, 3, 4];
a.splice(1, 1);
console.log(a);
var b = [0, 1, 2, 3, 4];
a.splice(1, 3);
console.log(a);

Важно помнить, что позиция считается с нуля! В консоли будет выведено два массива. Сначала "0, 2, 3, 4", потом "0, 4".

6. Определение индекса элемента в массиве

var a = [0, 1, 2, 3, 4];
console.log(a.indexOf(2));
console.log(a.indexOf(111));

В консоли мы увидим сначала 2 : значение "2" в массиве действительно имеет индекс 2. А затем я попытался найти элемент со значением "111", которого очевидно, что нет. Ответ будет -1!

7. Есть разница между копией и клоном.

Ну и наконец самое сложное для восприятия по началу вникания в этот язык и логику работы с ним. Помню, как столкнулся в первый раз - теперь не знаю как раззабыть ЭТО ощущение.

В JS у массивов существует такой метод как slice, создающий клон массива. Дело все в том, что объекты в JS (а массив на самом деле с точки зрения JS это тоже объект) не копируются как обычные переменные:

var a = 10;
var b = a;
console.log({a: a, b: b});
a = 11;
console.log({a: a, b: b});

В этом примере оба вывода будут правильными - 10 и 10, и потом 11 и 10, т.к. переменную a переопределили в 11.

Если сделать такую же операцию с массивом, то увидим следующее:

Обратить внимание тут нужно на значение clone и copy до добавления элемента и после добавления

Переменную copy я объявил как копию от mainArray. И все изменения в mainArray отображаются в copy.

Все статьи попадают в "Оглавление канала". Не пропускаем новости!