Использование массивов в JS

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

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

Чтобы создать пустой массив:

var fruits = [];

В скобках мы можем указать начальные значения элементов:

var fruits = ["Яблоко", "Апельсин", "Слива"];

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

var fruits = ["Яблоко", "Апельсин", "Слива"];
fruits[0]; // Яблоко
fruits[1]; // Апельсин
fruits[2]; // Слива

Мы можем заменить элемент:

fruits[2] = 'Груша'; // теперь ["Яблоко", "Апельсин", "Груша"]

…Или добавить новый к существующему массиву:

fruits[3] = 'Лимон'; // теперь ["Яблоко", "Апельсин", "Груша", "Лимон"]

Общее число элементов массива содержится в его свойстве length:

var fruits = ["Яблоко", "Апельсин", "Слива"];
fruits.length; // 3

В массиве могут храниться элементы любого типа. В примере ниже элемент с индексом 0 это строка, с индексом 1 это число, а с индексом 2 - boolean значение.

var fruits = ["Яблоко", 5, true];

Методы pop/push, shift/unshift.

pop
Удаляет последний элемент из массива:

var fruits = ["Яблоко", "Апельсин", "Слива"];
fruits.pop(); // Теперь ["Яблоко", "Апельсин"];

push
Добавляет элемент в конец массива:

var fruits = ["Яблоко", "Апельсин"];
fruits.push("Слива"); // Теперь ["Яблоко", "Апельсин", "Слива"];

shift
Удаляет из массива первый элемент:

var fruits = ["Яблоко", "Апельсин"];
fruits.shift(); // Теперь ["Апельсин"];

unshift
Добавляет элемент в начало массива:

var fruits = ["Яблоко", "Апельсин"];
fruits.unshift("Слива"); // Теперь ["Слива", "Яблоко", "Апельсин"];

Многомерные массивы

Массивы могут содержать элементы, которые тоже являются массивами. Это можно использовать для создания многомерных массивов, например, для хранения матриц:

var matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];
matrix[1][1]; // 5, центральный элемент

Перебор элементов

Одним из самых старых способов перебора элементов массива является цикл for по цифровым индексам:

var fruits = ["Яблоко", "Апельсин", "Груша"];
for (var i = 0; i < fruits.length; i++) {
  arr[i];
}

Применяем массивы в Canvas.

На прошлом занятии мы вывели ряд из елей разной высоты. Давайте сделаем каждый из рядом разного цвета. Цвета будут храниться в массиве. Создадим переменную colors, которая будет содержать 3 цвета для уровней елей и один для основы:

var colors = ['#1CAC78', '#44944A', '#1E5945', 'brown'];

В функции добавим 4 параметр - цвет. Теперь его мы будем подставлять.

function drawTriangle(y1, y2, y3, color){
  context.fillStyle = color;
  context.beginPath();
  context.moveTo(30 + i, y1);
  context.lineTo(10 + i, y2);
  context.lineTo(50 + i, y3);
  context.closePath();
  context.fill();
}

Тогда для первого цикла код будет выглядеть следующим образом:

for (var i = 0; i < obj.width - 50; i+=40) {
  if(counter % 2 === 0){
    drawTriangle(20, 40, 40, colors[0]); // Обращаемся к первому элементу в массиве и передаем его в функцию
  }
  counter = counter + 1;
}

Для второго, третьего и четвертого циклов:

do {
  drawTriangle(40, 60, 60, colors[1]); // Обращаемся ко второму элементу в массиве и передаем его в функцию
  i=i+40; // шаг приращения
} while(i < obj.width - 50)
 
while(i < obj.width - 50) {
  drawTriangle(60, 80, 80, colors[2]); // Обращаемся к третьему элементу в массиве и передаем его в функцию
  i=i+40; // шаг приращения
} 
 
while(i < obj.width - 50) {
  context.fillStyle = colors[3];
  context.fillRect(25 + i, 80, 10, 15);
  i=i+40; // шаг приращения
}

Весь итоговый код представлен ниже.

Направление:

JavaScript