renovations

1-js/4-data-structures/7-array/1-get-last-in-array/solution.md

@@ -0,0 +1,16 @@
+Последний элемент имеет индекс на `1` меньший, чем длина массива.
+
+Например:
+
+```js
+var fruits = ["Яблоко", "Груша", "Слива"];
+```
+
+Длина массива этого массива `fruits.length` равна `3`. Здесь "Яблоко" имеет индекс `0`, "Груша" -- индекс `1`, "Слива" -- индекс `2`. 
+
+То есть, для массива длины `goods`:
+
+```js
+var lastItem = goods[goods.length-1]; // получить последний элемент
+```
+

1-js/4-data-structures/7-array/1-get-last-in-array/task.md

@@ -0,0 +1,9 @@
+# Получить последний элемент массива
+
+[importance 5]
+
+Как получить последний элемент из произвольного массива?
+
+У нас есть массив `goods`. Сколько в нем элементов -- не знаем, но можем прочитать из `goods.length`. 
+
+Напишите код для получения последнего элемента `goods`.

1-js/4-data-structures/7-array/10-maximal-subarray/_js.view/solution.js

@@ -0,0 +1,10 @@
+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;
+}
+

1-js/4-data-structures/7-array/10-maximal-subarray/_js.view/test.js

@@ -0,0 +1,33 @@
+describe("getMaxSubSum", function() {
+  it("максимальная подсумма [1, 2, 3] равна 6", function() {
+    assert.equal( getMaxSubSum([1, 2, 3]), 6);
+  });
+
+  it("максимальная подсумма [-1, 2, 3, -9] равна 5", function() {
+    assert.equal( getMaxSubSum([-1, 2, 3, -9]), 5);
+  });
+
+  it("максимальная подсумма [-1, 2, 3, -9, 11] равна 11", function() {
+    assert.equal( getMaxSubSum([-1, 2, 3, -9, 11]), 11);
+  });
+
+  it("максимальная подсумма [-2, -1, 1, 2] равна 3", function() {
+    assert.equal( getMaxSubSum([-2, -1, 1, 2]), 3);
+  });
+
+  it("максимальная подсумма [100, -9, 2, -3, 5] равна 100", function() {
+    assert.equal( getMaxSubSum([100, -9, 2, -3, 5]), 100);
+  });
+
+  it("максимальная подсумма [] равна 0", function() {
+    assert.equal( getMaxSubSum([]), 0);
+  });
+
+  it("максимальная подсумма [-1] равна 0", function() {
+    assert.equal( getMaxSubSum([-1]), 0);
+  });
+
+  it("максимальная подсумма [-1, -2] равна 0", function() {
+    assert.equal( getMaxSubSum([-1, -2]), 0);
+  });
+});

1-js/4-data-structures/7-array/10-maximal-subarray/solution.md

@@ -0,0 +1,99 @@
+# Подсказка (медленное решение)
+Можно просто посчитать для каждого элемента массива все суммы, которые с него начинаются.
+
+Например, для `[-1, 2, 3, -9, 11]`:
+
+```js
+// Начиная с -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
+```
+
+Сделайте вложенный цикл, который на внешнем уровне бегает по элементам массива, а на внутреннем -- формирует все суммы элементов, которые начинаются с текущей позиции.
+
+# Медленное решение
+
+Решение через вложенный цикл:
+
+```js
+//+ run
+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
+```
+
+Такое решение имеет [оценку сложности](http://ru.wikipedia.org/wiki/%C2%ABO%C2%BB_%D0%B1%D0%BE%D0%BB%D1%8C%D1%88%D0%BE%D0%B5_%D0%B8_%C2%ABo%C2%BB_%D0%BC%D0%B0%D0%BB%D0%BE%D0%B5) O(n<sup>2</sup>), то есть при увеличении массива в 2 раза алгоритм требует в 4 раза больше времени. На больших массивах (1000, 10000 и более элементов) такие алгоритмы могут приводить к серьёзным "тормозам".
+
+# Подсказка (быстрое решение)
+
+Будем идти по массиву и накапливать в некоторой переменной `s` текущую частичную сумму. Если в какой-то момент s окажется отрицательной, то мы просто присвоим `s=0`. Утверждается, что максимум из всех значений переменной s, случившихся за время работы, и будет ответом на задачу.
+
+**Докажем этот алгоритм.**
+
+В самом деле, рассмотрим первый момент времени, когда сумма `s` стала отрицательной. Это означает, что, стартовав с нулевой частичной суммы, мы в итоге пришли к отрицательной частичной сумме -- значит, и весь этот префикс массива, равно как и любой его суффикс имеют отрицательную сумму.
+
+Следовательно, от всего этого префикса массива в дальнейшем не может быть никакой пользы: он может дать только отрицательную прибавку к ответу.
+
+# Быстрое решение
+
+```js
+//+ run
+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
+```
+
+Информацию об алгоритме вы также можете прочитать здесь: [](http://e-maxx.ru/algo/maximum_average_segment) и здесь: [Maximum subarray problem](http://en.wikipedia.org/wiki/Maximum_subarray_problem).
+
+Этот алгоритм требует ровно одного прохода по массиву, его сложность имеет оценку `O(n)`.

1-js/4-data-structures/7-array/10-maximal-subarray/task.md

@@ -0,0 +1,28 @@
+# Подмассив наибольшей суммы
+
+[importance 2]
+
+На входе массив чисел, например: `arr = [1, -2, 3, 4, -9, 6]`.
+
+Задача -- найти непрерывный подмассив `arr`, сумма элементов которого максимальна. 
+
+Ваша функция должна возвращать только эту сумму.
+
+Например:
+
+```js
+getMaxSubSum([-1, *!*2, 3*/!*, -9]) = 5 (сумма выделенных)
+getMaxSubSum([*!*2, -1, 2, 3*/!*, -9]) = 6
+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 (неотрицательные - берем всех)
+```
+
+Если все элементы отрицательные, то не берём ни одного элемента и считаем сумму равной нулю:
+
+```js
+getMaxSubSum([-1, -2, -3]) = 0
+```
+
+Постарайтесь придумать решение, которое работает за O(n<sup>2</sup>), а лучше за O(n) операций.

1-js/4-data-structures/7-array/2-add-item-to-array/solution.md

@@ -0,0 +1,6 @@
+Текущий последний элемент имеет индекс `goods.length-1`. Значит, индексом нового элемента будет `goods.length`:
+
+```js
+goods[goods.length] = 'Компьютер'
+```
+

1-js/4-data-structures/7-array/2-add-item-to-array/task.md

@@ -0,0 +1,7 @@
+# Добавить новый элемент в массив
+
+[importance 5]
+
+Как добавить элемент в конец произвольного массива?
+
+У нас есть массив `goods`. Напишите код для добавления в его конец значения "Компьютер".

1-js/4-data-structures/7-array/3-create-array/solution.md

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

1-js/4-data-structures/7-array/3-create-array/task.md

@@ -0,0 +1,23 @@
+# Создание массива
+
+[importance 5]
+
+Задача из 5 шагов-строк:
+<ol>
+<li>Создайте массив `styles` с элементами "Джаз", "Блюз".</li>
+<li>Добавьте в конец значение "Рок-н-Ролл"</li>
+<li>Замените предпоследнее значение с конца на "Классика". Код замены предпоследнего значения должен работать для массивов любой длины.</li>
+<li>Удалите первое значение массива и выведите его `alert`.</li>
+<li>Добавьте в начало значения "Рэп" и "Регги".</li>
+</ol>
+
+Массив в результате каждого шага:
+
+```js
+Джаз, Блюз
+Джаз, Блюз, Рок-н-Ролл
+Джаз, Классика, Рок-н-Ролл
+Классика, Рок-н-Ролл
+Рэп, Регги, Классика, Рок-н-Ролл
+```
+

1-js/4-data-structures/7-array/4-random-from-array/solution.md

@@ -0,0 +1,11 @@
+Для вывода нужен случайный номер от `0` до `arr.length-1` включительно.
+
+```js
+//+ run
+var arr = ["Яблоко", "Апельсин", "Груша", "Лимон"];
+
+var rand = Math.floor( Math.random() * arr.length );
+
+alert(arr[rand]);
+```
+

1-js/4-data-structures/7-array/4-random-from-array/task.md

@@ -0,0 +1,16 @@
+# Получить случайное значение из массива
+
+[importance 3]
+
+Напишите код для вывода `alert` случайного значения из массива:
+
+```js
+var arr = ["Яблоко", "Апельсин", "Груша", "Лимон"];
+```
+
+P.S. Код для генерации случайного целого от `min` to `max` включительно:
+
+```js
+var rand = min + Math.floor( Math.random() * (max+1-min) );
+```
+

1-js/4-data-structures/7-array/5-calculator-for-input/solution.md

@@ -0,0 +1,23 @@
+В решение ниже обратите внимание: мы не приводим `value` к числу сразу после `prompt`, так как если сделать `value = +value`, то после этого отличить пустую строку от нуля уже никак нельзя. А нам здесь нужно при пустой строке прекращать ввод, а при нуле -- продолжать.
+
+```js
+//+ run demo
+var numbers = [];
+
+while(true) {
+
+  var value = prompt("Введите число", 0);
+  
+  if (value === "" || value === null || isNaN(value)) break;
+
+  numbers.push(+value);
+}
+
+var sum = 0;
+for(var i=0; i<numbers.length; i++) {
+  sum += numbers[i];
+}
+
+alert(sum);
+```
+

1-js/4-data-structures/7-array/5-calculator-for-input/task.md

@@ -0,0 +1,13 @@
+# Создайте калькулятор для введённых значений 
+
+[importance 4]
+
+Напишите код, который: 
+<ul>
+<li>Запрашивает по очереди значения при помощи `prompt` и сохраняет их в массиве.</li>
+<li>Заканчивает ввод, как только посетитель введёт пустую строку, не число или нажмёт "Отмена".</li>
+<li>При этом ноль `0` не должен заканчивать ввод, это разрешённое число.</li>
+<li>Выводит сумму всех значений массива</li>
+</ul>
+
+[demo /]

1-js/4-data-structures/7-array/6-item-value/solution.md

@@ -0,0 +1,24 @@
+
+
+```js
+//+ run
+var arr = [1,2,3];
+
+var arr2 = arr; // (*)
+arr2[0] = 5;
+
+alert(arr[0]);
+alert(arr2[0]);
+```
+
+Код выведет `5` в обоих случаях, так как массив является объектом. В строке `(*)` в переменную `arr2` копируется ссылка на него, а сам объект в памяти по-прежнему один, в нём отражаются изменения, внесенные через `arr2` или `arr`.
+
+В частности, сравнение `arr2 == arr` даст `true`.
+
+Если нужно именно скопировать массив, то это можно сделать, например, так:
+
+```js
+var arr2 = [];
+for(var i=0; i<arr.length; i++) arr2[i] = arr[i];
+```
+

1-js/4-data-structures/7-array/6-item-value/task.md

@@ -0,0 +1,18 @@
+# Чему равен элемент массива?
+
+[importance 3]
+
+Что выведет этот код?
+
+```js
+var arr = [1,2,3];
+
+var arr2 = arr;
+arr2[0] = 5;
+
+*!*
+alert(arr[0]);
+alert(arr2[0]);
+*/!*
+```
+

1-js/4-data-structures/7-array/7-array-find/_js.view/solution.js

@@ -0,0 +1,11 @@
+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;
+}

1-js/4-data-structures/7-array/7-array-find/_js.view/test.js

@@ -0,0 +1,26 @@
+describe("find", function() {
+
+  describe("возвращает позицию, на которой найден элемент", function() {
+    it("в массиве [1,2,3] находит 1 на позиции 0", function() {
+      assert.equal( find([1, 2, 3], 1), 0);
+    });
+    it("в массиве [1,2,3] находит 2 на позиции 1", function() {
+      assert.equal( find([1, 2, 3], 2), 1);
+    }); 
+    it("в массиве [1,2,3] находит 3 на позиции 2", function() {
+      assert.equal( find([1, 2, 3], 3), 2);
+    });
+  });
+
+  it("если элемент не найден, возвращает -1", function() {
+    assert.equal( find([1,2,3], 0), -1);
+  });
+
+  it("отличает false или null от 0", function() {
+    assert.equal( find([false, true, null], 0), -1);
+  });
+
+  it("отличает 1 от true", function() {
+    assert.equal( find([1, 2, 3], true), -1);
+  });
+});

1-js/4-data-structures/7-array/7-array-find/solution.md

@@ -0,0 +1,61 @@
+Возможное решение:
+
+```js
+function find(array, value) {
+
+  for(var i=0; i<array.length; i++) {
+    if (array[i] == value) return i;
+  }
+   
+  return -1;
+}
+```
+
+Однако, в нем ошибка, т.к. сравнение `==` не различает `0` и `false`. 
+
+Поэтому лучше использовать `===`. Кроме того, в современном стандарте JavaScript существует встроенная фунция <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/indexOf">Array#indexOf</a>, которая работает именно таким образом. Имеет смысл ей воспользоваться, если браузер ее поддерживает.
+
+```js
+//+ run
+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);
+```
+
+... Но еще лучшим вариантом было бы определить `find` по-разному в зависимости от поддержки браузером метода `indexOf`:
+
+```js
+// создаем пустой массив и проверяем поддерживается ли 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;
+  }
+
+}
+```
+
+Этот способ - лучше всего, т.к. не требует при каждом запуске `find` проверять поддержку `indexOf`.

1-js/4-data-structures/7-array/7-array-find/task.md

@@ -0,0 +1,18 @@
+# Поиск в массиве
+
+[importance 3]
+
+Создайте функцию `find(arr, value)`, которая ищет в массиве `arr` значение `value` и возвращает его номер, если найдено, или `-1`, если не найдено.
+
+Например:
+
+```js
+arr = [ "test", 2, 1.5, false ];
+
+find(arr, "test"); // 0
+find(arr, 2); // 1
+find(arr, 1.5); // 2
+
+find(arr, 0); // -1
+```
+

1-js/4-data-structures/7-array/8-filter-range/_js.view/solution.js

@@ -0,0 +1,11 @@
+function filterRange(arr, a, b) {
+  var result = [];
+
+  for(var i=0; i<arr.length; i++) {
+    if (arr[i] >= a && arr[i] <= b) {
+      result.push(arr[i]);
+    }
+  }
+
+  return result;
+}

1-js/4-data-structures/7-array/8-filter-range/_js.view/test.js

@@ -0,0 +1,15 @@
+describe("filterRange", function() {
+  it("не меняет исходный массив", function() {
+    var arr = [5, 4, 3, 8, 0];
+  
+    filterRange(arr, 0, 10);
+    assert.deepEqual(arr, [5,4,3,8,0]);
+  });
+
+  it("оставляет только значения указанного интервала", function() {
+    var arr = [5, 4, 3, 8, 0];
+  
+    var result = filterRange(arr, 3, 5);
+    assert.deepEqual(result, [5,4,3]);
+  });
+});

1-js/4-data-structures/7-array/8-filter-range/solution.md

@@ -0,0 +1,29 @@
+# Алгоритм решения
+<ol>
+<li>Создайте временный пустой массив `var results = []`. </li>
+<li>Пройдите по элементам `arr` в цикле и заполните его.</li>
+<li>Возвратите `results`.</li>
+</ol>
+
+# Решение
+
+```js
+//+ run
+function filterRange(arr, a, b) {
+  var result = [];
+
+  for(var i=0; i<arr.length; i++) {
+    if (arr[i] >= a && arr[i] <= b) {
+      result.push(arr[i]);
+    }
+  }
+
+  return result;
+}
+
+var arr = [5, 4, 3, 8, 0];
+
+var filtered = filterRange(arr, 3, 5);
+alert(filtered);
+```
+

1-js/4-data-structures/7-array/8-filter-range/task.md

@@ -0,0 +1,17 @@
+# Фильтр диапазона
+
+[importance 3]
+
+Создайте фунцию `filterRange(arr, a, b)`, которая принимает массив чисел `arr` и возвращает новый массив, который содержит только числа из `arr` из диапазона от `a` до `b`. То есть, проверка имеет вид `a ≤ arr[i] ≤ b`. 
+Функция не должна менять `arr`.
+
+Пример работы:
+
+```js
+var arr = [5, 4, 3, 8, 0];
+
+var filtered = filterRange(arr, 3, 5);
+// теперь filtered = [5, 4, 3]
+// arr не изменился
+```
+

1-js/4-data-structures/7-array/9-eratosthenes-sieve/solution.md

@@ -0,0 +1,40 @@
+Их сумма равна `1060`.
+
+```js
+//+ run
+// шаг 1
+var arr = [];
+
+for (var i=2; i<100; i++) {
+  arr[i] = true
+}
+
+// шаг 2
+var p = 2;
+
+do {
+  // шаг 3
+  for (i=2*p; i<100; i+=p) {
+    arr[i] = false;
+  }
+
+  // шаг 4
+  for (i=p+1; i<100; i++) {
+    if (arr[i]) break;
+  }
+
+  p = i;
+} while (p*p < 100); // шаг 5
+
+// шаг 6 (готово)
+// посчитать сумму
+var sum = 0;
+for (i=0; i<arr.length; i++) {
+  if (arr[i]) {
+    sum += i;
+  }
+}
+
+alert(sum);
+```
+

1-js/4-data-structures/7-array/9-eratosthenes-sieve/task.md

@@ -0,0 +1,25 @@
+# Решето Эратосфена
+
+[importance 3]
+
+Целое число, большее `1`, называется *простым*, если оно не делится нацело ни на какое другое, кроме себя и `1`.
+
+Древний алгоритм "Решето Эратосфена" для поиска всех простых чисел до `n` выглядит так:
+
+<ol>
+<li>Создать список последовательных чисел от `2` до `n`: `2, 3, 4, ..., n`.</li>
+<li>Пусть `p=2`, это первое простое число.</li>
+<li>Зачеркнуть все последующие числа в списке с разницей в `p`, т.е. `2*p, 3*p, 4*p` и т.д. В случае `p=2` это будут `4,6,8...`.</li>
+<li>Поменять значение `p` на первое незачеркнутое число после `p`.</li>
+<li>Повторить шаги 3-4 пока <code>p<sup>2</sup> &lt; n</code>.</li>
+<li>Все оставшиеся незачеркнутыми числа -- простые.</li>
+</ol>
+
+Посмотрите также <a href="/files/tutorial/intro/array/sieve.gif">анимацию алгоритма</a>.
+
+Реализуйте "Решето Эратосфена" в JavaScript, используя массив.
+
+Найдите все простые числа до `100` и выведите их сумму.
+
+
+

1-js/4-data-structures/7-array/array-pop.svg

@@ -0,0 +1,68 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="329px" height="158px" viewBox="0 0 329 158" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
+    <title>Slice 1</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="array-pop" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <rect id="Rectangle-1" stroke="#9B9B9B" sketch:type="MSShapeGroup" x="0" y="79" width="37" height="54"></rect>
+        <rect id="Rectangle-2" stroke="#9B9B9B" sketch:type="MSShapeGroup" x="36" y="79" width="37" height="54"></rect>
+        <text id="0" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#000000">
+            <tspan x="15" y="110">0</tspan>
+        </text>
+        <text id="1" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#000000">
+            <tspan x="52" y="110">1</tspan>
+        </text>
+        <rect id="Rectangle-3" stroke="#9B9B9B" sketch:type="MSShapeGroup" x="72" y="79" width="37" height="54"></rect>
+        <text id="2" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#000000">
+            <tspan x="88" y="110">2</tspan>
+        </text>
+        <rect id="Rectangle-4" stroke="#9B9B9B" sketch:type="MSShapeGroup" x="108" y="79" width="37" height="54"></rect>
+        <text id="3" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#4990E2">
+            <tspan x="124" y="110">3</tspan>
+        </text>
+        <text id="&quot;Яблоко&quot;" sketch:type="MSTextLayer" transform="translate(18.960194, 45.000000) rotate(-89.000000) translate(-18.960194, -45.000000) " font-family="Consolas" font-size="14" font-weight="normal" fill="#000000">
+            <tspan x="-12.0398062" y="47">"Яблоко"</tspan>
+        </text>
+        <text id="&quot;Апельсин&quot;" sketch:type="MSTextLayer" transform="translate(59.460194, 38.000000) rotate(-89.000000) translate(-59.460194, -38.000000) " font-family="Consolas" font-size="14" font-weight="normal" fill="#000000">
+            <tspan x="20.9601938" y="40">"Апельсин"</tspan>
+        </text>
+        <text id="&quot;Груша&quot;" sketch:type="MSTextLayer" transform="translate(92.000000, 50.000000) rotate(-89.000000) translate(-92.000000, -50.000000) " font-family="Consolas" font-size="14" font-weight="normal" fill="#000000">
+            <tspan x="65" y="52">"Груша"</tspan>
+        </text>
+        <text id="&quot;Лимон&quot;" sketch:type="MSTextLayer" transform="translate(129.960194, 49.000000) rotate(-89.000000) translate(-129.960194, -49.000000) " font-family="Consolas" font-size="14" font-weight="normal" fill="#4990E2">
+            <tspan x="102.960194" y="51">"Лимон"</tspan>
+        </text>
+        <text id="length-=-4" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#000000">
+            <tspan x="0" y="155">length = 4</tspan>
+        </text>
+        <path d="M183.5,135.5 L192.5,118.893834 L186.5,118.893834 L186.5,76.5 L180.5,76.5 L180.5,118.893834 L174.5,118.893834 L183.5,135.5 Z" id="Shape" fill="#000000" sketch:type="MSShapeGroup" transform="translate(183.500000, 106.000000) rotate(-90.000000) translate(-183.500000, -106.000000) "></path>
+        <text id="очистить" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="normal" fill="#4990E2">
+            <tspan x="150" y="95">очистить</tspan>
+        </text>
+        <rect id="Rectangle-7" stroke="#9B9B9B" sketch:type="MSShapeGroup" x="220" y="79" width="37" height="54"></rect>
+        <rect id="Rectangle-5" stroke="#9B9B9B" sketch:type="MSShapeGroup" x="256" y="79" width="37" height="54"></rect>
+        <text id="-1" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#000000">
+            <tspan x="235" y="110">0</tspan>
+        </text>
+        <text id="-2" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#000000">
+            <tspan x="272" y="110">1</tspan>
+        </text>
+        <rect id="Rectangle-6" stroke="#9B9B9B" sketch:type="MSShapeGroup" x="292" y="79" width="37" height="54"></rect>
+        <text id="-3" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#000000">
+            <tspan x="308" y="110">2</tspan>
+        </text>
+        <text id="&quot;Яблоко&quot;-2" sketch:type="MSTextLayer" transform="translate(238.960194, 45.000000) rotate(-89.000000) translate(-238.960194, -45.000000) " font-family="Consolas" font-size="14" font-weight="normal" fill="#000000">
+            <tspan x="207.960194" y="47">"Яблоко"</tspan>
+        </text>
+        <text id="&quot;Апельсин&quot;-2" sketch:type="MSTextLayer" transform="translate(279.460194, 38.000000) rotate(-89.000000) translate(-279.460194, -38.000000) " font-family="Consolas" font-size="14" font-weight="normal" fill="#000000">
+            <tspan x="240.960194" y="40">"Апельсин"</tspan>
+        </text>
+        <text id="&quot;Груша&quot;-2" sketch:type="MSTextLayer" transform="translate(312.000000, 50.000000) rotate(-89.000000) translate(-312.000000, -50.000000) " font-family="Consolas" font-size="14" font-weight="normal" fill="#000000">
+            <tspan x="285" y="52">"Груша"</tspan>
+        </text>
+        <text id="length-=-3" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#000000">
+            <tspan x="220" y="155">length = 3</tspan>
+        </text>
+    </g>
+</svg>

1-js/4-data-structures/7-array/array-shift.svg

@@ -0,0 +1,104 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="593px" height="158px" viewBox="0 0 593 158" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
+    <title>Slice 1</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="array-shift" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <rect id="Rectangle-1" stroke="#9B9B9B" sketch:type="MSShapeGroup" x="0" y="79" width="37" height="54"></rect>
+        <rect id="Rectangle-2" stroke="#9B9B9B" sketch:type="MSShapeGroup" x="36" y="79" width="37" height="54"></rect>
+        <text id="0" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#4990E2">
+            <tspan x="15" y="110">0</tspan>
+        </text>
+        <text id="1" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#000000">
+            <tspan x="52" y="110">1</tspan>
+        </text>
+        <rect id="Rectangle-3" stroke="#9B9B9B" sketch:type="MSShapeGroup" x="72" y="79" width="37" height="54"></rect>
+        <text id="2" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#000000">
+            <tspan x="88" y="110">2</tspan>
+        </text>
+        <rect id="Rectangle-4" stroke="#9B9B9B" sketch:type="MSShapeGroup" x="108" y="79" width="37" height="54"></rect>
+        <text id="3" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#000000">
+            <tspan x="124" y="110">3</tspan>
+        </text>
+        <text id="&quot;Яблоко&quot;" sketch:type="MSTextLayer" transform="translate(18.960194, 45.000000) rotate(-89.000000) translate(-18.960194, -45.000000) " font-family="Consolas" font-size="14" font-weight="normal" fill="#4990E2">
+            <tspan x="-12.0398062" y="47">"Яблоко"</tspan>
+        </text>
+        <text id="&quot;Апельсин&quot;" sketch:type="MSTextLayer" transform="translate(59.460194, 38.000000) rotate(-89.000000) translate(-59.460194, -38.000000) " font-family="Consolas" font-size="14" font-weight="normal" fill="#000000">
+            <tspan x="20.9601938" y="40">"Апельсин"</tspan>
+        </text>
+        <text id="&quot;Груша&quot;" sketch:type="MSTextLayer" transform="translate(92.000000, 50.000000) rotate(-89.000000) translate(-92.000000, -50.000000) " font-family="Consolas" font-size="14" font-weight="normal" fill="#000000">
+            <tspan x="65" y="52">"Груша"</tspan>
+        </text>
+        <text id="&quot;Лимон&quot;" sketch:type="MSTextLayer" transform="translate(129.960194, 49.000000) rotate(-89.000000) translate(-129.960194, -49.000000) " font-family="Consolas" font-size="14" font-weight="normal" fill="#000000">
+            <tspan x="102.960194" y="51">"Лимон"</tspan>
+        </text>
+        <text id="length-=-4" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#000000">
+            <tspan x="0" y="155">length = 4</tspan>
+        </text>
+        <rect id="Rectangle-8" stroke="#9B9B9B" sketch:type="MSShapeGroup" x="218" y="79" width="37" height="54"></rect>
+        <rect id="Rectangle-5" stroke="#9B9B9B" sketch:type="MSShapeGroup" x="254" y="79" width="37" height="54"></rect>
+        <text id="-1" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#4990E2">
+            <tspan x="233" y="110">0</tspan>
+        </text>
+        <text id="-2" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#000000">
+            <tspan x="270" y="110">1</tspan>
+        </text>
+        <rect id="Rectangle-6" stroke="#9B9B9B" sketch:type="MSShapeGroup" x="290" y="79" width="37" height="54"></rect>
+        <text id="-3" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#000000">
+            <tspan x="306" y="110">2</tspan>
+        </text>
+        <rect id="Rectangle-7" stroke="#9B9B9B" sketch:type="MSShapeGroup" x="326" y="79" width="37" height="54"></rect>
+        <text id="-4" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#000000">
+            <tspan x="342" y="110">3</tspan>
+        </text>
+        <text id="&quot;Апельсин&quot;-2" sketch:type="MSTextLayer" transform="translate(277.460194, 38.000000) rotate(-89.000000) translate(-277.460194, -38.000000) " font-family="Consolas" font-size="14" font-weight="normal" fill="#000000">
+            <tspan x="238.960194" y="40">"Апельсин"</tspan>
+        </text>
+        <text id="&quot;Груша&quot;-2" sketch:type="MSTextLayer" transform="translate(310.000000, 50.000000) rotate(-89.000000) translate(-310.000000, -50.000000) " font-family="Consolas" font-size="14" font-weight="normal" fill="#000000">
+            <tspan x="283" y="52">"Груша"</tspan>
+        </text>
+        <text id="&quot;Лимон&quot;-2" sketch:type="MSTextLayer" transform="translate(347.960194, 49.000000) rotate(-89.000000) translate(-347.960194, -49.000000) " font-family="Consolas" font-size="14" font-weight="normal" fill="#000000">
+            <tspan x="320.960194" y="51">"Лимон"</tspan>
+        </text>
+        <text id="length-=-5" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#000000">
+            <tspan x="218" y="155">length = 4</tspan>
+        </text>
+        <path d="M183.5,135.5 L192.5,118.893834 L186.5,118.893834 L186.5,76.5 L180.5,76.5 L180.5,118.893834 L174.5,118.893834 L183.5,135.5 Z" id="Shape" fill="#000000" sketch:type="MSShapeGroup" transform="translate(183.500000, 106.000000) rotate(-90.000000) translate(-183.500000, -106.000000) "></path>
+        <text id="очистить" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="normal" fill="#4990E2">
+            <tspan x="150" y="95">очистить</tspan>
+        </text>
+        <rect id="Rectangle-12" stroke="#9B9B9B" sketch:type="MSShapeGroup" x="484" y="79" width="37" height="54"></rect>
+        <rect id="Rectangle-9" stroke="#9B9B9B" sketch:type="MSShapeGroup" x="520" y="79" width="37" height="54"></rect>
+        <text id="-5" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#000000">
+            <tspan x="499" y="110">0</tspan>
+        </text>
+        <text id="-6" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#000000">
+            <tspan x="536" y="110">1</tspan>
+        </text>
+        <rect id="Rectangle-10" stroke="#9B9B9B" sketch:type="MSShapeGroup" x="556" y="79" width="37" height="54"></rect>
+        <text id="-7" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#000000">
+            <tspan x="572" y="110">2</tspan>
+        </text>
+        <text id="&quot;Апельсин&quot;-3" sketch:type="MSTextLayer" transform="translate(505.460194, 38.000000) rotate(-89.000000) translate(-505.460194, -38.000000) " font-family="Consolas" font-size="14" font-weight="normal" fill="#000000">
+            <tspan x="466.960194" y="40">"Апельсин"</tspan>
+        </text>
+        <text id="&quot;Груша&quot;-3" sketch:type="MSTextLayer" transform="translate(538.000000, 50.000000) rotate(-89.000000) translate(-538.000000, -50.000000) " font-family="Consolas" font-size="14" font-weight="normal" fill="#000000">
+            <tspan x="511" y="52">"Груша"</tspan>
+        </text>
+        <text id="&quot;Лимон&quot;-3" sketch:type="MSTextLayer" transform="translate(575.960194, 49.000000) rotate(-89.000000) translate(-575.960194, -49.000000) " font-family="Consolas" font-size="14" font-weight="normal" fill="#000000">
+            <tspan x="548.960194" y="51">"Лимон"</tspan>
+        </text>
+        <text id="length-=-3" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal">
+            <tspan x="484" y="155" fill="#000000">length = </tspan>
+            <tspan x="553.275391" y="155" fill="#4990E2">3</tspan>
+        </text>
+        <path d="M425.727051,151.272949 L434.727051,134.666783 L428.727051,134.666783 L428.727051,62.7270508 L422.169922,62.7270508 L422.727051,134.666783 L416.727051,134.666783 L425.727051,151.272949 Z" id="Shape-2" fill="#000000" sketch:type="MSShapeGroup" transform="translate(425.727051, 107.000000) rotate(-90.000000) translate(-425.727051, -107.000000) "></path>
+        <text id="переместить" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="normal" fill="#4990E2">
+            <tspan x="382" y="93">переместить</tspan>
+            <tspan x="382" y="112"></tspan>
+            <tspan x="382" y="131">элементы</tspan>
+            <tspan x="382" y="150">влево</tspan>
+        </text>
+    </g>
+</svg>

1-js/4-data-structures/7-array/article.md

@@ -0,0 +1,462 @@
+# Массивы c числовыми индексами
+
+*Массив* -- разновидность объекта, которая предназначена для хранения пронумерованных значений и предлагает дополнительные методы для удобного манипулирования такой коллекцией.
+
+Они обычно используются для хранения упорядоченных коллекций данных, например -- списка товаров на странице, студентов в группе и т.п.
+
+[cut]
+
+## Объявление
+
+Синтаксис для создания нового массива -- квадратные скобки со списком элементов внутри. 
+
+Пустой массив:
+
+```js
+var arr = [];
+```
+
+Массив `fruits` с тремя элементами:
+
+```js
+var fruits = ["Яблоко", "Апельсин", "Слива"];
+```
+
+**Элементы нумеруются, начиная с нуля.** 
+
+Чтобы получить нужный элемент из массива -- указывается его номер в квадратных скобках:
+
+```js
+//+ run
+var fruits = ["Яблоко", "Апельсин", "Слива"];
+
+alert(fruits[0]); // Яблоко
+alert(fruits[1]); // Апельсин
+alert(fruits[2]); // Слива
+```
+
+Элемент можно всегда заменить:
+
+```js
+fruits[2] = 'Груша'; // теперь ["Яблоко", "Апельсин", "Груша"]
+```
+
+...Или добавить:
+
+```js
+fruits[3] = 'Лимон'; // теперь ["Яблоко", "Апельсин", "Груша", "Лимон"]
+```
+
+Общее число элементов, хранимых в массиве, содержится в его свойстве `length`:
+
+```js
+//+ run
+var fruits = ["Яблоко", "Апельсин", "Груша"]; 
+
+alert(fruits.length); // 3
+```
+
+**Через `alert` можно вывести и массив целиком.** 
+
+При этом его элементы будут перечислены через запятую:
+
+```js
+//+ run
+var fruits = ["Яблоко", "Апельсин", "Груша"]; 
+
+alert(fruits); // Яблоко,Апельсин,Груша
+```
+
+**В массиве может храниться любое число элементов любого типа.** 
+
+В том числе, строки, числа, объекты, вот например:
+
+```js
+//+ run
+// микс значений
+var arr = [ 1, 'Имя', { name: 'Петя' }, true ];
+
+// получить объект из массива и тут же -- его свойство
+alert( arr[2].name ); // Петя
+```
+
+## Методы pop/push, shift/unshift  
+
+Одно из применений массива -- это [очередь](http://ru.wikipedia.org/wiki/%D0%9E%D1%87%D0%B5%D1%80%D0%B5%D0%B4%D1%8C_%28%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5%29). В классическом программировании так называют упорядоченную коллекцию элементов, такую что элементы добавляются в конец, а обрабатываются -- с начала. 
+
+<img src="queue.svg">
+
+В реальной жизни эта структура данных встречается очень часто. Например, очередь сообщений, которые надо показать на экране.
+
+Очень близка к очереди еще одна структура данных: [стек](http://ru.wikipedia.org/wiki/%D0%A1%D1%82%D0%B5%D0%BA). Это такая коллекция элементов, в которой новые элементы добавляются в конец и берутся с конца. 
+
+<img src="stack.svg">
+
+Например, стеком является колода карт, в которую новые карты кладутся сверху, и берутся -- тоже сверху.
+
+Для того, чтобы реализовывать эти структуры данных, и просто для более удобной работы с началом и концом массива существуют специальные методы.
+
+### Конец массива
+
+<dl>
+<dt>`pop`</dt>
+<dd>Удаляет *последний* элемент из массива и возвращает его:
+
+```js
+//+ run
+var fruits = ["Яблоко", "Апельсин", "Груша"];
+
+alert( fruits.pop() ); // удалили "Груша"
+
+alert(fruits); // Яблоко, Апельсин
+```
+
+</dd>
+<dt>`push`</dt>
+<dd>Добавляет элемент *в конец* массива:
+
+```js
+//+ run
+var fruits = ["Яблоко", "Апельсин"];
+
+fruits.push("Груша");
+
+alert(fruits); // Яблоко, Апельсин, Груша
+```
+
+Является полным аналогом `fruits[fruits.length] = ...`.
+</dd>
+</dl>
+
+### Начало массива
+
+<dl>
+<dt>`shift`</dt>
+<dd>Удаляет из массива *первый* элемент и возвращает его:
+
+```js
+var fruits = ["Яблоко", "Апельсин", "Груша"];
+
+alert( fruits.shift() ); // удалили Яблоко
+
+alert(fruits); // Апельсин, Груша
+```
+
+</dd>
+<dt>`unshift`</dt>
+<dd>Добавляет элемент *в начало* массива:
+
+```js
+var fruits = ["Апельсин", "Груша"];
+
+fruits.unshift('Яблоко');
+
+alert(fruits); // Яблоко, Апельсин, Груша
+```
+
+</dd>
+</dl>
+
+Методы `push` и `unshift` могут добавлять сразу по несколько элементов:
+
+```js
+//+ run
+var fruits = ["Яблоко"];
+
+fruits.push("Апельсин", "Персик");
+fruits.unshift("Ананас", "Лимон");
+
+// результат: ["Ананас", "Лимон", "Яблоко", "Апельсин", "Персик"]
+alert(fruits);
+```
+
+## Внутреннее устройство массива
+
+Массив -- это объект, где в качестве ключей выбраны цифры, с дополнительными методами и свойством `length`.
+
+Так как это объект, то в функцию он передаётся по ссылке:
+
+```js
+//+ run
+function eat(arr) {
+  arr.pop();
+}
+
+var arr = ["нам", "не", "страшен", "серый", "волк"]
+
+alert(arr.length); // 5
+eat(arr);
+eat(arr);
+alert(arr.length); // 3, в функцию массив не скопирован, а передана ссылка
+```
+
+**Ещё одно следствие -- можно присваивать в массив любые свойства.**
+
+Например:
+
+```js
+var fruits = []; // создать массив
+
+fruits[99999] = 5; // присвоить свойство с любым номером
+
+fruits.age = 25; // назначить свойство со строковым именем
+```
+
+.. Но массивы для того и придуманы в JavaScript, чтобы удобно работать именно *с упорядоченными, нумерованными данными*. Для этого в них существуют специальные методы и свойство `length`. 
+
+Как правило, нет причин использовать массив как обычный объект, хотя технически это и возможно.
+
+[warn header="Вывод массива с \"дырами\""]
+Если в массиве есть пропущенные индексы, то при выводе в большинстве браузеров появляются "лишние" запятые, например:
+
+```js
+//+ run
+var a = [];
+a[0] = 0;
+a[5] = 5;
+
+alert(a); // 0,,,,,5
+```
+
+Эти запятые появляются потому, что алгоритм вывода массива идёт от `0` до `arr.length` и выводит всё через запятую. Отсутствие значений даёт несколько запятых подряд.
+[/warn]
+
+### Влияние на быстродействие
+
+Методы `push/pop` выполняются быстро, а `shift/unshift` -- медленно.
+
+<img src="array-speed.svg">
+
+
+Чтобы понять, почему работать с концом массива -- быстрее, чем с его началом, разберём подробнее происходящее при операции:
+
+```js
+fruits.shift(); // убрать 1 элемент с начала
+```
+
+При этом, так как все элементы находятся в своих ячейках, просто удалить элемент с номером `0` недостаточно. Нужно еще и переместить остальные элементы на их новые индексы.
+
+Операция `shift` должна выполнить целых три действия:
+<ol>
+<li>Удалить нулевой элемент.</li>
+<li>Переместить все свойства влево, с индекса `1` на `0`, с `2` на `1` и так далее.</li>
+<li>Обновить свойство `length`.</li>
+</ol>
+
+<img src="array-shift.svg">
+
+**Чем больше элементов в массиве, тем дольше их перемещать, это много операций с памятью.**
+
+Аналогично работает `unshift`: чтобы добавить элемент в начало массива, нужно сначала перенести вправо, в увеличенные индексы, все существующие.
+
+А что же с `push/pop`? Им как раз перемещать ничего не надо. Для того, чтобы удалить элемент, метод `pop` очищает ячейку и укорачивает `length`.
+
+Действия при операции:
+
+```js
+fruits.pop();  // убрать 1 элемент с конца
+```
+
+<img src="array-pop.svg">
+
+**Перемещать при `pop` не требуется, так как прочие элементы после этой операции остаются на тех же индексах.**
+
+Аналогично работает `push`.
+
+
+## Перебор элементов
+
+Для перебора элементов обычно используется цикл:
+
+```js
+//+ run
+var arr = ["Яблоко", "Апельсин", "Груша"];
+
+*!*
+for (var i=0; i<arr.length; i++) {
+  alert( arr[i] );
+}
+*/!*
+```
+
+[warn header="Не используйте `for..in` для массивов"]
+Так как массив является объектом, то возможен и вариант `for..in`:
+
+```js
+//+ run
+var arr = ["Яблоко", "Апельсин", "Груша"];
+
+*!*
+for (var key in arr) {
+*/!*
+  alert( arr[key] ); // Яблоко, Апельсин, Груша
+}
+```
+
+Недостатки этого способа:
+
+<ol>
+<li>Цикл `for..in` выведет *все свойства* объекта, а не только цифровые. 
+
+В браузере, при работе с объектами страницы, встречаются коллекции элементов, которые по виду как массивы, но имеют дополнительные нецифровые свойства. При переборе таких "похожих на массив" колекций через `for..in` эти свойства будут выведены, а они как раз не нужны.
+
+Бывают и библиотеки, которые предоставляют такие коллекции. Классический `for` надёжно выведет только цифровые свойства, что обычно и требуется.
+</li>
+<li>Цикл `for (var i=0; i<arr.length; i++)` в современных браузерах выполняется в 10-100 раз быстрее. Казалось бы, по виду он сложнее, но браузер особым образом оптимизирует такие циклы.</li>
+</ol>
+
+Если коротко: цикл `for(var i=0; i<arr.length...)` надёжнее и быстрее.
+[/warn]
+
+
+## Особенности работы length
+
+Встроенные методы для работы с массивом автоматически обновляют его длину `length`.
+
+**Длина `length` -- не количество элементов массива, а `последний индекс + 1`**. 
+
+Так уж оно устроено.
+
+Это легко увидеть на следующем примере:
+
+```js
+//+ run
+var arr = [];
+arr[1000] = true;
+
+alert(arr.length); // *!*1001*/!*
+```
+
+Кстати, если у вас элементы массива нумеруются случайно или с большими пропусками, то стоит подумать о том, чтобы использовать обычный объект. Массивы предназначены именно для работы с непрерывной упорядоченной коллекцией элементов.
+
+### Используем length для укорачивания массива
+
+Обычно нам не нужно самостоятельно менять `length`... Но есть один фокус, который можно провернуть. 
+
+**При уменьшении `length` массив укорачивается.** 
+
+Причем этот процесс необратимый, т.е. даже если потом вернуть `length` обратно -- значения не восстановятся:
+
+```js
+//+ run
+var arr = [1, 2, 3, 4, 5]; 
+
+arr.length = 2; // укоротить до 2 элементов
+alert(arr); // [1, 2]
+
+arr.length = 5; // вернуть length обратно, как было
+alert(arr[3]); // undefined: значения не вернулись
+```
+
+Самый простой способ очистить массив -- это `arr.length=0`.
+   
+## Создание вызовом new Array [#new-array]
+   
+### new Array() 
+Существует еще один синтаксис для создания массива:
+
+```js
+var arr = *!*new Array*/!*("Яблоко", "Груша", "и т.п.");
+```
+
+Он редко используется, т.к. квадратные скобки `[]` короче.
+
+Кроме того, у него есть одна особенность. Обычно `new Array(элементы, ...)` создаёт массив из данных элементов, но если у него один аргумент-число `new Array(число)`, то он создает массив *без элементов, но с заданной длиной*.
+
+Проверим это:
+
+```js
+//+ run
+var arr = new Array(2, 3); 
+alert(arr[0]); // 2, создан массив [2, 3], всё ок
+
+*!*
+arr = new Array(2); // создаст массив [2] ?
+alert(arr[0]); // undefined! у нас массив без элементов, длины 2
+*/!*
+```
+
+Что же такое этот "массив без элементов, но с длиной"? Как такое возможно?
+
+Оказывается, очень даже возможно и соответствует объекту `{length: 2}`. Получившийся массив ведёт себя так, как будто его элементы равны `undefined`.
+
+Это может быть неожиданным сюрпризом, поэтому обычно используют квадратные скобки.
+
+### Многомерные массивы   
+
+Массивы в JavaScript могут содержать в качестве элементов другие массивы. Это можно использовать для создания многомерных массивов, например матриц:
+
+```js
+//+ run
+var matrix = [
+  [1, 2, 3],
+  [4, 5, 6],
+  [7, 8, 9]
+];
+
+alert(matrix[1][1]); // центральный элемент
+```
+
+## Внутреннее представление массивов
+
+[warn header="Hardcore coders only"]
+Эта секция относится ко внутреннему устройству структуры данных и требует специальных знаний. Она не обязательна к прочтению.
+[/warn]
+
+Числовые массивы, согласно спецификации, являются объектами, в которые добавили ряд свойств, методов и автоматическую длину `length`. Но внутри они, как правило, устроены по-другому.
+
+**Современные интерпретаторы стараются оптимизировать их и хранить в памяти не в виде хэш-таблицы, а в виде непрерывной области памяти, по которой легко пробежаться от начала до конца.** 
+
+Операции с массивами также оптимизируются, особенно если массив хранит только один тип данных, например только числа. Порождаемый набор инструкций для процессора получается очень эффективным.
+
+Чтобы у интерпретатора получались эти оптимизации, программист не должен мешать. 
+
+В частности:
+<ul>
+<li>Не ставить массиву произвольные свойства, такие как `arr.test = 5`. То есть, работать именно как с массивом, а не как с объектом.</li>
+<li>Заполнять массив непрерывно и по возрастающей. Как только браузер встречает необычное поведение массива, например устанавливается значение `arr[0]`, а потом сразу `arr[1000]`, то он начинает работать с ним, как с обычным объектом. Как правило, это влечёт преобразование его в хэш-таблицу.</li>
+</ul>
+
+
+Если следовать этим принципам, то массивы будут занимать меньше памяти и быстрее работать.
+
+## Итого
+
+Массивы существуют для работы с упорядоченным набором элементов. 
+
+**Объявление:**
+
+```js
+// предпочтительное
+var arr = [ элемент1, элемент2... ];
+
+// new Array
+var arr = new Array( элемент1, элемент2...);
+```
+
+При этом `new Array(число)` создаёт массив заданной длины, *без элементов*. Чтобы избежать ошибок, предпочтителен первый синтаксис.
+
+**Свойство `length`** -- длина массива. Если точнее, то последний индекс массива плюс `1`. Если её уменьшить вручную, то массив укоротится. Если `length` больше реального количества элементов, то отсутствующие элементы равны `undefined`.
+
+
+Массив можно использовать как очередь или стек.
+
+**Операции с концом массива:**
+<ul>
+<li>`arr.push(элемент1, элемент2...)` добавляет элементы в конец.</li>
+<li>`var elem = arr.pop()` удаляет и возвращает последний элемент.</li>
+</ul>
+
+**Операции с началом массива:**
+<ul>
+<li>`arr.unshift(элемент1, элемент2...)` добавляет элементы в начало.</li>
+<li>`var elem = arr.shift()` удаляет и возвращает первый элемент.</li>
+</ul>
+
+Эти операции перенумеровывают все элементы, поэтому работают медленно.
+
+В следующей главе мы рассмотрим другие методы для работы с массивами.
+
+
+
+

1-js/4-data-structures/7-array/queue.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="168px" height="93px" viewBox="0 0 168 93" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
+    <title>Slice 1</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="queue" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="noun_21323_cc" sketch:type="MSLayerGroup" transform="translate(51.000000, 0.000000)" fill="#000000">
+            <g id="Group" sketch:type="MSShapeGroup">
+                <path d="M31.795,34.15 C30.575,34.15 29.455,33.343 29.111,32.11 C28.696,30.626 29.563,29.088 31.047,28.674 L53.439,22.421 C54.922,22.006 56.46,22.874 56.876,24.357 C57.29,25.841 56.423,27.379 54.939,27.793 L32.547,34.046 C32.296,34.117 32.043,34.15 31.795,34.15 L31.795,34.15 Z" id="Shape"></path>
+                <path d="M31.795,45.188 C30.575,45.188 29.455,44.381 29.111,43.148 C28.696,41.664 29.563,40.126 31.047,39.712 L53.439,33.459 C54.922,33.045 56.46,33.912 56.876,35.395 C57.29,36.879 56.423,38.417 54.939,38.831 L32.547,45.084 C32.296,45.155 32.043,45.188 31.795,45.188 L31.795,45.188 Z" id="Shape"></path>
+                <path d="M31.795,55.557 C30.575,55.557 29.455,54.75 29.111,53.517 C28.696,52.034 29.563,50.496 31.047,50.081 L53.439,43.828 C54.922,43.414 56.46,44.281 56.876,45.764 C57.29,47.248 56.423,48.786 54.939,49.2 L32.547,55.453 C32.296,55.523 32.043,55.557 31.795,55.557 L31.795,55.557 Z" id="Shape"></path>
+                <path d="M55.837,8.439 L55.837,6.655 C55.837,3.042 52.816,-0.669 49.286,0.104 C39.874,2.164 18.568,9.063 7.433,11.457 C3.902,12.216 0.881,15.193 0.881,18.806 L0.881,79.758 C0.881,83.371 3.857,86.819 7.433,86.31 C9.432,86.026 11.7,85.563 14.161,84.97 L14.161,86.398 C14.161,90.011 17.136,93.459 20.712,92.95 C24.888,92.356 47.3919992,85.5499983 53.1949992,83.8389983 L53.1949992,78.4649977 C47.6279992,80.1029977 25.161,86.773 20.712,87.814 C19.951,87.993 19.296,87.179 19.296,86.398 L19.296,26.74 C19.218,24.948 19.915,23.453 22.011,22.893 C28.081,21.27 43.963,16.948 53.955,14.225 L55.836,13.713 C59.871,12.613 62.564,11.879 62.564,11.879 C63.345,11.879 63.98,12.514 63.98,13.295 L63.98,74.248 C63.98,75.029 63.315,75.451 62.564,75.664 C59.968,76.402 56.744,77.377 53.182,78.465 L53.195,83.839 C56.6,82.72 59.797,81.669 62.564,80.8 C66.01,79.717 69.116,78.431 69.116,74.248 L69.116,13.294 C69.117,9.682 66.095,5.97 62.565,6.743 C60.724,7.146 58.423,7.736 55.837,8.439 Z M20.713,18.096 C17.182,18.856 14.162,21.833 14.162,25.445 L14.162,79.46 C11.772,80.108 9.511,80.689 7.434,81.175 C6.673,81.353 6.018,80.539 6.018,79.758 L6.018,20.1 C5.94,18.308 6.637,16.813 8.733,16.253 C17.876,13.81 49.287,5.239 49.287,5.239 C50.068,5.239 50.703,5.874 50.703,6.655 L50.703,9.872 C40.644,12.732 28.312,16.462 20.713,18.096 L20.713,18.096 Z" id="Shape"></path>
+            </g>
+        </g>
+        <path d="M146.682617,63.3173828 L158.682617,51.3173828 L150.682617,51.3173828 L150.682617,20.6826172 L142.682617,20.6826172 L142.682617,51.3173828 L134.682617,51.3173828 L146.682617,63.3173828 Z" id="Shape" fill="#000000" sketch:type="MSShapeGroup" transform="translate(146.682617, 42.000000) rotate(-90.000000) translate(-146.682617, -42.000000) "></path>
+        <path d="M21.6826172,63.3173828 L33.6826172,51.3173828 L25.6826172,51.3173828 L25.6826172,20.6826172 L17.6826172,20.6826172 L17.6826172,51.3173828 L9.68261719,51.3173828 L21.6826172,63.3173828 Z" id="Shape-2" fill="#000000" sketch:type="MSShapeGroup" transform="translate(21.682617, 42.000000) rotate(-90.000000) translate(-21.682617, -42.000000) "></path>
+    </g>
+</svg>

1-js/4-data-structures/7-array/stack.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="90px" height="97px" viewBox="0 0 90 97" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
+    <title>Slice 1</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="stack" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <path d="M17.9304166,50.5138979 C16.7833461,50.5138979 15.7302978,50.0718276 15.4068616,49.3963968 C15.0166696,48.5840173 15.8318418,47.741509 17.2271308,47.5141742 L38.2805745,44.0888141 C39.6749232,43.8620271 41.1209842,44.3369651 41.5121164,45.1493446 C41.9013682,45.9622719 41.086196,46.8047801 39.690907,47.0315671 L18.6374633,50.4569273 C18.4014676,50.4952729 18.1635915,50.5138979 17.9304166,50.5138979 L17.9304166,50.5138979 Z" id="Shape-3" fill="#000000" sketch:type="MSShapeGroup" transform="translate(28.459289, 47.273049) rotate(-21.000000) translate(-28.459289, -47.273049) "></path>
+        <path d="M24.9304166,55.5138979 C23.7833461,55.5138979 22.7302978,55.0718276 22.4068616,54.3963968 C22.0166696,53.5840173 22.8318418,52.741509 24.2271308,52.5141742 L45.2805745,49.0888141 C46.6749232,48.8620271 48.1209842,49.3369651 48.5121164,50.1493446 C48.9013682,50.9622719 48.086196,51.8047801 46.690907,52.0315671 L25.6374633,55.4569273 C25.4014676,55.4952729 25.1635915,55.5138979 24.9304166,55.5138979 L24.9304166,55.5138979 Z" id="Shape-4" fill="#000000" sketch:type="MSShapeGroup" transform="translate(35.459289, 52.273049) rotate(-21.000000) translate(-35.459289, -52.273049) "></path>
+        <path d="M31.9304166,59.5138979 C30.7833461,59.5138979 29.7302978,59.0718276 29.4068616,58.3963968 C29.0166696,57.5840173 29.8318418,56.741509 31.2271308,56.5141742 L52.2805745,53.0888141 C53.6749232,52.8620271 55.1209842,53.3369651 55.5121164,54.1493446 C55.9013682,54.9622719 55.086196,55.8047801 53.690907,56.0315671 L32.6374633,59.4569273 C32.4014676,59.4952729 32.1635915,59.5138979 31.9304166,59.5138979 L31.9304166,59.5138979 Z" id="Shape-5" fill="#000000" sketch:type="MSShapeGroup" transform="translate(42.459289, 56.273049) rotate(-21.000000) translate(-42.459289, -56.273049) "></path>
+        <path d="M89.999,67.92075 C89.999,67.52575 89.787,67.16175 89.445,66.96475 L85.798,64.85975 L89.445,62.75275 C89.787,62.55575 89.999,62.19075 89.999,61.79675 C89.999,61.40075 89.787,61.03775 89.445,60.84075 L38.02,31.14775 C37.678,30.95075 37.257,30.95075 36.915,31.14775 L0.552,52.14275 C0.21,52.33975 1.77635684e-15,52.70475 1.77635684e-15,53.09975 C1.77635684e-15,53.49475 0.21,53.85875 0.552,54.05575 L4.2,56.16275 L0.552,58.26875 C0.21,58.46575 1.77635684e-15,58.83075 1.77635684e-15,59.22475 C1.77635684e-15,59.62075 0.21,59.98475 0.552,60.18275 L4.201,62.28875 L0.552,64.39475 C0.21,64.59175 0,64.95675 0,65.35175 C0,65.74675 0.21,66.11075 0.552,66.30775 L51.979,95.99875 C52.15,96.09775 52.34,96.14675 52.531,96.14675 C52.722,96.14675 52.913,96.09675 53.084,95.99875 L89.446,75.00475 C89.788,74.80775 90,74.44275 90,74.04775 C90,73.65275 89.788,73.28775 89.446,73.09175 L85.798,70.98475 L89.446,68.87875 C89.787,68.68075 89.999,68.31575 89.999,67.92075 L89.999,67.92075 Z M37.467,33.37975 L86.684,61.79575 L52.531,81.51575 L3.313,53.09975 L37.467,33.37975 L37.467,33.37975 Z M83.737,72.34575 L86.684,74.04775 L52.531,93.76775 L3.313,65.35175 L6.409,63.56375 L51.979,89.87375 C52.15,89.97275 52.34,90.02075 52.531,90.02075 C52.722,90.02075 52.913,89.97175 53.084,89.87375 L83.605,72.25075 C83.646,72.28475 83.689,72.31875 83.737,72.34575 L83.737,72.34575 Z M52.531,87.64075 L3.369,59.25775 L3.313,59.22475 L6.409,57.43775 L51.979,83.74775 C52.15,83.84675 52.34,83.89575 52.531,83.89575 C52.722,83.89575 52.913,83.84575 53.084,83.74775 L83.685,66.07975 C83.774,66.20075 83.886,66.30675 84.024,66.38675 L86.685,67.92175 L52.531,87.64075 L52.531,87.64075 Z" id="Shape" fill="#000000" sketch:type="MSShapeGroup"></path>
+        <path d="M36.5349323,0.361 C36.3172807,0.116 36.0511792,0 35.7686793,0 C35.2044249,0 34.5730861,0.463 34.1251114,1.295 L27.2914468,13.967 C26.6936502,15.077 27.0767767,16.382 27.8847711,16.382 C27.9853977,16.382 28.0934781,16.362 28.2067762,16.319 L31.5252181,15.036 L31.5744133,40.628 L40.6710587,34.6514359 L40.6710585,11.484 L43.9909911,10.199 C45.0076925,9.805 45.3073362,8.883 44.6536359,8.148 L36.5349323,0.361 Z" id="Shape" fill="#000000" sketch:type="MSShapeGroup" transform="translate(36.000000, 20.314000) scale(1, -1) translate(-36.000000, -20.314000) "></path>
+        <path d="M59.5349323,17.361 C59.3172807,17.116 59.0511792,17 58.7686793,17 C58.2044249,17 57.5730861,17.463 57.1251114,18.295 L50.2914468,30.967 C49.6936502,32.077 50.0767767,33.382 50.8847711,33.382 C50.9853977,33.382 51.0934781,33.362 51.2067762,33.319 L54.5252181,32.036 L54.5744133,57.628 L63.6710587,63.2197266 L63.6710585,28.484 L66.9909911,27.199 C68.0076925,26.805 68.3073362,25.883 67.6536359,25.148 L59.5349323,17.361 Z" id="Shape-2" fill="#000000" sketch:type="MSShapeGroup"></path>
+    </g>
+</svg>