Массивы: введение

При создании электронного магазина, нужно работать со списком товаров. Для хранения такого списка удобнее всего использовать массив.

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

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

Например, при создании электронного магазина нужно хранить список товаров - для таких задач и придуман массив.

Объявление

Синтаксис для создания нового массива — квадратные скобки со списком элементов внутри. Например, создадим массив fruits с тремя элементами:

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

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

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

alert(fruits[0]); // Яблоко
alert(fruits[1]); // Апельсин
alert(fruits[2]); // Слива

Элемент можно всегда заменить:

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

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

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

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

alert(fruits.length); // 3

Через alert можно вывести и массив целиком. При этом его элементы будут перечислены через запятую:

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

alert(fruits); // Яблоко,Апельсин,Груша

В массиве может храниться любое число элементов любого типа. В том числе, строки, числа, объекты и т.п.:

// микс значений
var arr = [ 1, function(a) { alert(a) }, 'Имя', { name: 'Петя' }, true ];

// получить функцию из массива и тут же вызвать
arr[1]("тест");

var fruits = ["Яблоко", "Груша", "Слива"];

var lastItem = goods[goods.length-1]; // последний элемент

goods[goods.length] = 'Компьютер'

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

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

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

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

Например, стеком является колода карт, в которую новые карты кладутся сверху, и берутся — тоже сверху.

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

Конец массива

pop

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

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

alert( fruits.pop() ); // удалили "Груша"

alert(fruits); // Яблоко, Апельсин

push

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

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

fruits.push("Груша");

alert(fruits); // Яблоко, Апельсин, Груша

Является полным аналогом fruits[fruits.length] = ....

Начало массива

shift

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

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

alert( fruits.shift() ); // удалили Яблоко

alert(fruits); // Апельсин, Груша

unshift

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

var fruits = ["Апельсин", "Груша"];

fruits.unshift('Яблоко');

alert(fruits); // Яблоко, Апельсин, Груша

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

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

fruits.push("Апельсин", "Персик");
fruits.unshift("Ананас", "Лимон");

// результат: ["Ананас", "Лимон", "Яблоко", "Апельсин", "Персик"]

Джаз, Блюз
Джаз, Блюз, Рок-н-Ролл
Джаз, Классика, Рок-н-Ролл
Классика, Рок-н-Ролл
Рэп, Регги, Классика, Рок-н-Ролл

var styles = ["Джаз", "Блюз"];
styles.push("Рок-н-Ролл");
styles[styles.length-2] = "Классика";
alert( styles.shift() );
styles.unshift( "Рэп", "Регги ");

var arr = ["Яблоко", "Апельсин", "Груша", "Лимон"];

var rand = min + Math.floor( Math.random() * (max+1-min) );

var arr = ["Яблоко", "Апельсин", "Груша", "Лимон"];

var rand = Math.floor( Math.random() * arr.length );

alert(arr[rand]);

var calculator = { 
  ... ваш код...
}

calculator.readValues(3); // ввод: 1, 2, 5
alert( calculator.sum() ); // результат: 8
alert( calculator.mul() ); // результат: 10

Внутреннее устройство массива

Методы push/pop выполняются быстро, а shift/unshift - медленно. Почему так?

Чтобы понять, почему работать с концом массива - быстрее, чем с его началом, посмотрим как массив устроен внутри.

Как мы уже говорили, массив - это «шкаф с нумерованными ячейками». Фактически, массив — это объект, где в качестве ключей выбраны цифры, с дополнительными методами и свойством length.

Так как это объект, то никто не мешает сделать следующее:

var fruits = []; // создать массив

fruits[99999] = 5; // присвоить свойство с любым номером

fruits.age = 25; // назначить свойство со строковым именем

.. Но массивы для того и придуманы в JavaScript, чтобы удобно работать именно с упорядоченными, нумерованными данными. Для этого в них существуют специальные методы и свойство length.

Как правило, нет причин использовать массив как обычный объект, хотя технически это и возможно.

Влияние на быстродействие

Операция shift выполняет два действия:

1. Удалить элемент в начале.
2. Обновить внутреннее свойство length.

При этом, так как все элементы находятся в своих ячейках, просто очистить ячейку с номером 0 недостаточно. Нужно еще и переместить все ячейки на 1 вниз (красным на рисунке подсвечены изменения):

*!*fruits.shift();*/!* // убрать 1 элемент с начала

Чем больше элементов в массиве, тем дольше их перемещать.

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

У методов push/pop таких проблем нет. Для того, чтобы удалить элемент, метод pop очищает ячейку и укорачивает length.

*!*fruits.pop();*/!*  // убрать 1 элемент с конца

Аналогично работает push.

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

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

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

for (var i=0; i<fruits.length; i++) {
  alert(fruits[i]);
}

Особенности работы length

Используем length для укорачивания массива

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

Но есть один фокус, который можно провернуть. Дело в том, что при уменьшении length массив укорачивается. Причем этот процесс необратимый, т.е. даже если потом вернуть length обратно — значения не восстановятся:

var arr = [0, 1, 2, 3] 

arr.length = 2; // укоротить до 2 элементов, т.е [0,1]
arr.length = 4; // вернуть `length` (в тестовых целях)

alert(arr[3]); // значение исчезло

Самый простой способ очистить массив — это arr.length=0.

length = последний индекс + 1

Свойство length - не количество элементов массива, а последний индекс + 1. Так уж оно устроено.

Это позволяет разрешить дилемму «чему равно length если присвоена одна ячейка с номером 1000?». Конечно же, 1001.

var arr = [];
arr[1000] = true;

alert(arr.length); // *!*1001*/!*

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

Еще о создании массивов

new Array()

Существует еще один синтаксис для создания массива:

var arr = new Array("Яблоко", "Груша", "и т.п.");

Он редко используется, т.к. квадратные скобки [] короче.

Кроме того, у него есть одна особенность. Вызов new Array(number) с единственным аргументом — числом создает массив без элементов, но с заданной длиной.

var arr = new Array(2,3) // создает массив [2, 3]

arr = new Array(2) // создаст массив [2] ?

alert(arr[0]) // нет! у нас массив без элементов, длины 2

Что же такое этот «массив без элементов, но с длиной»? Как такое возможно?

Оказывается, очень даже возможно и соответствует объекту {length: 2}. Получившийся массив ведёт себя так, как будто его элементы равны undefined.

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

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

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

var matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

alert(matrix[1][1]); // центральный элемент

Итого

Массивы существуют для работы с упорядоченным набором элементов.

Объявление:

// предпочтительное
var arr = [ элемент1, элемент2... ];

// new Array
var arr = new Array( элемент1, элемент2...);;

При этом new Array(число) создаёт массив заданной длины, без элементов. Чтобы избежать ошибок, предпочтителен первый синтаксис.

Свойство length — длина массива. Если точнее, то последний индекс массива плюс 1. Если её уменьшить вручную, то массив укоротится. Если length больше реального количества элементов, то отсутствующие элементы равны undefined.

Массив можно использовать как очередь или стек.

Операции с концом массива:

• arr.push(элемент1, элемент2...) добавляет элементы в конец.
• var elem = arr.pop() удаляет и возвращает последний элемент.

Операции с началом массива:

• arr.unshift(элемент1, элемент2...) добавляет элементы в начало.
• var elem = arr.shift() удаляет и возвращает первый элемент.

Эти операции перенумеровывают все элементы, поэтому работают медленно.

В следующей главе мы рассмотрим другие методы для работы с массивами.

arr = [ "test", 2, 1.5, false ];

find(arr, "test"); // 0
find(arr, 2); // 1
find(arr, 1.5); // 2

find(arr, 0); // -1

function find(array, value) {

  for(var i=0; i<array.length; i++) {
    if (array[i] == value) return i;
  }
   
  return -1;
}

function find(array, value) {
  if (array.indexOf) { // если метод существует
    return array.indexOf(value);
  }

  for(var i=0; i<array.length; i++) {
    if (array[i] === value) return i;
  }
   
  return -1;
}

var arr = ["a", -1, 2, "b"];

var index = find(arr, 2);

alert(index);

// создаем пустой массив и проверяем поддерживается ли indexOf
if ( [].indexOf ) { 

  var find = function(array, value) {
    return array.indexOf(value);
  }

} else {
  var find = function(array, value) {
    for(var i=0; i<array.length; i++) {
      if (array[i] === value) return i;
    }
   
    return -1;
  }

}

var arr = [5, 4, 3, 8, 0];

var filtered = filterRange(arr, 3, 5);
// теперь filtered = [5, 4, 3]
// arr не изменился

var arr = [1, 2, 3, 4, 5, 6, 7]

var res = filter(arr, function(a) { return a>=3 && a <= 5; });

alert(res); // результат: 3, 4, 5

Задаче ниже — «на подумать», она не обязательна.

getMaxSubSum([-1, *!*2, 3*/!*, -9]) = 5 (сумма выделенных)
getMaxSubSum([-1, 2, 3, -9, *!*11*/!*]) = 11 
getMaxSubSum([-2, -1, *!*1, 2*/!*]) = 3
getMaxSubSum([*!*100*/!*, -9, 2, -3, 5]) = 100
getMaxSubSum([*!*1, 2, 3*/!*]) = 6 (неотрицательные - берем всех)
getMaxSubSum([-1, -2, -3]) = 0 (все отрицательные, не берем ничего)

// Начиная с -1:
-1
-1 + 2
-1 + 2 + 3
-1 + 2 + 3 + (-9)
-1 + 2 + 3 + (-9) + 11

// Начиная с 2:
2
2 + 3
2 + 3 + (-9)
2 + 3 + (-9) + 11

// Начиная с 3:
3
3 + (-9)
3 + (-9) + 11

// Начиная с -9
-9
-9 + 11

// Начиная с -11
-11

function getMaxSubSum(arr) {
  var maxSum = 0; // если совсем не брать элементов, то сумма 0

  for(var i=0; i<arr.length; i++) {
    var sumFixedStart = 0;
    for(var j=i; j<arr.length; j++) {
      sumFixedStart += arr[j];
      maxSum = Math.max(maxSum, sumFixedStart);
    }
  }

  return maxSum;
}

alert( getMaxSubSum([-1, 2, 3, -9]) ); // 5
alert( getMaxSubSum([-1, 2, 3, -9, 11]) ); // 11
alert( getMaxSubSum([-2, -1, 1, 2]) ); // 3
alert( getMaxSubSum([1, 2, 3]) ); // 6
alert( getMaxSubSum([100, -9, 2, -3, 5]) ); // 100

function getMaxSubSum(arr) {
  var maxSum = 0, partialSum = 0;
  for (var i=0; i<arr.length; i++) {
    partialSum += arr[i];
    maxSum = Math.max(maxSum, partialSum);
    if (partialSum < 0) partialSum = 0;
  }
  return maxSum;
}


alert( getMaxSubSum([-1, 2, 3, -9]) ); // 5
alert( getMaxSubSum([-1, 2, 3, -9, 11]) ); // 11
alert( getMaxSubSum([-2, -1, 1, 2]) ); // 3
alert( getMaxSubSum([100, -9, 2, -3, 5]) ); // 100
alert( getMaxSubSum([1, 2, 3]) ); // 6
alert( getMaxSubSum([-1, -2, -3]) ); // 0