jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

translating

Browse source
This commit is contained in:
Ilya Kantor 2016-03-21 10:16:55 +03:00
parent 2b874a73be
commit 928cd2731b
165 changed files with 2046 additions and 2967 deletions
Download patch file Download diff file Expand all files Collapse all files

102
1-js/2-first-steps/19-function-expression/article.md
View file

@ -101,7 +101,6 @@ We can copy it between variables and run when we want. We can even add propertie
``` ```
## Function Expression as a method ## Function Expression as a method
Now let's go back: we have two ways of declaring a function. Do we really need both? What's about Function Expressions that makes it a good addition? Now let's go back: we have two ways of declaring a function. Do we really need both? What's about Function Expressions that makes it a good addition?
@ -353,8 +352,97 @@ As a rule of thumb, a Function Declaration is prefered. It gives more freedom in
But if a Function Declaration does not suit us for some reason, then a Function Expression should be used. But if a Function Declaration does not suit us for some reason, then a Function Expression should be used.
``` ```
## Arrow functions basics [#arrow-functions]
Enough with the complexities for now. Let's relax with arrow functions that may add elegance to our code.
They act like a function expression, but look a little bit differently.
The syntax:
```js
let func = (arg1, arg2, ...argN) => expression
```
...Creates a function that gets arguments `arg1..argN`, evaludates the `expression` on the right side with their use and returns its result.
It is roughly the same as:
```js
let func = function(arg1, arg2, ...argN) {
return expression;
}
```
Let's see the example:
```js run
let sum = (a, b) => a + b;
alert( sum(1, 2) ); // 3
```
For a single argument function, we can omit the brackets, making that even shorter:
```js run
// brackets () not needed around a single argument n
let double = n => n*2;
alert( double(3) ); // 6
```
As you can see, this extra-concise syntax is well-suited for one-line functions. Very handy to create a function in the middle of a more complex expresion.
Note that to the right side of `=>` must be a single valid expression.
If we need something more complex, like multiple statements, we can enclose it in figure brackets. Then use a normal `return` within them.
Like here:
```js run
let sum = (a, b) => {
let result = a + b;
*!*
return result; // if we use figure brackets, must use return
*/!*
}
alert( sum(1, 2) ); // 3
```
```smart header="More to come"
Arrow functions have other interesting features in them. We'll get to them later.
But as for now, we can already use them for one-line actions.
```
## new Function
And the last syntax for the functions:
```js
let func = new Function('a, b', 'return a + b');
```
The major difference is that it creates a function literally from a string, at run time. See, both arguments are strings. The first one lists the arguments, while the second one is the function body.
All previous declarations required us, programmers, to write the function code in the script.
But `new Function` allows to turn any string into a function, for example we can receive a new function from the server and then execute it:
```js
let str = ... receive the code from the server dynamically ...
let func = new Function('', str);
func();
```
It is used in very specific cases, like when we receive a code from the server as a string, or to dynamically compile a function from a template string. The need for such uses arises at more advanced stages of the development.
## Summary ## Summary
- Functions are values. They can be assigned, copied or declared in any place of the code. - Functions are values. They can be assigned, copied or declared in any place of the code.
- If the function is declared as a separate statement -- it's called a Function Declaration. - If the function is declared as a separate statement -- it's called a Function Declaration.
- If the function is created as a part of an expression -- it's a Function Expression. - If the function is created as a part of an expression -- it's a Function Expression.
@ -377,4 +465,14 @@ function f() { ... }
Function Declaration is shorter and more obvious. The additional bonus -- it can be called before the actual declaration. Function Declaration is shorter and more obvious. The additional bonus -- it can be called before the actual declaration.
Use Function Expression to write elegant code when the function must be created at-place, inside another expression or when Function Declaration doesn't fit well for the task. **Use Function Expression to write elegant code when the function must be created at-place, inside another expression or when Function Declaration doesn't fit well for the task.**
We also touched two other ways to create a function:
- Arrow functions: `(...args) => expr` or `{ ... }`
They provide a short way to create a function that evaluates the given `expr`. More to come about them.
- `new Function(args, body)`
This syntax allows to create a function from a string, that may be composed dynamically during the execution, from the incoming data.

11
1-js/4-data-structures/10-arguments-pseudoarray/1-check-arguments-undefined/solution.md
View file

@ -1,11 +0,0 @@
Узнать количество реально переданных аргументов можно по значению `arguments.length`:
```js run
function f(x) {
alert( arguments.length ? 1 : 0 );
}
f(undefined);
f();
```

18
1-js/4-data-structures/10-arguments-pseudoarray/1-check-arguments-undefined/task.md
View file

@ -1,18 +0,0 @@
importance: 5
---
# Проверка на аргумент-undefined
Как в функции отличить отсутствующий аргумент от `undefined`?
```js
function f(x) {
// ..ваш код..
// выведите 1, если первый аргумент есть, и 0 - если нет
}
f(undefined); // 1
f(); // 0
```

20
1-js/4-data-structures/10-arguments-pseudoarray/2-sum-arguments/solution.md
View file

@ -1,20 +0,0 @@
```js run
function sum() {
var result = 0;
for (var i = 0; i < arguments.length; i++) {
result += arguments[i];
}
return result;
}
alert( sum() ); // 0
alert( sum(1) ); // 1
alert( sum(1, 2) ); // 3
alert( sum(1, 2, 3) ); // 6
alert( sum(1, 2, 3, 4) ); // 10
```

16
1-js/4-data-structures/10-arguments-pseudoarray/2-sum-arguments/task.md
View file

@ -1,16 +0,0 @@
importance: 5
---
# Сумма аргументов
Напишите функцию `sum(...)`, которая возвращает сумму всех своих аргументов:
```js
sum() = 0
sum(1) = 1
sum(1, 2) = 3
sum(1, 2, 3) = 6
sum(1, 2, 3, 4) = 10
```

401
1-js/4-data-structures/10-arguments-pseudoarray/article.md
View file

@ -1,401 +0,0 @@
# Псевдомассив аргументов "arguments"
В JavaScript любая функция может быть вызвана с произвольным количеством аргументов.
[cut]
Например:
```js run no-beautify
function go(a,b) {
alert("a="+a+", b="+b);
}
go(1); // a=1, b=undefined
go(1,2); // a=1, b=2
go(1,2,3); // a=1, b=2, третий аргумент не вызовет ошибку
```
````smart header="В JavaScript нет \"перегрузки\" функций"
В некоторых языках программист может создать две функции с одинаковым именем, но разным набором аргументов, а при вызове интерпретатор сам выберет нужную:
```js
function log(a) {
...
}
function log(a, b, c) {
...
}
*!*
log(a); // вызовется первая функция
log(a, b, c); // вызовется вторая функция
*/!*
```
Это называется "полиморфизмом функций" или "перегрузкой функций". В JavaScript ничего подобного нет.
**Может быть только одна функция с именем `log`, которая вызывается с любыми аргументами.**
А уже внутри она может посмотреть, с чем вызвана и по-разному отработать.
В примере выше второе объявление `log` просто переопределит первое.
````
## Доступ к "лишним" аргументам
Как получить значения аргументов, которых нет в списке параметров?
Доступ к ним осуществляется через "псевдо-массив" <a href="https://developer.mozilla.org/en/JavaScript/Reference/functions_and_function_scope/arguments">arguments</a>.
Он содержит список аргументов по номерам: `arguments[0]`, `arguments[1]`..., а также свойство `length`.
Например, выведем список всех аргументов:
```js run
function sayHi() {
for (var i = 0; i < arguments.length; i++) {
alert( "Привет, " + arguments[i] );
}
}
sayHi("Винни", "Пятачок"); // 'Привет, Винни', 'Привет, Пятачок'
```
Все параметры находятся в `arguments`, даже если они есть в списке. Код выше сработал бы также, будь функция объявлена `sayHi(a,b,c)`.
````warn header="Связь между `arguments` и параметрами"
**В старом стандарте JavaScript псевдо-массив `arguments` и переменные-параметры ссылаются на одни и те же значения.**
В результате изменения `arguments` влияют на параметры и наоборот.
Например:
```js run
function f(x) {
arguments[0] = 5; // меняет переменную x
alert( x ); // 5
}
f(1);
```
Наоборот:
```js run
function f(x) {
x = 5;
alert( arguments[0] ); // 5, обновленный x
}
f(1);
```
В современной редакции стандарта это поведение изменено. Аргументы отделены от локальных переменных:
```js run
function f(x) {
"use strict"; // для браузеров с поддержкой строгого режима
arguments[0] = 5;
alert( x ); // не 5, а 1! Переменная "отвязана" от arguments
}
f(1);
```
**Если вы не используете строгий режим, то чтобы переменные не менялись "неожиданно", рекомендуется никогда не изменять `arguments`.**
````
### arguments -- это не массив
Частая ошибка новичков -- попытка применить методы `Array` к `arguments`. Это невозможно:
```js run
function sayHi() {
var a = arguments.shift(); // ошибка! нет такого метода!
}
sayHi(1);
```
Дело в том, что `arguments` -- это не массив `Array`.
В действительности, это обычный объект, просто ключи числовые и есть `length`. На этом сходство заканчивается. Никаких особых методов у него нет, и методы массивов он тоже не поддерживает.
Впрочем, никто не мешает сделать обычный массив из `arguments`, например так:
```js run
var args = [];
for (var i = 0; i < arguments.length; i++) {
args[i] = arguments[i];
}
```
Такие объекты иногда называют *"коллекциями"* или *"псевдомассивами"*.
## Пример: копирование свойств copy(dst, src1, src2...) [#copy]
Иногда встаёт задача -- скопировать в существующий объект свойства из одного или нескольких других.
Напишем для этого функцию `copy`. Она будет работать с любым числом аргументов, благодаря использованию `arguments`.
Синтаксис:
copy(dst, src1, src2...)
: Копирует свойства из объектов `src1, src2,...` в объект `dst`. Возвращает получившийся объект.
Использование:
- Для объединения нескольких объектов в один:
```js run
var vasya = {
age: 21,
name: 'Вася',
surname: 'Петров'
};
var user = {
isAdmin: false,
isEmailConfirmed: true
};
var student = {
university: 'My university'
};
// добавить к vasya свойства из user и student
*!*
copy(vasya, user, student);
*/!*
alert( vasya.isAdmin ); // false
alert( vasya.university ); // My university
```
- Для создания копии объекта `user`:
```js
// скопирует все свойства в пустой объект
var userClone = copy({}, user);
```
Такой "клон" объекта может пригодиться там, где мы хотим изменять его свойства, при этом не трогая исходный объект `user`.
В нашей реализации мы будем копировать только свойства первого уровня, то есть вложенные объекты как-то особым образом не обрабатываются. Впрочем, её можно расширить.
А вот и реализация:
```js
function copy() {
var dst = arguments[0];
for (var i = 1; i < arguments.length; i++) {
var arg = arguments[i];
for (var key in arg) {
dst[key] = arg[key];
}
}
return dst;
}
```
Здесь первый аргумент `copy` -- это объект, в который нужно копировать, он назван `dst`. Для упрощения доступа к нему можно указать его прямо в объявлении функции:
```js
*!*
function copy(dst) {
*/!*
// остальные аргументы остаются безымянными
for (var i = 1; i < arguments.length; i++) {
var arg = arguments[i];
for (var key in arg) {
dst[key] = arg[key];
}
}
return dst;
}
```
### Аргументы по умолчанию через ||
Если функция вызвана с меньшим количеством аргументов, чем указано, то отсутствующие аргументы считаются равными `undefined`.
Зачастую в случае отсутствия аргумента мы хотим присвоить ему некоторое "стандартное" значение или, иначе говоря, значение "по умолчанию". Это можно удобно сделать при помощи оператора логическое ИЛИ `||`.
Например, функция `showWarning`, описанная ниже, должна показывать предупреждение. Для этого она принимает ширину `width`, высоту `height`, заголовок `title` и содержимое `contents`, но большая часть этих аргументов необязательна:
```js
function showWarning(width, height, title, contents) {
width = width || 200; // если не указана width, то width = 200
height = height || 100; // если нет height, то height = 100
title = title || "Предупреждение";
//...
}
```
Это отлично работает в тех ситуациях, когда "нормальное" значение параметра в логическом контексте отлично от `false`. В коде выше, при передаче `width = 0` или `width = null`, оператор ИЛИ заменит его на значение по умолчанию.
А что, если мы хотим использовать значение по умолчанию только если `width === undefined`? В этом случае оператор ИЛИ уже не подойдёт, нужно поставить явную проверку:
```js
function showWarning(width, height, title, contents) {
if (width === undefined) width = 200;
if (height === undefined) height = 100;
if (title === undefined) title = "Предупреждение";
//...
}
```
## Устаревшее свойство arguments.callee [#arguments-callee]
```warn header="Используйте NFE вместо `arguments.callee`"
Это свойство устарело, при `use strict` оно не работает.
Единственная причина, по которой оно тут -- это то, что его можно встретить в старом коде, поэтому о нём желательно знать.
Современная спецификация рекомендует использовать ["именованные функциональные выражения (NFE)"](#functions-nfe).
```
В старом стандарте JavaScript объект `arguments` не только хранил список аргументов, но и содержал в свойстве `arguments.callee` ссылку на функцию, которая выполняется в данный момент.
Например:
```js run
function f() {
alert( arguments.callee === f ); // true
}
f();
```
Эти два примера будут работать одинаково:
```js
// подвызов через NFE
var factorial = function f(n) {
return n==1 ? 1 : n**!*f(n-1)*/!*;
};
// подвызов через arguments.callee
var factorial = function(n) {
return n==1 ? 1 : n**!*arguments.callee(n-1)*/!*;
};
```
В учебнике мы его использовать не будем, оно приведено для общего ознакомления.
### arguments.callee.caller
Устаревшее свойство `arguments.callee.caller` хранит ссылку на *функцию, которая вызвала данную*.
```warn header="Это свойство тоже устарело"
Это свойство было в старом стандарте, при `use strict` оно не работает, как и `arguments.callee`.
Также ранее существовало более короткое свойство `arguments.caller`. Но это уже раритет, оно даже не кросс-браузерное. А вот свойство `arguments.callee.caller` поддерживается везде, если не использован `use strict`, поэтому в старом коде оно встречается.
```
Пример работы:
```js run
f1();
function f1() {
alert( arguments.callee.caller ); // null, меня вызвали из глобального кода
f2();
}
function f2() {
alert( arguments.callee.caller ); // f1, функция, из которой меня вызвали
f3();
}
function f3() {
alert( arguments.callee.caller ); // f2, функция, из которой меня вызвали
}
```
В учебнике мы это свойство также не будем использовать.
## "Именованные аргументы"
*Именованные аргументы* -- альтернативная техника работы с аргументами, которая вообще не использует `arguments`.
Некоторые языки программирования позволяют передать параметры как-то так: `f(width=100, height=200)`, то есть по именам, а что не передано, тех аргументов нет. Это очень удобно в тех случаях, когда аргументов много, сложно запомнить их порядок и большинство вообще не надо передавать, по умолчанию подойдёт.
Такая ситуация часто встречается в компонентах интерфейса. Например, у "меню" может быть масса настроек отображения, которые можно "подкрутить" но обычно нужно передать всего один-два главных параметра, а остальные возьмутся по умолчанию.
В JavaScript для этих целей используется передача аргументов в виде объекта, а в его свойствах мы передаём параметры.
Получается так:
```js
function showWarning(options) {
var width = options.width || 200; // по умолчанию
var height = options.height || 100;
var title = options.title || "Предупреждение";
// ...
}
```
Вызвать такую функцию очень легко. Достаточно передать объект аргументов, указав в нем только нужные:
```js
showWarning({
contents: "Вы вызвали функцию" // и всё понятно!
});
```
Сравним это с передачей аргументов через список:
```js
showWarning(null, null, "Предупреждение!");
// мысль программиста "а что это за null, null в начале? ох, надо глядеть описание функции"
```
Не правда ли, объект -- гораздо проще и понятнее?
Еще один бонус кроме красивой записи -- возможность повторного использования объекта аргументов:
```js
var opts = {
width: 400,
height: 200,
contents: "Текст"
};
showWarning(opts);
opts.contents = "Другой текст";
*!*
showWarning(opts); // вызвать с новым текстом, без копирования других аргументов
*/!*
```
Именованные аргументы применяются во многих JavaScript-фреймворках.
## Итого
- Полный список аргументов, с которыми вызвана функция, доступен через `arguments`.
- Это псевдомассив, то есть объект, который похож на массив, в нём есть нумерованные свойства и `length`, но методов массива у него нет.
- В старом стандарте было свойство `arguments.callee` со ссылкой на текущую функцию, а также свойство `arguments.callee.caller`, содержащее ссылку на функцию, которая вызвала данную. Эти свойства устарели, при `use strict` обращение к ним приведёт к ошибке.
- Для указания аргументов по умолчанию, в тех случаях, когда они заведомо не `false`, удобен оператор `||`.
В тех случаях, когда возможных аргументов много и, в особенности, когда большинство их имеют значения по умолчанию, вместо работы с `arguments` организуют передачу данных через объект, который как правило называют `options`.
Возможен и гибридный подход, при котором первый аргумент обязателен, а второй -- `options`, который содержит всевозможные дополнительные параметры:
```js
function showMessage(text, options) {
// показать сообщение text, настройки показа указаны в options
}
```

14
1-js/4-data-structures/10-arguments-pseudoarray/head.html
View file

@ -1,14 +0,0 @@
<script>
function copy() {
var dst = arguments[0];
for (var i = 1; i < arguments.length; i++) {
var arg = arguments[i];
for (var key in arg) {
dst[key] = arg[key];
}
}
return dst;
}
</script>

0
1-js/4-data-structures/11-datetime/1-new-date/solution.md → 1-js/4-data-structures/11-date/1-new-date/solution.md
View file

0
1-js/4-data-structures/11-datetime/1-new-date/task.md → 1-js/4-data-structures/11-date/1-new-date/task.md
View file

0
1-js/4-data-structures/11-datetime/2-get-week-day/_js.view/solution.js → 1-js/4-data-structures/11-date/2-get-week-day/_js.view/solution.js
View file

0
1-js/4-data-structures/11-datetime/2-get-week-day/_js.view/test.js → 1-js/4-data-structures/11-date/2-get-week-day/_js.view/test.js
View file

0
1-js/4-data-structures/11-datetime/2-get-week-day/solution.md → 1-js/4-data-structures/11-date/2-get-week-day/solution.md
View file

0
1-js/4-data-structures/11-datetime/2-get-week-day/task.md → 1-js/4-data-structures/11-date/2-get-week-day/task.md
View file

0
1-js/4-data-structures/11-datetime/3-weekday/_js.view/solution.js → 1-js/4-data-structures/11-date/3-weekday/_js.view/solution.js
View file

0
1-js/4-data-structures/11-datetime/3-weekday/_js.view/test.js → 1-js/4-data-structures/11-date/3-weekday/_js.view/test.js
View file

0
1-js/4-data-structures/11-datetime/3-weekday/solution.md → 1-js/4-data-structures/11-date/3-weekday/solution.md
View file

0
1-js/4-data-structures/11-datetime/3-weekday/task.md → 1-js/4-data-structures/11-date/3-weekday/task.md
View file

0
1-js/4-data-structures/11-datetime/4-get-date-ago/_js.view/solution.js → 1-js/4-data-structures/11-date/4-get-date-ago/_js.view/solution.js
View file

0
1-js/4-data-structures/11-datetime/4-get-date-ago/_js.view/test.js → 1-js/4-data-structures/11-date/4-get-date-ago/_js.view/test.js
View file

0
1-js/4-data-structures/11-datetime/4-get-date-ago/solution.md → 1-js/4-data-structures/11-date/4-get-date-ago/solution.md
View file

0
1-js/4-data-structures/11-datetime/4-get-date-ago/task.md → 1-js/4-data-structures/11-date/4-get-date-ago/task.md
View file

0
1-js/4-data-structures/11-datetime/5-last-day-of-month/_js.view/solution.js → 1-js/4-data-structures/11-date/5-last-day-of-month/_js.view/solution.js
View file

0
1-js/4-data-structures/11-datetime/5-last-day-of-month/_js.view/test.js → 1-js/4-data-structures/11-date/5-last-day-of-month/_js.view/test.js
View file

0
1-js/4-data-structures/11-datetime/5-last-day-of-month/solution.md → 1-js/4-data-structures/11-date/5-last-day-of-month/solution.md
View file

0
1-js/4-data-structures/11-datetime/5-last-day-of-month/task.md → 1-js/4-data-structures/11-date/5-last-day-of-month/task.md
View file

0
1-js/4-data-structures/11-datetime/6-get-seconds-today/solution.md → 1-js/4-data-structures/11-date/6-get-seconds-today/solution.md
View file

0
1-js/4-data-structures/11-datetime/6-get-seconds-today/task.md → 1-js/4-data-structures/11-date/6-get-seconds-today/task.md
View file

0
1-js/4-data-structures/11-datetime/7-get-seconds-to-tomorrow/solution.md → 1-js/4-data-structures/11-date/7-get-seconds-to-tomorrow/solution.md
View file

0
1-js/4-data-structures/11-datetime/7-get-seconds-to-tomorrow/task.md → 1-js/4-data-structures/11-date/7-get-seconds-to-tomorrow/task.md
View file

0
1-js/4-data-structures/11-datetime/8-format-date-ddmmyy/_js.view/solution.js → 1-js/4-data-structures/11-date/8-format-date-ddmmyy/_js.view/solution.js
View file

0
1-js/4-data-structures/11-datetime/8-format-date-ddmmyy/_js.view/test.js → 1-js/4-data-structures/11-date/8-format-date-ddmmyy/_js.view/test.js
View file

0
1-js/4-data-structures/11-datetime/8-format-date-ddmmyy/solution.md → 1-js/4-data-structures/11-date/8-format-date-ddmmyy/solution.md
View file

0
1-js/4-data-structures/11-datetime/8-format-date-ddmmyy/task.md → 1-js/4-data-structures/11-date/8-format-date-ddmmyy/task.md
View file

0
1-js/4-data-structures/11-datetime/9-format-date-relative/_js.view/solution.js → 1-js/4-data-structures/11-date/9-format-date-relative/_js.view/solution.js
View file

0
1-js/4-data-structures/11-datetime/9-format-date-relative/_js.view/test.js → 1-js/4-data-structures/11-date/9-format-date-relative/_js.view/test.js
View file

0
1-js/4-data-structures/11-datetime/9-format-date-relative/solution.md → 1-js/4-data-structures/11-date/9-format-date-relative/solution.md
View file

0
1-js/4-data-structures/11-datetime/9-format-date-relative/task.md → 1-js/4-data-structures/11-date/9-format-date-relative/task.md
View file

428
1-js/4-data-structures/11-date/article.md Normal file
View file

@ -0,0 +1,428 @@
# TODO: Date and time
JavaScript has a built-in object [Date](mdn:js/Date) for date/time management.
It contains the date, the time, the timezone, everything.
[cut]
## Creation
To create a new `Date` object use one of the following syntaxes:
`new Date()`
: Create a `Date` object for the current date and time:
```js run
let now = new Date();
alert( now ); // current date/time
```
`new Date(milliseconds)`
: Create a `Date` obeject with the time equal to number of milliseconds (1/1000 of a second) passed after the Jan 1st of 1970 UTC+0.
```js run
// 24 hours after 01.01.1970 UTC+0
let Jan02_1970 = new Date(24 * 3600 * 1000);
alert( Jan02_1970 );
```
`new Date(datestring)`
: If there is a single argument -- a string, then it is parsed with the `Date.parse` algorithm (see below).
`new Date(year, month, date, hours, minutes, seconds, ms)`
: Create the date with the given components in the local time zone. Only two first arguments are obligatory.
Note:
- The `year` must have 4 digits: `2013` is okay, `98` is not.
- The `month` count starts with `0` (Jan), up to `11` (Dec).
- The `date` parameter is actually the day of month, if absent then `1` is assumed.
- If `hours/minutes/seconds/ms` is absent, then it is equal `0`.
For instance:
```js
new Date(2011, 0, 1, 0, 0, 0, 0); // // 1 Jan 2011, 00:00:00
new Date(2011, 0, 1); // the same, hours etc are 0 by default
```
The precision is 1 ms (1/1000 sec):
```js run
let date = new Date(2011, 0, 1, 2, 3, 4, 567);
alert( date ); // 1.01.2011, 02:03:04.567
```
## Access date components
The are many methods to access the year, month etc from the `Date` object. But they can be easily remembered when categorized.
`getFullYear()`
: Get the year (4 digits)
`getMonth()`
: Get the month, **from 0 to 11**.
`getDate()`
: Get the day of month, from 1 to 31, the name of the method does look a little bit strange.
`getHours(), getMinutes(), getSeconds(), getMilliseconds()`
: Get the corresponding time components.
```warn header="Not `getYear()`, but `getFullYear()`"
Many JavaScript engines implement a non-standard method `getYear()`. This method is non-standard. It returns 2-digit year sometimes. Please never use it. There is `getFullYear()` for that.
```
Additionally, we can get a day of week:
`getDay()`
: Get the day of week, from `0` (Sunday) to `6` (Saturday). The first day is always Sunday, in some countries that's not so, but can't be changed.
**All the methods above return the components relative to the local time zone.**
There are also their UTC-counterparts, that return day, month, year etc for the time zone UTC+0: `getUTCFullYear()`, `getUTCMonth()`, `getUTCDay()`. Just insert the `"UTC"` right after `"get"`.
If your local time zone is shifted relative to UTC, then the code below shows different hours:
```js run
// currend date
let date = new Date();
// the hour in your current time zone
alert( date.getHours() );
// what time is it now in London winter time (UTC+0)?
// the hour in UTC+0 time zone
alert( date.getUTCHours() );
```
Besides the given methods, there are two special ones, that do not have a UTC-variant:
`getTime()`
: Returns a number of milliseconds passed from the January 1st of 1970 UTC+0. The same kind of used in `new Date(milliseconds)` constructor.
`getTimezoneOffset()`
: Returns the difference between the local time zene and UTC, in minutes:
```js run
alert( new Date().getTimezoneOffset() ); // For UTC-1 outputs 60
```
## Setting date components
The following methods allow to set date/time components:
- `setFullYear(year [, month, date])`
- `setMonth(month [, date])`
- `setDate(date)`
- `setHours(hour [, min, sec, ms])`
- `setMinutes(min [, sec, ms])`
- `setSeconds(sec [, ms])`
- `setMilliseconds(ms)`
- `setTime(milliseconds)` (sets the whole date by milliseconds since 01.01.1970 UTC)
Every one of them except `setTime()` has a UTC-variant, for instance: `setUTCHours()`.
As we can see, some methods can set multiple components at once, for example `setHours`. Those components that are not mentioned -- are not modified.
For instance:
```js run
let today = new Date();
today.setHours(0);
alert( today ); // today, but the hour is changed to 0
today.setHours(0, 0, 0, 0);
alert( today ); // today, 00:00:00 sharp.
```
## Autocorrection
The *autocorrection* -- is a very handy property of the `Date` objects. We can set out-of-range values, and it will auto-adjust itself.
For instance:
```js run
let date = new Date(2013, 0, *!*32*/!*); // 32 Jan 2013 ?!?
alert(date); // ...is 1st Feb 2013!
```
**Out-of-range date components are distributed around automatically.**
Let's say we need to increase the date "28 Feb 2016" by 2 days. It may be "2 Mar" or "1 Mar" in case of a leap-year. We don't need to think about it. Just add 2 days. The `Date` object will do the rest:
```js run
let date = new Date(2016, 1, 28);
*!*
date.setDate(date.getDate() + 2);
*/!*
alert( date ); // 1 Mar 2016
```
That feature is often used to get the date after the given period of time. For instance, let's get the date for "70 seconds after now":
```js run
let date = new Date();
date.setSeconds(date.getSeconds() + 70);
alert( date ); // shows the correct date
```
We can also set zero or even negative componens. For example:
```js run
let date = new Date(2016, 0, 2); // 2 Jan 2016
date.setDate(1); // set day 1 of month
alert( date );
date.setDate(0); // min day is 1, so the last day of the previous month is assumed
alert( date ); // 31 Dec 2015
```
## Date to number, date diff
A `Date` object can be converted to a number, it becomes the number of milliseconds:
```js run
let date = new Date();
alert( +date ); // will the milliseconds, same as date.getTime()
```
**The important side effect: dates can be substracted, the result is their difference in ms.**
That's some times used for time measurements:
```js run
let start = new Date(); // start counting
// do the job
for (let i = 0; i < 100000; i++) {
let doSomething = i * i * i;
}
let end = new Date(); // done
alert( `The loop took ${end - start} ms` );
```
### Benchmarking
Let's say we have several ways to solve a task, each one described as a function.
How to see which one is faster. That's called a "benchmarking".
For instance, let's consider two functions to walk the array:
```js
function walkIn(arr) {
for (let key in arr) arr[key]++;
}
function walkLength(arr) {
for (let i = 0; i < arr.length; i++) arr[i]++;
}
```
We can't run each of them once, and check the time difference. A single run is unreliable, a tiny CPU spike will spoil the result.
For the right benchmarking, we need to run each function many times, for the test to take considerable time. Then sudden CPU spikes will not affect it a lot.
A complex function may be run a few times, but here the functions are simple, so we need to run them 1000 times.
Let's measure which one is faster:
```js run
let arr = [];
for (let i = 0; i < 1000; i++) arr[i] = 0;
function walkIn(arr) {
for (let key in arr) arr[key]++;
}
function walkLength(arr) {
for (let i = 0; i < arr.length; i++) arr[i]++;
}
function bench(f) {
let date = new Date();
for (let i = 0; i < 10000; i++) f(arr);
return new Date() - date;
}
alert( 'Time of walkIn: ' + bench(walkIn) + 'ms' );
alert( 'Time walkLength: ' + bench(walkLength) + 'ms' );
```
Now let's improve that a little bit more. Imagine that in the time of the first benchmarking `bench(walkIn)` the CPU was doing something in parallel, and it was taking resources. And at the time of the second benchmark the work was finished.
Is that real? Of course it is, especially for the modern multi-process OS.
As a result, the first benchmark will have less CPU resources than the second. Again, a reason for wrong results.
**For the more reliable benchmarking, the whole pack of benchmarks should be rerun multiple times.**
Here's the code example:
```js run
let arr = [];
for (let i = 0; i < 1000; i++) arr[i] = 0;
function walkIn(arr) {
for (let key in arr) arr[key]++;
}
function walkLength(arr) {
for (let i = 0; i < arr.length; i++) arr[i]++;
}
function bench(f) {
let date = new Date();
for (let i = 0; i < 1000; i++) f(arr);
return new Date() - date;
}
let timeWalkIn = 0;
let timeWalkLength = 0;
*!*
// run bench(walkIn) and bench(walkLength) each 100 times alternating
for (let i = 0; i < 100; i++) {
timeWalkIn += bench(walkIn);
timeWalkLength += bench(walkLength);
}
*/!*
alert( 'Total time for walkIn: ' + timeWalkIn );
alert( 'Total time for walkLength: ' + timeWalkLength );
```
That's also important because modern JavaScript engines start applying advanced optimizations only to the "hot code" that executes many times (no need to optimize rarely executed things). So, in the example above, first executions are not well-optimized. We may want to throw away the results of the first run.
````smart header="`console.time(метка)` и `console.timeEnd(метка)`"
Modern browsers support the following methods for benchmarking with the immediate output:
- `console.time(label)` -- start the built-in chronometer with the given label.
- `console.timeEnd(label)` -- start the built-in chronometer with the given label and output the result.
The `label` parameter allows to start parallel measurements.
In the code below, there are timers `walkIn`, `walkLength` -- for the individual benchmarks and "All Benchmarks" -- for the whole time:
```js run
let arr = [];
for (let i = 0; i < 1000; i++) arr[i] = 0;
function walkIn(arr) {
for (let key in arr) arr[key]++;
}
function walkLength(arr) {
for (let i = 0; i < arr.length; i++) arr[i]++;
}
function bench(f) {
for (let i = 0; i < 10000; i++) f(arr);
}
console.time("All Benchmarks");
console.time("walkIn");
bench(walkIn);
console.timeEnd("walkIn");
console.time("walkLength");
bench(walkLength);
console.timeEnd("walkLength");
console.timeEnd("All Benchmarks");
```
If you are running the example, please open the developer console, otherwise you won't see the output.
````
```warn header="Be careful doing micro-benchmarking"
Modern JavaScript engines perform many optimizations, like:
1. Move loop invariants -- unchanging values like `arr.length` out of the loop.
2. Try to understand which type of values is stored in the variable and optimize its storage.
3. Try to understand the structure of an object, and if we have many objects with the same structure, optimize the case.
4. Do simple constant folding, calculating expressions like `2 + 3` or `"str1" + "str2"` before the code is executed.
5. See if a variable is not used and remove it.
...And many other stuff. Of course that affects benchmark results, especially when we measure "micro" things like walking an array.
So if you seriously want to understand performance, then please first study how the JavaScript engine works. And then you probably won't need microbenchmarks at all, or apply them very rarely.
The great pack of articles about V8 can be found at <http://mrale.ph>.
```
## Date.parse from a string
Все современные браузеры, включая IE9+, понимают даты в упрощённом формате ISO 8601 Extended.
Этот формат выглядит так: `YYYY-MM-DDTHH:mm:ss.sssZ`, где:
- `YYYY-MM-DD` -- дата в формате год-месяц-день.
- Обычный символ `T` используется как разделитель.
- `HH:mm:ss.sss` -- время: часы-минуты-секунды-миллисекунды.
- Часть `'Z'` обозначает временную зону -- в формате `+-hh:mm`, либо символ `Z`, обозначающий UTC. По стандарту её можно не указывать, тогда UTC, но в Safari с этим ошибка, так что лучше указывать всегда.
Также возможны укороченные варианты, например `YYYY-MM-DD` или `YYYY-MM` или даже только `YYYY`.
Метод `Date.parse(str)` разбирает строку `str` в таком формате и возвращает соответствующее ей количество миллисекунд. Если это невозможно, `Date.parse` возвращает `NaN`.
Например:
```js run
let msUTC = Date.parse('2012-01-26T13:51:50.417Z'); // зона UTC
alert( msUTC ); // 1327571510417 (число миллисекунд)
```
С таймзоной `-07:00 UTC`:
```js run
let ms = Date.parse('2012-01-26T13:51:50.417-07:00');
alert( ms ); // 1327611110417 (число миллисекунд)
```
````smart header="Формат дат для IE8-"
До появления спецификации ECMAScript 5 формат не был стандартизован, и браузеры, включая IE8-, имели свои собственные форматы дат. Частично, эти форматы пересекаются.
Например, код ниже работает везде, включая старые IE:
```js run
let ms = Date.parse("January 26, 2011 13:51:50");
alert( ms );
```
Вы также можете почитать о старых форматах IE в документации к методу <a href="http://msdn.microsoft.com/en-us/library/k4w173wk%28v=vs.85%29.aspx">MSDN Date.parse</a>.
Конечно же, сейчас лучше использовать современный формат. Если же нужна поддержка IE8-, то метод `Date.parse`, как и ряд других современных методов, добавляется библиотекой [es5-shim](https://github.com/kriskowal/es5-shim).
````
## Метод Date.now()
Метод `Date.now()` возвращает дату сразу в виде миллисекунд.
Технически, он аналогичен вызову `+new Date()`, но в отличие от него не создаёт промежуточный объект даты, а поэтому -- во много раз быстрее.
Его использование особенно рекомендуется там, где производительность при работе с датами критична. Обычно это не на веб-страницах, а, к примеру, в разработке игр на JavaScript.
## Итого
- Дата и время представлены в JavaScript одним объектом: [Date](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Date/). Создать "только время" при этом нельзя, оно должно быть с датой. Список методов `Date` вы можете найти в справочнике [Date](http://javascript.ru/Date) или выше.
- Отсчёт месяцев начинается с нуля.
- Отсчёт дней недели (для `getDay()`) тоже начинается с нуля (и это воскресенье).
- Объект `Date` удобен тем, что автокорректируется. Благодаря этому легко сдвигать даты.
- При преобразовании к числу объект `Date` даёт количество миллисекунд, прошедших с 1 января 1970 UTC. Побочное следствие -- даты можно вычитать, результатом будет разница в миллисекундах.
- Для получения текущей даты в миллисекундах лучше использовать `Date.now()`, чтобы не создавать лишний объект `Date` (кроме IE8-)
- Для бенчмаркинга лучше использовать `performance.now()` (кроме IE9-), он в 1000 раз точнее.

475
1-js/4-data-structures/11-datetime/article.md
View file

@ -1,475 +0,0 @@
# Дата и Время
Для работы с датой и временем в JavaScript используются объекты [Date](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Date/).
[cut]
## Создание
Для создания нового объекта типа `Date` используется один из синтаксисов:
`new Date()`
: Создает объект `Date` с текущей датой и временем:
```js run
var now = new Date();
alert( now );
```
`new Date(milliseconds)`
: Создает объект `Date`, значение которого равно количеству миллисекунд (1/1000 секунды), прошедших с 1 января 1970 года GMT+0.
```js run
// 24 часа после 01.01.1970 GMT+0
var Jan02_1970 = new Date(3600 * 24 * 1000);
alert( Jan02_1970 );
```
`new Date(datestring)`
: Если единственный аргумент - строка, используется вызов `Date.parse` (см. далее) для чтения даты из неё.
`new Date(year, month, date, hours, minutes, seconds, ms)`
: Дату можно создать, используя компоненты в местной временной зоне. Для этого формата обязательны только первые два аргумента. Отсутствующие параметры, начиная с `hours` считаются равными нулю, а `date` -- единице.
Заметим:
- Год `year` должен быть из 4 цифр.
- Отсчет месяцев `month` начинается с нуля 0.
Например:
```js
new Date(2011, 0, 1, 0, 0, 0, 0); // // 1 января 2011, 00:00:00
new Date(2011, 0, 1); // то же самое, часы/секунды по умолчанию равны 0
```
Дата задана с точностью до миллисекунд:
```js run
var date = new Date(2011, 0, 1, 2, 3, 4, 567);
alert( date ); // 1.01.2011, 02:03:04.567
```
## Получение компонентов даты
Для доступа к компонентам даты-времени объекта `Date` используются следующие методы:
`getFullYear()`
: Получить год(из 4 цифр)
`getMonth()`
: Получить месяц, **от 0 до 11**.
`getDate()`
: Получить число месяца, от 1 до 31.
`getHours(), getMinutes(), getSeconds(), getMilliseconds()`
: Получить соответствующие компоненты.
```warn header="Не `getYear()`, а `getFullYear()`"
Некоторые браузеры реализуют нестандартный метод `getYear()`. Где-то он возвращает только две цифры из года, где-то четыре. Так или иначе, этот метод отсутствует в стандарте JavaScript. Не используйте его. Для получения года есть `getFullYear()`.
```
Дополнительно можно получить день недели:
`getDay()`
: Получить номер дня в неделе. Неделя в JavaScript начинается с воскресенья, так что результат будет числом **от 0(воскресенье) до 6(суббота)**.
**Все методы, указанные выше, возвращают результат для местной временной зоны.**
Существуют также UTC-варианты этих методов, возвращающие день, месяц, год и т.п. для зоны GMT+0 (UTC): `getUTCFullYear()`, `getUTCMonth()`, `getUTCDay()`. То есть, сразу после `"get"` вставляется `"UTC"`.
Если ваше локальное время сдвинуто относительно UTC, то следующий код покажет разные часы:
```js run
// текущая дата
var date = new Date();
// час в текущей временной зоне
alert( date.getHours() );
// сколько сейчас времени в Лондоне?
// час в зоне GMT+0
alert( date.getUTCHours() );
```
Кроме описанных выше, существуют два специальных метода без UTC-варианта:
`getTime()`
: Возвращает число миллисекунд, прошедших с 1 января 1970 года GMT+0, то есть того же вида, который используется в конструкторе `new Date(milliseconds)`.
`getTimezoneOffset()`
: Возвращает разницу между местным и UTC-временем, в минутах.
```js run
alert( new Date().getTimezoneOffset() ); // Для GMT-1 выведет 60
```
## Установка компонентов даты
Следующие методы позволяют устанавливать компоненты даты и времени:
- `setFullYear(year [, month, date])`
- `setMonth(month [, date])`
- `setDate(date)`
- `setHours(hour [, min, sec, ms])`
- `setMinutes(min [, sec, ms])`
- `setSeconds(sec [, ms])`
- `setMilliseconds(ms)`
- `setTime(milliseconds)` (устанавливает всю дату по миллисекундам с 01.01.1970 UTC)
Все они, кроме `setTime()`, обладают также UTC-вариантом, например: `setUTCHours()`.
Как видно, некоторые методы могут устанавливать несколько компонентов даты одновременно, в частности, `setHours`. При этом если какая-то компонента не указана, она не меняется. Например:
```js run
var today = new Date;
today.setHours(0);
alert( today ); // сегодня, но час изменён на 0
today.setHours(0, 0, 0, 0);
alert( today ); // сегодня, ровно 00:00:00.
```
### Автоисправление даты
*Автоисправление* -- очень удобное свойство объектов `Date`. Оно заключается в том, что можно устанавливать заведомо некорректные компоненты (например 32 января), а объект сам себя поправит.
```js run
var d = new Date(2013, 0, *!*32*/!*); // 32 января 2013 ?!?
alert(d); // ... это 1 февраля 2013!
```
**Неправильные компоненты даты автоматически распределяются по остальным.**
Например, нужно увеличить на 2 дня дату "28 февраля 2011". Может быть так, что это будет 2 марта, а может быть и 1 марта, если год високосный. Но нам обо всем этом думать не нужно. Просто прибавляем два дня. Остальное сделает `Date`:
```js run
var d = new Date(2011, 1, 28);
*!*
d.setDate(d.getDate() + 2);
*/!*
alert( d ); // 2 марта, 2011
```
Также это используют для получения даты, отдаленной от имеющейся на нужный промежуток времени. Например, получим дату на 70 секунд большую текущей:
```js run
var d = new Date();
d.setSeconds(d.getSeconds() + 70);
alert( d ); // выведет корректную дату
```
Можно установить и нулевые, и даже отрицательные компоненты. Например:
```js run
var d = new Date;
d.setDate(1); // поставить первое число месяца
alert( d );
d.setDate(0); // нулевого числа нет, будет последнее число предыдущего месяца
alert( d );
```
```js run
var d = new Date;
d.setDate(-1); // предпоследнее число предыдущего месяца
alert( d );
```
### Преобразование к числу, разность дат
Когда объект `Date` используется в числовом контексте, он преобразуется в количество миллисекунд:
```js run
alert(+new Date) // +date то же самое, что: +date.valueOf()
```
**Важный побочный эффект: даты можно вычитать, результат вычитания объектов `Date` -- их временная разница, в миллисекундах**.
Это используют для измерения времени:
```js run
var start = new Date; // засекли время
// что-то сделать
for (var i = 0; i < 100000; i++) {
var doSomething = i * i * i;
}
var end = new Date; // конец измерения
alert( "Цикл занял " + (end - start) + " ms" );
```
### Бенчмаркинг
Допустим, у нас есть несколько вариантов решения задачи, каждый описан функцией.
Как узнать, какой быстрее?
Для примера возьмем две функции, которые бегают по массиву:
```js
function walkIn(arr) {
for (var key in arr) arr[key]++
}
function walkLength(arr) {
for (var i = 0; i < arr.length; i++) arr[i]++;
}
```
Чтобы померять, какая из них быстрее, нельзя запустить один раз `walkIn`, один раз `walkLength` и замерить разницу. Одноразовый запуск ненадежен, любая мини-помеха исказит результат.
Для правильного бенчмаркинга функция запускается много раз, чтобы сам тест занял существенное время. Это сведет влияние помех к минимуму. Сложную функцию можно запускать 100 раз, простую -- 1000 раз...
Померяем, какая из функций быстрее:
```js run
var arr = [];
for (var i = 0; i < 1000; i++) arr[i] = 0;
function walkIn(arr) {
for (var key in arr) arr[key]++;
}
function walkLength(arr) {
for (var i = 0; i < arr.length; i++) arr[i]++;
}
function bench(f) {
var date = new Date();
for (var i = 0; i < 10000; i++) f(arr);
return new Date() - date;
}
alert( 'Время walkIn: ' + bench(walkIn) + 'мс' );
alert( 'Время walkLength: ' + bench(walkLength) + 'мс' );
```
Теперь представим себе, что во время первого бенчмаркинга `bench(walkIn)` компьютер что-то делал параллельно важное (вдруг) и это занимало ресурсы, а во время второго -- перестал. Реальная ситуация? Конечно реальна, особенно на современных ОС, где много процессов одновременно.
**Гораздо более надёжные результаты можно получить, если весь пакет тестов прогнать много раз.**
```js run
var arr = [];
for (var i = 0; i < 1000; i++) arr[i] = 0;
function walkIn(arr) {
for (var key in arr) arr[key]++;
}
function walkLength(arr) {
for (var i = 0; i < arr.length; i++) arr[i]++;
}
function bench(f) {
var date = new Date();
for (var i = 0; i < 1000; i++) f(arr);
return new Date() - date;
}
*!*
// bench для каждого теста запустим много раз, чередуя
var timeIn = 0,
timeLength = 0;
for (var i = 0; i < 100; i++) {
timeIn += bench(walkIn);
timeLength += bench(walkLength);
}
*/!*
alert( 'Время walkIn: ' + timeIn + 'мс' );
alert( 'Время walkLength: ' + timeLength + 'мс' );
```
```smart header="Более точное время с `performance.now()`"
В современных браузерах (кроме IE9-) вызов [performance.now()](https://developer.mozilla.org/en-US/docs/Web/API/performance.now) возвращает количество миллисекунд, прошедшее с начала загрузки страницы. Причём именно с самого начала, до того, как загрузился HTML-файл, если точнее -- с момента выгрузки предыдущей страницы из памяти.
Так что это время включает в себя всё, включая начальное обращение к серверу.
Его можно посмотреть в любом месте страницы, даже в `<head>`, чтобы узнать, сколько времени потребовалось браузеру, чтобы до него добраться, включая загрузку HTML.
Возвращаемое значение измеряется в миллисекундах, но дополнительно имеет точность 3 знака после запятой (до миллионных долей секунды!), поэтому можно использовать его и для более точного бенчмаркинга в том числе.
```
````smart header="`console.time(метка)` и `console.timeEnd(метка)`"
Для измерения с одновременным выводом результатов в консоли есть методы:
- `console.time(метка)` -- включить внутренний хронометр браузера с меткой.
- `console.timeEnd(метка)` -- выключить внутренний хронометр браузера с меткой и вывести результат.
Параметр `"метка"` используется для идентификации таймера, чтобы можно было делать много замеров одновременно и даже вкладывать измерения друг в друга.
В коде ниже таймеры `walkIn`, `walkLength` -- конкретные тесты, а таймер "All Benchmarks" -- время "на всё про всё":
```js run
var arr = [];
for (var i = 0; i < 1000; i++) arr[i] = 0;
function walkIn(arr) {
for (var key in arr) arr[key]++;
}
function walkLength(arr) {
for (var i = 0; i < arr.length; i++) arr[i]++;
}
function bench(f) {
for (var i = 0; i < 10000; i++) f(arr);
}
console.time("All Benchmarks");
console.time("walkIn");
bench(walkIn);
console.timeEnd("walkIn");
console.time("walkLength");
bench(walkLength);
console.timeEnd("walkLength");
console.timeEnd("All Benchmarks");
```
**При запуске этого примера нужно открыть консоль, иначе вы ничего не увидите.**
````
```warn header="Внимание, оптимизатор!"
Современные интерпретаторы JavaScript делают массу оптимизаций, например:
1. Автоматически выносят инвариант, то есть постоянное в цикле значение типа `arr.length`, за пределы цикла.
2. Стараются понять, значения какого типа хранит данная переменная или массив, какую структуру имеет объект и, исходя из этого, оптимизировать внутренние алгоритмы.
3. Выполняют простейшие операции, например сложение явно заданных чисел и строк, на этапе компиляции.
4. Могут обнаружить, что некий код, например присваивание к неиспользуемой локальной переменной, ни на что не влияет и вообще исключить его из выполнения, хотя делают это редко.
Эти оптимизации могут влиять на результаты тестов, поэтому измерять скорость базовых операций JavaScript ("проводить микробенчмаркинг") до того, как вы изучите внутренности JavaScript-интерпретаторов и поймёте, что они реально делают на таком коде, не рекомендуется.
```
## Форматирование и вывод дат
Во всех браузерах, кроме IE10-, поддерживается новый стандарт [Ecma 402](http://www.ecma-international.org/publications/standards/Ecma-402.htm), который добавляет специальные методы для форматирования дат.
Это делается вызовом `date.toLocaleString(локаль, опции)`, в котором можно задать много настроек. Он позволяет указать, какие параметры даты нужно вывести, и ряд настроек вывода, после чего интерпретатор сам сформирует строку.
Пример с почти всеми параметрами даты и русским, затем английским (США) форматированием:
```js run
var date = new Date(2014, 11, 31, 12, 30, 0);
var options = {
era: 'long',
year: 'numeric',
month: 'long',
day: 'numeric',
weekday: 'long',
timezone: 'UTC',
hour: 'numeric',
minute: 'numeric',
second: 'numeric'
};
alert( date.toLocaleString("ru", options) ); // среда, 31 декабря 2014 г. н.э. 12:30:00
alert( date.toLocaleString("en-US", options) ); // Wednesday, December 31, 2014 Anno Domini 12:30:00 PM
```
Вы сможете подробно узнать о них в статье <info:intl>, которая посвящена этому стандарту.
**Методы вывода без локализации:**
`toString()`, `toDateString()`, `toTimeString()`
: Возвращают стандартное строчное представление, не заданное жёстко в стандарте, а зависящее от браузера. Единственное требование к нему -- читаемость человеком. Метод `toString` возвращает дату целиком, `toDateString()` и `toTimeString()` -- только дату и время соответственно.
```js run
var d = new Date();
alert( d.toString() ); // вывод, похожий на 'Wed Jan 26 2011 16:40:50 GMT+0300'
```
`toUTCString()`
<dd>То же самое, что `toString()`, но дата в зоне UTC.
<dt>`toISOString()`</dt>
<dd>Возвращает дату в формате ISO Детали формата будут далее. Поддерживается современными браузерами, не поддерживается IE8-.
```js run
var d = new Date();
alert( d.toISOString() ); // вывод, похожий на '2011-01-26T13:51:50.417Z'
```
</dd></dl>
Если хочется иметь большую гибкость и кросс-браузерность, то также можно воспользоваться специальной библиотекой, например [Moment.JS](http://momentjs.com/) или написать свою функцию форматирования.
## Разбор строки, Date.parse
Все современные браузеры, включая IE9+, понимают даты в упрощённом формате ISO 8601 Extended.
Этот формат выглядит так: `YYYY-MM-DDTHH:mm:ss.sssZ`, где:
- `YYYY-MM-DD` -- дата в формате год-месяц-день.
- Обычный символ `T` используется как разделитель.
- `HH:mm:ss.sss` -- время: часы-минуты-секунды-миллисекунды.
- Часть `'Z'` обозначает временную зону -- в формате `+-hh:mm`, либо символ `Z`, обозначающий UTC. По стандарту её можно не указывать, тогда UTC, но в Safari с этим ошибка, так что лучше указывать всегда.
Также возможны укороченные варианты, например `YYYY-MM-DD` или `YYYY-MM` или даже только `YYYY`.
Метод `Date.parse(str)` разбирает строку `str` в таком формате и возвращает соответствующее ей количество миллисекунд. Если это невозможно, `Date.parse` возвращает `NaN`.
Например:
```js run
var msUTC = Date.parse('2012-01-26T13:51:50.417Z'); // зона UTC
alert( msUTC ); // 1327571510417 (число миллисекунд)
```
С таймзоной `-07:00 GMT`:
```js run
var ms = Date.parse('2012-01-26T13:51:50.417-07:00');
alert( ms ); // 1327611110417 (число миллисекунд)
```
````smart header="Формат дат для IE8-"
До появления спецификации ECMAScript 5 формат не был стандартизован, и браузеры, включая IE8-, имели свои собственные форматы дат. Частично, эти форматы пересекаются.
Например, код ниже работает везде, включая старые IE:
```js run
var ms = Date.parse("January 26, 2011 13:51:50");
alert( ms );
```
Вы также можете почитать о старых форматах IE в документации к методу <a href="http://msdn.microsoft.com/en-us/library/k4w173wk%28v=vs.85%29.aspx">MSDN Date.parse</a>.
Конечно же, сейчас лучше использовать современный формат. Если же нужна поддержка IE8-, то метод `Date.parse`, как и ряд других современных методов, добавляется библиотекой [es5-shim](https://github.com/kriskowal/es5-shim).
````
## Метод Date.now()
Метод `Date.now()` возвращает дату сразу в виде миллисекунд.
Технически, он аналогичен вызову `+new Date()`, но в отличие от него не создаёт промежуточный объект даты, а поэтому -- во много раз быстрее.
Его использование особенно рекомендуется там, где производительность при работе с датами критична. Обычно это не на веб-страницах, а, к примеру, в разработке игр на JavaScript.
## Итого
- Дата и время представлены в JavaScript одним объектом: [Date](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Date/). Создать "только время" при этом нельзя, оно должно быть с датой. Список методов `Date` вы можете найти в справочнике [Date](http://javascript.ru/Date) или выше.
- Отсчёт месяцев начинается с нуля.
- Отсчёт дней недели (для `getDay()`) тоже начинается с нуля (и это воскресенье).
- Объект `Date` удобен тем, что автокорректируется. Благодаря этому легко сдвигать даты.
- При преобразовании к числу объект `Date` даёт количество миллисекунд, прошедших с 1 января 1970 UTC. Побочное следствие -- даты можно вычитать, результатом будет разница в миллисекундах.
- Для получения текущей даты в миллисекундах лучше использовать `Date.now()`, чтобы не создавать лишний объект `Date` (кроме IE8-)
- Для бенчмаркинга лучше использовать `performance.now()` (кроме IE9-), он в 1000 раз точнее.

20
1-js/4-data-structures/3-string/article.md
View file

@ -139,7 +139,7 @@ alert( `The backslash: \\` ); // The backslash: \
Note that `\n` is a single "special" character, so the length is indeed `3`. Note that `\n` is a single "special" character, so the length is indeed `3`.
- To get a character, use square brackets `[position]` or the method [str.charAt(position)](mdn:String/charAt). The first character starts from the zero position: - To get a character, use square brackets `[position]` or the method [str.charAt(position)](mdn:js/String/charAt). The first character starts from the zero position:
```js run ```js run
let str = `Hello`; let str = `Hello`;
@ -198,7 +198,7 @@ In the following sections we'll see more examples of that.
## Changing the case ## Changing the case
Methods [toLowerCase()](mdn:String/toLowerCase) and [toUpperCase()](mdn:String/toUpperCase) change the case: Methods [toLowerCase()](mdn:js/String/toLowerCase) and [toUpperCase()](mdn:js/String/toUpperCase) change the case:
```js run ```js run
alert( 'Interface'.toUpperCase() ); // INTERFACE alert( 'Interface'.toUpperCase() ); // INTERFACE
@ -217,7 +217,7 @@ There are multiple ways to look for a substring in a string.
### str.indexOf ### str.indexOf
The first method is [str.indexOf(substr, pos)](mdn:String/indexOf). The first method is [str.indexOf(substr, pos)](mdn:js/String/indexOf).
It looks for the `substr` in `str`, starting from the given position `pos`, and returns the position where the match was found or `-1` if nothing found. It looks for the `substr` in `str`, starting from the given position `pos`, and returns the position where the match was found or `-1` if nothing found.
@ -276,7 +276,7 @@ while ((pos = str.indexOf(target, pos + 1)) != -1) {
``` ```
```smart header="`str.lastIndexOf(pos)`" ```smart header="`str.lastIndexOf(pos)`"
There is also a similar method [str.lastIndexOf(pos)](mdn:String/lastIndexOf) that searches from the end of the string to its beginning. There is also a similar method [str.lastIndexOf(pos)](mdn:js/String/lastIndexOf) that searches from the end of the string to its beginning.
It would list the occurences in the reverse way. It would list the occurences in the reverse way.
``` ```
@ -339,7 +339,7 @@ Just remember: `if (~str.indexOf(...))` reads as "if found".
### includes, startsWith, endsWith ### includes, startsWith, endsWith
The more modern method [str.includes(substr)](mdn:String/includes) returns `true/false` depending on whether `str` has `substr` as its part. The more modern method [str.includes(substr)](mdn:js/String/includes) returns `true/false` depending on whether `str` has `substr` as its part.
That's usually a simpler way to go if we don't need the exact position: That's usually a simpler way to go if we don't need the exact position:
@ -349,7 +349,7 @@ alert( "Widget with id".includes("Widget") ); // true
alert( "Hello".includes("Bye") ); // false alert( "Hello".includes("Bye") ); // false
``` ```
The methods [str.startsWith](mdn:String/startsWith) and [str.endsWith](mdn:String/endsWith) do exactly what they promise: The methods [str.startsWith](mdn:js/String/startsWith) and [str.endsWith](mdn:js/String/endsWith) do exactly what they promise:
```js run ```js run
alert( "Widget".startsWith("Wid") ); // true, "Widget" starts with "Wid" alert( "Widget".startsWith("Wid") ); // true, "Widget" starts with "Wid"
@ -518,7 +518,7 @@ Luckily, all modern browsers (IE10- requires the additional library [Intl.JS](ht
It provides a special method to compare strings in different languages, following their rules. It provides a special method to compare strings in different languages, following their rules.
[str.localeCompare(str2)](mdn:String/localeCompare): [str.localeCompare(str2)](mdn:js/String/localeCompare):
- Returns `1` if `str` is greater than `str2` according to the language rules. - Returns `1` if `str` is greater than `str2` according to the language rules.
- Returns `-1` if `str` is less than `str2`. - Returns `-1` if `str` is less than `str2`.
@ -556,7 +556,7 @@ alert( '𩷶'.length ); // 2, a rare chinese hieroglyph
Note that surrogate pairs are incorrectly processed by the language most of the time. We actually have a single symbol in each of the strings above, but the `length` shows the length of `2`. Note that surrogate pairs are incorrectly processed by the language most of the time. We actually have a single symbol in each of the strings above, but the `length` shows the length of `2`.
`String.fromCodePoint` and `str.codePointAt` are notable exceptions that deal with surrogate pairs right. They recently appeared in the language. Before them, there were only [String.fromCharCode](mdn:String/fromCharCode) and [str.charCodeAt](mdn:String/charCodeAt) that do the same, but don't work with surrogate pairs. `String.fromCodePoint` and `str.codePointAt` are notable exceptions that deal with surrogate pairs right. They recently appeared in the language. Before them, there were only [String.fromCharCode](mdn:js/String/fromCharCode) and [str.charCodeAt](mdn:js/String/charCodeAt) that do the same, but don't work with surrogate pairs.
Getting a symbol can also be tricky, because most functions treat surrogate pairs as two characters: Getting a symbol can also be tricky, because most functions treat surrogate pairs as two characters:
@ -608,7 +608,7 @@ alert( 'S\u0307\u0323' == 'S\u0323\u0307' ); // false
To solve it, there exists a "unicode normalization" algorithm that brings each string to the single "normal" form. To solve it, there exists a "unicode normalization" algorithm that brings each string to the single "normal" form.
It is implemented by [str.normalize()](mdn:String/normalize). It is implemented by [str.normalize()](mdn:js/String/normalize).
```js run ```js run
alert( "S\u0307\u0323".normalize() == "S\u0323\u0307".normalize() ); // true alert( "S\u0307\u0323".normalize() == "S\u0323\u0307".normalize() ); // true
@ -638,7 +638,7 @@ For most practical tasks that information is enough, but if you want to learn mo
- To look for a substring: use `indexOf`, or `includes/startsWith/endsWith` for simple checks. - To look for a substring: use `indexOf`, or `includes/startsWith/endsWith` for simple checks.
- To compare strings according to the language, use `localeCompare`, otherwise they are compared by character codes. - To compare strings according to the language, use `localeCompare`, otherwise they are compared by character codes.
There are several other helpful methods in strings, like `str.trim()` that removes ("trims") spaces from the beginning and end of the string, see the [manual](mdn:String) for them. There are several other helpful methods in strings, like `str.trim()` that removes ("trims") spaces from the beginning and end of the string, see the [manual](mdn:js/String) for them.
Also strings have methods for doing search/replace with regular expressions. But that topic deserves a separate chapter, so we'll return to that later. Also strings have methods for doing search/replace with regular expressions. But that topic deserves a separate chapter, so we'll return to that later.

90
1-js/4-data-structures/4-object/article.md
View file

@ -20,26 +20,52 @@ We can imagine it as a cabinet with signed files. Every piece of data is stored
An empty object ("empty cabinet") can be created using one of two syntaxes: An empty object ("empty cabinet") can be created using one of two syntaxes:
```js ```js
let obj = new Object(); // works same as below let user = new Object(); // works the same as below
let obj = {}; let user = {};
``` ```
Usually, the second syntax is prefered, because it's shorter and allows to define properties immediately: ![](object-user-empty.png)
Usually, the figure brackets `{...}` syntax is used, because it's shorter. It is called an *object literal*.
We can set properties immediately:
```js ```js
let user = { let user = {
name: "John", name: "John",
age: 30, age: 30,
"day of birth": "1 Jan 1990" "likes birds": true
}; };
``` ```
![](object-person-empty.png) ![](object-user-props.png)
A property name can be only a string. No number/boolean or any other type can serve that purpose. A property name can be only a string (or a symbol, but we do not consider them here). We can try using boolean/numeric names, but they will be treated as strings automatically. Note that "complex" property names, like multiword ones, need to be quoted, to evade syntax errors.
Note that complex property names need to be quoted, to evade syntax errors. But normally that's not required.
````smart header="Any word or a number can be a property"
If something can be a variable name, then it can be used as a property name without quotes.
But for variables, there are additional limitations:
- A variable cannot start with a number.
- Language-reserved words like `let`, `return`, `function` etc are disallowed.
These are lifted from literal objects. See:
```js run
let example = {
let: 1, // reserved words can be properties
return: 2, // they even don't need quotes!
function: 3
};
// working fine:
alert(example.let + example.return + example.function); // 6
```
So, actually, any number or a valid variable name (even reserved) can be a property and needs no quotes. Quotes allow to use arbitrary strings.
````
## Add/remove properties ## Add/remove properties
@ -134,15 +160,15 @@ alert( "age" in user ); // true, user.age exists
alert( "blabla" in user ); // false, user.blabla doesn't exist alert( "blabla" in user ); // false, user.blabla doesn't exist
``` ```
Please note that at the left side of `in` there must be a *string*. The property name must quoted, like `"age"`. Please note that at the left side of `in` there must be a *property name*. That's usually a quoted string.
Without quotes, that would mean a variable containing the actual name to be tested. For instance: If we omit quotes, that would mean a variable containing the actual name to be tested. For instance:
```js run ```js run
let user = { age: 30 }; let user = { age: 30 };
let key = "age"; let key = "age";
alert( key in user ); // true, takes the name "age" from the variable and tests it alert( key in user ); // true, takes the value of key and checks for such property
``` ```
The `in` operator works in the certain case when the previous method doesn't. That is: when an object property stores `undefined`. The `in` operator works in the certain case when the previous method doesn't. That is: when an object property stores `undefined`.
@ -257,17 +283,13 @@ But if we try to loop over the object, we see a totally different picture: USA (
That's because according to the language stantard objects have no order. The loop is officially allowed to list properties randomly. That's because according to the language stantard objects have no order. The loop is officially allowed to list properties randomly.
But in practice, there's a de-facto agreement among JavaScript engines. But in practice, there's a de-facto agreement among modern JavaScript engines.
- The numeric properties are sorted. - The numeric properties are sorted.
- Non-numeric properties are ordered as they appear in the object. - Non-numeric properties are ordered as they appear in the object.
That agreement is not enforced by a standard, but stands strong, because a lot of JavaScript code is already based on it. That agreement is not enforced by a standard, but stands strong, because a lot of JavaScript code is already based on it.
```smart header="Older JS Engines order everything"
Old JavaScript engines, like IE9-, keep all properties sorted. But this behavior is a relict nowadays.
```
Now it's easy to see that the properties were iterated in the ascending order, because they are numeric... Of course, object property names are strings, but the Javascript engine detects that it's a number and applies internal optimizations to it, including sorting. That's why we see `1, 41, 44, 49`. Now it's easy to see that the properties were iterated in the ascending order, because they are numeric... Of course, object property names are strings, but the Javascript engine detects that it's a number and applies internal optimizations to it, including sorting. That's why we see `1, 41, 44, 49`.
On the other hand, if the keys are non-numeric, then they are listed as they appear, for instance: On the other hand, if the keys are non-numeric, then they are listed as they appear, for instance:
@ -318,11 +340,11 @@ Primitive values: strings, numbers, booleans -- are assigned/copied "as a whole
For instance: For instance:
```js ```js
let message = "hello"; let message = "Hello!";
let phrase = message; let phrase = message;
``` ```
As a result we have two independant variables, each one is storing the string `"hello"`. As a result we have two independant variables, each one is storing the string `"Hello!"`.
![](variable-copy-value.png) ![](variable-copy-value.png)
@ -358,16 +380,18 @@ Now we have two variables, each one with the reference to the same object:
![](variable-copy-reference.png) ![](variable-copy-reference.png)
Compare it with the primitives' picture. There's only one object, it's not copied. The reference is. Compare it with the primitives' picture. There's only one object, it's not copied.
Just as with copied keys, we can use any variable to open the cabinet and modify its contents: Now can use any variable to access the cabinet and modify its contents:
```js run ```js run
let user = { name: 'John' }; let user = { name: 'John' };
let admin = user; let admin = user;
*!*admin.name*/!* = 'Pete'; // changed by the "admin" reference *!*
admin.name = 'Pete'; // changed by the "admin" reference
*/!*
alert(*!*user.name*/!*); // 'Pete', changes are seen from the "user" reference alert(*!*user.name*/!*); // 'Pete', changes are seen from the "user" reference
``` ```
@ -405,13 +429,17 @@ clone.name = "Pete"; // changed the data in it
alert( user.name ); // still John alert( user.name ); // still John
``` ```
Also we can use the method [Object.assign](mdn:Object/assign) for that: Also we can use the method [Object.assign](mdn:js/Object/assign) for that.
The syntax is:
```js ```js
Object.assign(dest[, src1, src2, src3...]) Object.assign(dest[, src1, src2, src3...])
``` ```
It assumes that all arguments are objects. It copies the properties of all arguments starting from the 2nd (`src1`, `src2` etc) into the `dest`. Then it returns `dest`. - `dest` and other arguments (can be as many as needed) are objects
It copies the properties of all arguments starting from the 2nd (`src1`, `src2` etc) into the `dest`. Then it returns `dest`.
For instance: For instance:
```js ```js
@ -420,12 +448,25 @@ let user = { name: "John" };
let permissions1 = { canView: true }; let permissions1 = { canView: true };
let permissions2 = { canEdit: true }; let permissions2 = { canEdit: true };
// copies all properties from permissions1 and permissions2 into user
Object.assign(user, permissions1, permissions2); Object.assign(user, permissions1, permissions2);
// now user = { name: "John", canView: true, canEdit: true } // now user = { name: "John", canView: true, canEdit: true }
``` ```
Here we can use it instead of the loop for copying: If `dest` already has the property with the same name, it's overwritten:
```js
let user = { name: "John" };
// overwrite name, add isAdmin
Object.assign(user, { name: "Pete", isAdmin: true });
// now user = { name: "Pete", isAdmin: true }
```
Here we can use it to replace the loop for cloning:
```js ```js
let user = { let user = {
@ -459,7 +500,8 @@ Now it's not enough to copy `clone.sizes = user.sizes`, because the `user.sizes`
To fix that, we should examine the value of `user[key]` in the cloning loop and if it's an object, then replicate it's structure as well. That is called a "deep cloning". To fix that, we should examine the value of `user[key]` in the cloning loop and if it's an object, then replicate it's structure as well. That is called a "deep cloning".
There's a standard algorithm for deep cloning that handles this case and more complex cases, called the [Structured cloning algorithm](w3c.github.io/html/infrastructure.html#internal-structured-cloning-algorithm). We can use a ready implementation from the Javascript library [lodash](https://lodash.com). The method is [_.cloneDeep(obj)](https://lodash.com/docs#cloneDeep). There's a standard algorithm for deep cloning that handles the case above and more complex cases, called the [Structured cloning algorithm](w3c.github.io/html/infrastructure.html#internal-structured-cloning-algorithm). We can use a ready implementation from the Javascript library [lodash](https://lodash.com). The method is [_.cloneDeep(obj)](https://lodash.com/docs#cloneDeep).
## Summary ## Summary

BIN
1-js/4-data-structures/4-object/object-person-1.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 3 KiB

BIN
1-js/4-data-structures/4-object/object-person-1@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 7.3 KiB

BIN
1-js/4-data-structures/4-object/object-person-2.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 1.9 KiB

BIN
1-js/4-data-structures/4-object/object-person-2@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 5 KiB

BIN
1-js/4-data-structures/4-object/object-person-empty.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 3.6 KiB

BIN
1-js/4-data-structures/4-object/object-person-empty@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 8.2 KiB

BIN
1-js/4-data-structures/4-object/object-reference-console.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 14 KiB

BIN
1-js/4-data-structures/4-object/object-reference-console@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 32 KiB

BIN
1-js/4-data-structures/4-object/object-user-empty.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3 KiB

BIN
1-js/4-data-structures/4-object/object-user-empty@2x.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 6.7 KiB

BIN
1-js/4-data-structures/4-object/object-user-props.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 7.2 KiB

BIN
1-js/4-data-structures/4-object/object-user-props@2x.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 17 KiB

BIN
1-js/4-data-structures/4-object/object.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.5 KiB

After

Width:  |  Height:  |  Size: 3.7 KiB

Before After
Before After

BIN
1-js/4-data-structures/4-object/object@2x.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 8.5 KiB

Before After
Before After

BIN
1-js/4-data-structures/4-object/variable-contains-reference.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.6 KiB

After

Width:  |  Height:  |  Size: 9.1 KiB

Before After
Before After

BIN
1-js/4-data-structures/4-object/variable-contains-reference@2x.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 17 KiB

After

Width:  |  Height:  |  Size: 21 KiB

Before After
Before After

BIN
1-js/4-data-structures/4-object/variable-copy-reference.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 13 KiB

Before After
Before After

BIN
1-js/4-data-structures/4-object/variable-copy-reference@2x.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 25 KiB

After

Width:  |  Height:  |  Size: 30 KiB

Before After
Before After

BIN
1-js/4-data-structures/4-object/variable-copy-value.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 15 KiB

Before After
Before After

BIN
1-js/4-data-structures/4-object/variable-copy-value@2x.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 37 KiB

After

Width:  |  Height:  |  Size: 35 KiB

Before After
Before After

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

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

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

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

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

@ -1,8 +1,9 @@
function getMaxSubSum(arr) { function getMaxSubSum(arr) {
var maxSum = 0, let maxSum = 0;
partialSum = 0; let partialSum = 0;
for (var i = 0; i < arr.length; i++) {
partialSum += arr[i]; for (let item of arr) {
partialSum += item;
maxSum = Math.max(maxSum, partialSum); maxSum = Math.max(maxSum, partialSum);
if (partialSum < 0) partialSum = 0; if (partialSum < 0) partialSum = 0;
} }

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

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

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

@ -1,48 +1,47 @@
# Подсказка (медленное решение) # The slow solution
Можно просто посчитать для каждого элемента массива все суммы, которые с него начинаются.
Например, для `[-1, 2, 3, -9, 11]`: We can calculate all possible subsums.
The simplest way is to take every element and calculate sums of all subarrays starting from it.
For instance, for `[-1, 2, 3, -9, 11]`:
```js no-beautify ```js no-beautify
// Начиная с -1: // Starting from -1:
-1 -1
-1 + 2 -1 + 2
-1 + 2 + 3 -1 + 2 + 3
-1 + 2 + 3 + (-9) -1 + 2 + 3 + (-9)
-1 + 2 + 3 + (-9) + 11 -1 + 2 + 3 + (-9) + 11
// Начиная с 2: // Starting from 2:
2 2
2 + 3 2 + 3
2 + 3 + (-9) 2 + 3 + (-9)
2 + 3 + (-9) + 11 2 + 3 + (-9) + 11
// Начиная с 3: // Starting from 3:
3 3
3 + (-9) 3 + (-9)
3 + (-9) + 11 3 + (-9) + 11
// Начиная с -9 // Starting from -9
-9 -9
-9 + 11 -9 + 11
// Начиная с -11 // Starting from -11
-11 -11
``` ```
Сделайте вложенный цикл, который на внешнем уровне бегает по элементам массива, а на внутреннем -- формирует все суммы элементов, которые начинаются с текущей позиции. The code is actually a nested loop: the external loop over array elements, and the internal counts subsums starting with the current element.
# Медленное решение
Решение через вложенный цикл:
```js run ```js run
function getMaxSubSum(arr) { function getMaxSubSum(arr) {
var maxSum = 0; // если совсем не брать элементов, то сумма 0 let maxSum = 0; // if we take no elements, zero will be returned
for (var i = 0; i < arr.length; i++) { for (let i = 0; i < arr.length; i++) {
var sumFixedStart = 0; let sumFixedStart = 0;
for (var j = i; j < arr.length; j++) { for (let j = i; j < arr.length; j++) {
sumFixedStart += arr[j]; sumFixedStart += arr[j];
maxSum = Math.max(maxSum, sumFixedStart); maxSum = Math.max(maxSum, sumFixedStart);
} }
@ -58,29 +57,27 @@ alert( getMaxSubSum([1, 2, 3]) ); // 6
alert( getMaxSubSum([100, -9, 2, -3, 5]) ); // 100 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 и более элементов) такие алгоритмы могут приводить к серьёзным "тормозам". The solution has a time complexety of [O(n<sup>2</sup>)](https://en.wikipedia.org/wiki/Big_O_notation). In other words, if we increase the array size 2 times, the algorithm will work 4 times longer.
# Подсказка (быстрое решение) For big arrays (1000, 10000 or more items) such algorithms can lead to a seroius sluggishness.
Будем идти по массиву и накапливать в некоторой переменной `s` текущую частичную сумму. Если в какой-то момент s окажется отрицательной, то мы просто присвоим `s=0`. Утверждается, что максимум из всех значений переменной s, случившихся за время работы, и будет ответом на задачу. # Fast solution
**Докажем этот алгоритм.** Let's walk the array and keep the current partial sum of elements in the variable `s`. If `s` becomes negative at some point, then assign `s=0`. The maximum of all such `s` will be the answer.
В самом деле, рассмотрим первый момент времени, когда сумма `s` стала отрицательной. Это означает, что, стартовав с нулевой частичной суммы, мы в итоге пришли к отрицательной частичной сумме -- значит, и весь этот префикс массива, равно как и любой его суффикс имеют отрицательную сумму. If the description is too vague, please see the code, it's short enough:
Следовательно, от всего этого префикса массива в дальнейшем не может быть никакой пользы: он может дать только отрицательную прибавку к ответу.
# Быстрое решение
```js run ```js run
function getMaxSubSum(arr) { function getMaxSubSum(arr) {
var maxSum = 0, let maxSum = 0;
partialSum = 0; let partialSum = 0;
for (var i = 0; i < arr.length; i++) {
partialSum += arr[i]; for (let item of arr; i++) { // for each item of arr
maxSum = Math.max(maxSum, partialSum); partialSum += item; // add it to partialSum
if (partialSum < 0) partialSum = 0; maxSum = Math.max(maxSum, partialSum); // remember the maximum
if (partialSum < 0) partialSum = 0; // zero if negative
} }
return maxSum; return maxSum;
} }
@ -92,6 +89,7 @@ alert( getMaxSubSum([1, 2, 3]) ); // 6
alert( getMaxSubSum([-1, -2, -3]) ); // 0 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). The algorithm requires exactly 1 array pass, so the time complexity is O(n).
You can find more detail information about the algorithm here: [Maximum subarray problem](http://en.wikipedia.org/wiki/Maximum_subarray_problem). If it's still not obvious why that works, then please trace the algorithm on the examples above, see how it works, that's better than any words.
Этот алгоритм требует ровно одного прохода по массиву, его сложность имеет оценку `O(n)`.

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

@ -2,29 +2,29 @@ importance: 2
--- ---
# Подмассив наибольшей суммы # A maximal subarray
На входе массив чисел, например: `arr = [1, -2, 3, 4, -9, 6]`. The input is an array of numbers, e.g. `arr = [1, -2, 3, 4, -9, 6]`.
Задача -- найти непрерывный подмассив `arr`, сумма элементов которого максимальна. The task is: find the contiguous subarray of `arr` with the maximal sum of items.
Ваша функция должна возвращать только эту сумму. Write the function `getMaxSubSum(arr)` that will find return that sum.
Например: For instance:
```js ```js
getMaxSubSum([-1, *!*2, 3*/!*, -9]) = 5 (сумма выделенных) getMaxSubSum([-1, *!*2, 3*/!*, -9]) = 5 (the sum of highlighted items)
getMaxSubSum([*!*2, -1, 2, 3*/!*, -9]) = 6 getMaxSubSum([*!*2, -1, 2, 3*/!*, -9]) = 6
getMaxSubSum([-1, 2, 3, -9, *!*11*/!*]) = 11 getMaxSubSum([-1, 2, 3, -9, *!*11*/!*]) = 11
getMaxSubSum([-2, -1, *!*1, 2*/!*]) = 3 getMaxSubSum([-2, -1, *!*1, 2*/!*]) = 3
getMaxSubSum([*!*100*/!*, -9, 2, -3, 5]) = 100 getMaxSubSum([*!*100*/!*, -9, 2, -3, 5]) = 100
getMaxSubSum([*!*1, 2, 3*/!*]) = 6 (неотрицательные - берем всех) getMaxSubSum([*!*1, 2, 3*/!*]) = 6 (take all)
``` ```
Если все элементы отрицательные, то не берём ни одного элемента и считаем сумму равной нулю: If all items are negative, it means that we take none (the subarray is empty), so the sum is zero:
```js ```js
getMaxSubSum([-1, -2, -3]) = 0 getMaxSubSum([-1, -2, -3]) = 0
``` ```
Постарайтесь придумать решение, которое работает за O(n<sup>2</sup>), а лучше за O(n) операций. Please try to think of a fast solution: [O(n<sup>2</sup>)](https://en.wikipedia.org/wiki/Big_O_notation) or even O(n) if you can.

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

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

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

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

17
1-js/4-data-structures/7-array/2-item-value/solution.md Normal file
View file

@ -0,0 +1,17 @@
The result is `4`:
```js run
let fruits = ["Apples", "Pear", "Orange"];
let shoppingCart = fruits;
shoppingCart.push("Banana");
*!*
alert( fruits.length ); // 4
*/!*
```
That's because arrays are objects. So both `shoppingCart` and `fruits` are the references to the same array.

18
1-js/4-data-structures/7-array/2-item-value/task.md Normal file
View file

@ -0,0 +1,18 @@
importance: 3
---
# Is array copied?
What this code is going to show?
```js
let fruits = ["Apples", "Pear", "Orange"];
let shoppingCart = fruits;
shoppingCart.push("Banana");
alert( fruits.length ); // ?
```

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

@ -1,10 +1,10 @@
```js run ```js run
var styles = ["Джаз", "Блюз"]; let styles = ["Jazz", "Blues"];
styles.push("Рок-н-Ролл"); styles.push("Rock-n-Roll");
styles[styles.length - 2] = "Классика"; styles[(styles.length + 1) / 2] = "Classics";
alert( styles.shift() ); alert( styles.shift() );
styles.unshift("Рэп", "Регги "); styles.unshift("Rap", "Reggie");
``` ```

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

@ -2,23 +2,23 @@ importance: 5
--- ---
# Создание массива # Array operations.
Задача из 5 шагов-строк: Let's try 5 array operations.
1. Создайте массив `styles` с элементами "Джаз", "Блюз". 1. Create an array `styles` with items "Jazz" and "Blues".
2. Добавьте в конец значение "Рок-н-Ролл" 2. Append "Rock-n-Roll" to the end.
3. Замените предпоследнее значение с конца на "Классика". Код замены предпоследнего значения должен работать для массивов любой длины. 3. Replace the value in the middle by "Classics". Your code for finding the middle value should work for any arrays with odd length.
4. Удалите первое значение массива и выведите его `alert`. 4. Strip off the first value of the array and show it.
5. Добавьте в начало значения "Рэп" и "Регги". 5. Prepend `Rap` and `Reggie` to the array.
Массив в результате каждого шага: The array in the process:
```js no-beautify ```js no-beautify
Джаз, Блюз Jazz, Blues
Джаз, Блюз, Рок-н-Ролл Jazz, Bues, Rock-n-Roll
Джаз, Классика, Рок-н-Ролл Jazz, Classics, Rock-n-Roll
Классика, Рок-н-Ролл Classics, Rock-n-Roll
Рэп, Регги, Классика, Рок-н-Ролл Rap, Reggie, Classics, Rock-n-Roll
``` ```

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

@ -1,9 +1,11 @@
Для вывода нужен случайный номер от `0` до `arr.length-1` включительно. We need to generate a random integer value from `0` to `arr.length-1`, and then take the element with that index.
Here we go:
```js run ```js run
var arr = ["Яблоко", "Апельсин", "Груша", "Лимон"]; let arr = ["Apple", "Orange", "Pear", "Lemon"];
var rand = Math.floor(Math.random() * arr.length); let rand = Math.floor(Math.random() * arr.length);
alert( arr[rand] ); alert( arr[rand] );
``` ```

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

@ -2,17 +2,10 @@ importance: 3
--- ---
# Получить случайное значение из массива # A random array value
Напишите код для вывода `alert` случайного значения из массива: Write the code to `alert` a random value from the array:
```js ```js
var arr = ["Яблоко", "Апельсин", "Груша", "Лимон"]; let arr = ["Apple", "Orange", "Pear", "Lemon"];
``` ```
P.S. Код для генерации случайного целого от `min` to `max` включительно:
```js
var rand = min + Math.floor(Math.random() * (max + 1 - min));
```

27
1-js/4-data-structures/7-array/5-array-input-sum/solution.md Normal file
View file

@ -0,0 +1,27 @@
Please note the subtle, but important detail of the solution. We don't convert `value` to number instantly after `prompt`, because after `value = +value` we would not be able to tell an empty string (stop sign) from the zero (valid number). We do it later instead.
```js run demo
function sumInput() {
let numbers = [];
while (true) {
let value = prompt("A number please?", 0);
// should we cancel?
if (value === "" || value === null || !isFinite(value)) break;
numbers.push(+value);
}
let sum = 0;
for (let number of numbers) {
sum += number;
}
}
alert( sumInput() );
```

15
1-js/4-data-structures/7-array/5-array-input-sum/task.md Normal file
View file

@ -0,0 +1,15 @@
importance: 4
---
# Sum input numbers
Write the function `sumInput()` that:
- Asks the user for values using `prompt` and stores the values in the array.
- Finishes asking when the user enters a non-numeric value, an empty string, or presses "Cancel".
- Calculates and returns the sum of array items.
P.S. A zero `0` is a valid number, please don't stop the input on zero.
[demo]

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

@ -1,22 +0,0 @@
В решение ниже обратите внимание: мы не приводим `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 );
```

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

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

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

@ -1,23 +0,0 @@
```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];
```

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

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

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

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

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

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

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

@ -1,60 +0,0 @@
Возможное решение:
```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`.

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

@ -1,20 +0,0 @@
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
```

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

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

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

@ -1,15 +0,0 @@
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]);
});
});

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

@ -1,27 +0,0 @@
# Алгоритм решения
1. Создайте временный пустой массив `var results = []`.
2. Пройдите по элементам `arr` в цикле и заполните его.
3. Возвратите `results`.
# Решение
```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 );
```

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

@ -1,19 +0,0 @@
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 не изменился
```

BIN
1-js/4-data-structures/7-array/9-eratosthenes-sieve/sieve.gif
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 44 KiB

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

@ -1,39 +0,0 @@
Их сумма равна `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 );
```

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

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

BIN
1-js/4-data-structures/7-array/array-pop.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 10 KiB

Before After
Before After

BIN
1-js/4-data-structures/7-array/array-pop@2x.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 29 KiB

After

Width:  |  Height:  |  Size: 26 KiB

Before After
Before After

BIN
1-js/4-data-structures/7-array/array-shift.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 17 KiB

Before After
Before After

BIN
1-js/4-data-structures/7-array/array-shift@2x.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 45 KiB

After

Width:  |  Height:  |  Size: 40 KiB

Before After
Before After

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

@ -1,12 +1,16 @@
# Arrays with numeric indexes # Arrays basics
*Array* -- is a special kind of objects, suited to store ordered, numbered collections of values. It provides additional methods to manipulate the collection. As we've seen before, objects in Javascript store arbitrary keyed values. Any string can be a key.
For instance, we can use arrays to keep a list of students in the group, a list of goods in the catalog etc. But quite often we find that we need an *ordered collection*, where we have a 1st, a 2nd, a 3rd element and so on. For example, we need that to store a list of something: users, goods, HTML elements etc.
It's difficult to use an object here, because it provides no methods to manage the order of elements. We can't easily access the n-th element. Also we can't insert a new property "before" the existing ones, and so on. It's just not meant for such use.
For this purpose, there is a special type of objects in JavaScript, named "an array".
[cut] [cut]
## Definition ## Declaration
There are two syntaxes for creating an empty array: There are two syntaxes for creating an empty array:
@ -15,7 +19,7 @@ let arr = new Array();
let arr = []; let arr = [];
``` ```
Almost all the time, the second syntax is used. We can also list elements in the brackets: Almost all the time, the second syntax is used. We can supply the initial elements in the brackets:
```js ```js
let fruits = ["Apple", "Orange", "Plum"]; let fruits = ["Apple", "Orange", "Plum"];
@ -53,7 +57,7 @@ let fruits = ["Apple", "Orange", "Plum"];
alert( fruits.length ); // 3 alert( fruits.length ); // 3
``` ```
**We can also use `alert` to show the whole array.** We can also use `alert` to show the whole array.
```js run ```js run
let fruits = ["Apple", "Orange", "Plum"]; let fruits = ["Apple", "Orange", "Plum"];
@ -61,360 +65,407 @@ let fruits = ["Apple", "Orange", "Plum"];
alert( fruits ); // Apple,Orange,Plum alert( fruits ); // Apple,Orange,Plum
``` ```
**An array can store elements of any type.** An array can store elements of any type.
For instance: For instance:
```js run no-beautify ```js run no-beautify
// mix of values // mix of values
let arr = [ 1, 'Apple', { name: 'John' }, true, function() {} ]; let arr = [ 'Apple', { name: 'John' }, true, function() { alert('hello'); } ];
// get the object at index 2 and then its name // get the object at index 1 and then show its name
alert( arr[2].name ); // John alert( arr[1].name ); // John
// get the function at index 3 and run it
arr[3](); // hello
``` ```
## Методы pop/push, shift/unshift ## Methods 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). В классическом программировании так называют упорядоченную коллекцию элементов, такую что элементы добавляются в конец, а обрабатываются -- с начала. A [queue](https://en.wikipedia.org/wiki/Queue_(abstract_data_type)) is one of most common uses of an array. In computer science, this means an ordered collection of elements which supports two operations:
- `push` appends an element to the end.
- `shift` get an element from the beginning, advancing the queue, so that the 2nd element becomes the 1st.
![](queue.png) ![](queue.png)
В реальной жизни эта структура данных встречается очень часто. Например, очередь сообщений, которые надо показать на экране. In practice we meet it very often. For example, a queue of messages that need to be shown on-screen.
Очень близка к очереди еще одна структура данных: [стек](http://ru.wikipedia.org/wiki/%D0%A1%D1%82%D0%B5%D0%BA). Это такая коллекция элементов, в которой новые элементы добавляются в конец и берутся с конца. There's another closely related data structure named [stack](https://en.wikipedia.org/wiki/Stack_(abstract_data_type)). It supports two operations:
- `push` adds an element to the end.
- `pop` takes an element to the end.
So new elements are added or taken always from the "end".
A stack is usually illustrated as a pack of cards: new cards are added to the top or taken from the top:
![](stack.png) ![](stack.png)
Например, стеком является колода карт, в которую новые карты кладутся сверху, и берутся -- тоже сверху. Arrays in Javascript can work both as a queue and as a stack. They allow to add/remove elements both to/from the beginning or the end. In computer science such a data structure is called [deque](https://en.wikipedia.org/wiki/Double-ended_queue).
Для того, чтобы реализовывать эти структуры данных, и просто для более удобной работы с началом и концом массива существуют специальные методы. **The methods that work with the end of the array:**
### Конец массива
`pop` `pop`
: Удаляет *последний* элемент из массива и возвращает его: : Extracts the last element of the array and returns it:
```js run ```js run
var fruits = ["Яблоко", "Апельсин", "Груша"]; let fruits = ["Apple", "Orange", "Pear"];
alert( fruits.pop() ); // удалили "Груша" alert( fruits.pop() ); // remove "Pear" and alert it
alert( fruits ); // Яблоко, Апельсин alert( fruits ); // Apple, Orange
``` ```
`push` `push`
: Добавляет элемент *в конец* массива: : Append the element to the end of the array:
```js run ```js run
var fruits = ["Яблоко", "Апельсин"]; let fruits = ["Apple", "Orange"];
fruits.push("Груша"); fruits.push("Pear");
alert( fruits ); // Яблоко, Апельсин, Груша alert( fruits ); // Apple, Orange, Pear
``` ```
Вызов `fruits.push(...)` равнозначен `fruits[fruits.length] = ...`. The call `fruits.push(...)` is equal to `fruits[fruits.length] = ...`.
### Начало массива **The methods that work with the beginning of the array:**
`shift` `shift`
: Удаляет из массива *первый* элемент и возвращает его: : Extracts the first element of the array and returns it:
```js ```js
var fruits = ["Яблоко", "Апельсин", "Груша"]; let fruits = ["Apple", "Orange", "Pear"];
alert( fruits.shift() ); // удалили Яблоко alert( fruits.shift() ); // remove Apple and alert it
alert( fruits ); // Апельсин, Груша alert( fruits ); // Orange, Pear
``` ```
`unshift` `unshift`
: Добавляет элемент *в начало* массива: : Add the element to the beginning of the array:
```js ```js
var fruits = ["Апельсин", "Груша"]; let fruits = ["Orange", "Pear"];
fruits.unshift('Яблоко'); fruits.unshift('Apple');
alert( fruits ); // Яблоко, Апельсин, Груша alert( fruits ); // Apple, Orange, Pear
``` ```
Методы `push` и `unshift` могут добавлять сразу по несколько элементов: Methods `push` and `unshift` can add multiple elements at once:
```js run ```js run
var fruits = ["Яблоко"]; let fruits = ["Apple"];
fruits.push("Апельсин", "Персик"); fruits.push("Orange", "Peach");
fruits.unshift("Ананас", "Лимон"); fruits.unshift("Pineapple", "Lemon");
// результат: ["Ананас", "Лимон", "Яблоко", "Апельсин", "Персик"] // ["Pineapple", "Lemon", "Apple", "Orange", "Peach"]
alert( fruits ); alert( fruits );
``` ```
## Внутреннее устройство массива ## Internals
Массив -- это объект, где в качестве ключей выбраны цифры, с дополнительными методами и свойством `length`. An array is a special kind of object. Numbers are used as keys. And there are special methods and optimizations to work with ordered collections of data, but at the core it's still an object.
Так как это объект, то в функцию он передаётся по ссылке: Remember, there are only 7 basic types in JavaScript. Array is an object and thus behaves like an object. For instance, it is passed by reference:
```js run ```js run
function eat(arr) { let fruits = ["Banana"]
arr.pop();
}
var arr = ["нам", "не", "страшен", "серый", "волк"] let arr = fruits;
alert( arr.length ); // 5 alert( arr === fruits ); // the same object
eat(arr);
eat(arr); arr.push("Pear"); // modify it?
alert( arr.length ); // 3, в функцию массив не скопирован, а передана ссылка
alert( fruits ); // Banana, Pear
alert( arr === fruits ); // still the same single object
``` ```
**Ещё одно следствие -- можно присваивать в массив любые свойства.** But what really makes arrays special is their internal representation. The engine tries to store it's elements in the contiguous memory area, one after another, just as painted on the illustrations in this chapter. There are other optimizations as well.
Например: But things break if we quit working with an array as with an "ordered collection" and start working with it as if it were a regular object.
For instance, technically we can go like that:
```js ```js
var fruits = []; // создать массив let fruits = []; // make an array
fruits[99999] = 5; // присвоить свойство с любым номером fruits[99999] = 5; // assign a property with the index far greater than its length
fruits.age = 25; // назначить свойство со строковым именем fruits.age = 25; // create a property with an arbitrary name
``` ```
.. Но массивы для того и придуманы в JavaScript, чтобы удобно работать именно *с упорядоченными, нумерованными данными*. Для этого в них существуют специальные методы и свойство `length`. That's possible, because are objects at base. We can add any properties to them.
Как правило, нет причин использовать массив как обычный объект, хотя технически это и возможно. But the engine will see that we're working with the array as with a regular object. Array-specific optimizations will be turned off, their benefits disappear.
````warn header="Вывод массива с \"дырами\"" The ways to misuse an array:
Если в массиве есть пропущенные индексы, то при выводе в большинстве браузеров появляются "лишние" запятые, например:
```js run - Add a non-numeric property like `arr.test = 5`.
var a = []; - Make holes, like add `arr[0]` and then `arr[1000]`.
a[0] = 0; - Fill the array in reverse order, like `arr[1000]`, `arr[999]` and so on.
a[5] = 5;
alert( a ); // 0,,,,,5 Please think of arrays as about special structures to work with the *ordered data*. They provide special methods for that. And there's the `length` property for that too, which auto-increases and decreases when we add/remove the data.
```
Эти запятые появляются потому, что алгоритм вывода массива идёт от `0` до `arr.length` и выводит всё через запятую. Отсутствие значений даёт несколько запятых подряд. Arrays are specially suited and carefully tuned inside Javascript engines to work with ordered data, please use them this way. And if you need arbitrary keys, chances are high that you actually require a regular object `{}`.
````
### Влияние на быстродействие ## Performance
Методы `push/pop` выполняются быстро, а `shift/unshift` -- медленно. Methods `push/pop` run fast, while `shift/unshift` are slow.
![](array-speed.png) ![](array-speed.png)
Чтобы понять, почему работать с концом массива -- быстрее, чем с его началом, разберём подробнее происходящее при операции: Why is it faster to work with the end of an array than with its beginning? Let's see what happens during the execution:
```js ```js
fruits.shift(); // убрать 1 элемент с начала fruits.shift(); // take 1 element from the start
``` ```
При этом, так как все элементы находятся в своих ячейках, просто удалить элемент с номером `0` недостаточно. Нужно еще и переместить остальные элементы на их новые индексы. It's not enough to take and remove the element with the number `0`. Other elements need to be renumbered as well.
Операция `shift` должна выполнить целых три действия: The `shift` operation must do 3 things:
1. Удалить нулевой элемент. 1. Remove the element with the index `0`.
2. Переместить все свойства влево, с индекса `1` на `0`, с `2` на `1` и так далее. 2. Move all elements to the left, renumber them from the index `1` to `0`, from `2` to `1` and so on.
3. Обновить свойство `length`. 3. Update the `length` property.
![](array-shift.png) ![](array-shift.png)
**Чем больше элементов в массиве, тем дольше их перемещать, это много операций с памятью.** **The more elements in the array, the more time to move them, more in-memory operations.**
Аналогично работает `unshift`: чтобы добавить элемент в начало массива, нужно сначала перенести вправо, в увеличенные индексы, все существующие. The similar thing happens with `unshift`: to add an element to the beginning of the array, we need first to move existing elements to the right, increasing their indexes.
А что же с `push/pop`? Им как раз перемещать ничего не надо. Для того, чтобы удалить элемент, метод `pop` очищает ячейку и укорачивает `length`. And what's with `push/pop`? They do not need to move anything. To extract an element from the end, the `pop` method cleans the index and shortens `length`.
Действия при операции: The actions for the `pop` operation:
```js ```js
fruits.pop(); // убрать 1 элемент с конца fruits.pop(); // take 1 element from the end
``` ```
![](array-pop.png) ![](array-pop.png)
**Перемещать при `pop` не требуется, так как прочие элементы после этой операции остаются на тех же индексах.** **The `pop` method does not need to move anything, because other elements keep their indexes. That's why it's blazingly fast.**
Аналогично работает `push`. The similar thing with the `push` method.
## Перебор элементов
Для перебора элементов обычно используется цикл: ## The for..of and other loops
To process all elements, we can use the regular `for` loop:
```js run ```js run
var arr = ["Яблоко", "Апельсин", "Груша"]; let arr = ["Apple", "Orange", "Pear"];
*!* *!*
for (var i = 0; i < arr.length; i++) { for (let i = 0; i < arr.length; i++) {
alert( arr[i] ); alert( arr[i] );
} }
*/!* */!*
``` ```
````warn header="Не используйте `for..in` для массивов" That's the most optimized and fastest way to loop over the array.
Так как массив является объектом, то возможен и вариант `for..in`:
```js run There's an alternative kind of loops: `for..of`.
var arr = ["Яблоко", "Апельсин", "Груша"];
*!* The syntax:
for (var key in arr) { ```js
*/!* for(let item of arr) {
alert( arr[key] ); // Яблоко, Апельсин, Груша // item is an element of arr
} }
``` ```
Недостатки этого способа: Reminds of `for..in`, right? But a totally different beast.
1. Цикл `for..in` выведет *все свойства* объекта, а не только цифровые. The `for..of` loop works with *iterable* objects. An *iterable* is an object that has a special method named `object[Symbol.iterator]`. We don't need to go any deeper now, because this topic deserves a special chapter and it's going to get it.
В браузере, при работе с объектами страницы, встречаются коллекции элементов, которые по виду как массивы, но имеют дополнительные нецифровые свойства. При переборе таких "похожих на массив" коллекций через `for..in` эти свойства будут выведены, а они как раз не нужны. For now it's enough to know that arrays and many other data structures in modern browsers are iterable. That is, they have proper built-in methods to work with `for..of`.
Бывают и библиотеки, которые предоставляют такие коллекции. Классический `for` надёжно выведет только цифровые свойства, что обычно и требуется. So we can loop over an array like this:
2. Цикл `for (var i=0; i<arr.length; i++)` в современных браузерах выполняется в 10-100 раз быстрее. Казалось бы, по виду он сложнее, но браузер особым образом оптимизирует такие циклы.
Если коротко: цикл `for(var i=0; i<arr.length...)` надёжнее и быстрее.
````
## Особенности работы length
Встроенные методы для работы с массивом автоматически обновляют его длину `length`.
**Длина `length` -- не количество элементов массива, а `последний индекс + 1`**.
Так уж оно устроено.
Это легко увидеть на следующем примере:
```js run ```js run
var arr = []; let arr = ["Apple", "Orange", "Pear"];
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] ? for (let fruit of arr) {
alert( arr[0] ); // undefined! у нас массив без элементов, длины 2 */!*
alert( fruit ); // Apple, Orange, Pear
}
```
Looks clean and nice, right?
````warn header="Don't use `for..in` for arrays"
Technically, because arrays are objects, we could use `for..in`:
```js run
let arr = ["Apple", "Orange", "Pear"];
*!*
for (let key in arr) {
*/!*
alert( arr[key] ); // Apple, Orange, Pear
}
```
But that's actually a bad idea. There are potential problems with it:
1. The loop `for..in` iterates over *all properties*, not only the numeric ones.
In the browser as well as in other environments, there are many collections of elements that *look like arrays*. That is, they have `length` and indexes properties, but they have *other non-numeric properties too*, which we usually don't need. The `for..in` loop will list them. If we need to work with arrays and those array-like structures, then these "extra" properties can become a problem.
2. The `for (let i=0; i<arr.length; i++)` loop in modern engines runs very fast, 10-100 times faster than `for..in`, because it is specially optimized for arrays.
````
So, as a generic recipe, please use:
- `for(let item of arr)` -- as a nice-looking variant, probably most of time,
- `for(let i=0; i<arr.length; i++)` -- as a fastest, old-browser-compatible version,
- `for(let i in arr)` -- never.
## A word about "length"
The `length` property automatically updates when we modify the array. It is actually not the *count* of values in the array, but the greatest numeric index plus one.
For instance, a single element with a large index gives a big length:
```js run
let fruits = [];
fruits[123] = "Apple";
alert( fruits.length ); // 124
```
Note that we usually don't use arrays like that. Want to stick a value in the middle of nowhere? Use an object, unless really know what you're doing.
Another interesting thing about the `length` property is that it's actually writable.
If we increase it manually, nothing interesting happens. But if we decrease it, the array is truncated. The process is irreversable, here's the example:
```js run
let arr = [1, 2, 3, 4, 5];
arr.length = 2; // truncate to 2 elements
alert( arr ); // [1, 2]
arr.length = 5; // return length back
alert( arr[3] ); // undefined: the values do not return
```
So, the simplest way to clear the array is: `arr.length=0`.
## new Array() [#new-array]
There is one more syntax to create an array:
```js
let arr = *!*new Array*/!*("Apple", "Pear", "etc");
```
It's rarely used, because square brackets `[]` are shorter. Also there's a tricky feature with it.
If `new Array` is called with a single argument which is a number, then it creates an array *without items, but with the given length*.
Let's see how one can shoot himself in the foot:
```js run
let arr = new Array(2, 3);
alert( arr[0] ); // 2, created an array of [2, 3], all fine
*!*
arr = new Array(2); // will it create an array of [2] ?
alert( arr[0] ); // undefined! no elements.
alert( arr.length ); // length 2
*/!* */!*
``` ```
Что же такое этот "массив без элементов, но с длиной"? Как такое возможно? In the code above, `new Array(number)` has all elements `undefined`.
Оказывается, очень даже возможно и соответствует объекту `{length: 2}`. Получившийся массив ведёт себя так, как будто его элементы равны `undefined`. To evade such surprises, we usually use square brackets, unless we really know what we're doing.
Это может быть неожиданным сюрпризом, поэтому обычно используют квадратные скобки. ## Multidimentional arrays
### Многомерные массивы Arrays can have items that are also arrays. We can use it for multidimentional arrays, to store matrices:
Массивы в JavaScript могут содержать в качестве элементов другие массивы. Это можно использовать для создания многомерных массивов, например матриц:
```js run ```js run
var matrix = [ let matrix = [
[1, 2, 3], [1, 2, 3],
[4, 5, 6], [4, 5, 6],
[7, 8, 9] [7, 8, 9]
]; ];
alert( matrix[1][1] ); // центральный элемент alert( matrix[1][1] ); // the central element
``` ```
## Внутреннее представление массивов
```warn header="Hardcore coders only" ## Object.keys(obj)
Эта секция относится ко внутреннему устройству структуры данных и требует специальных знаний. Она не обязательна к прочтению.
In the section about objects we talked about iterating over properties in a `for..in` loop.
The method [Object.keys(obj)](mdn:js/Object/keys) returns an array of properties in exactly the same order as `for..in`.
It should be called exactly as given, not `obj.keys()`, but `Object.keys(obj)`.
For instance:
```js run
let phoneCodeByCountry = {
44: "London",
7: "Russia",
1: "Usa"
};
let codes = Object.keys(phoneCodeByCountry);
alert( codes ); // 1, 7, 44
alert( typeof codes[0] ); // string
``` ```
Числовые массивы, согласно спецификации, являются объектами, в которые добавили ряд свойств, методов и автоматическую длину `length`. Но внутри они, как правило, устроены по-другому.
**Современные интерпретаторы стараются оптимизировать их и хранить в памяти не в виде хэш-таблицы, а в виде непрерывной области памяти, по которой легко пробежаться от начала до конца.** Note that object keys are always converted to strings, the last `typeof` highlights that.
Операции с массивами также оптимизируются, особенно если массив хранит только один тип данных, например только числа. Порождаемый набор инструкций для процессора получается очень эффективным.
Чтобы у интерпретатора получались эти оптимизации, программист не должен мешать.
В частности: ## Summary
- Не ставить массиву произвольные свойства, такие как `arr.test = 5`. То есть, работать именно как с массивом, а не как с объектом. An array is a special kind of objects, suited to store and manage ordered data items.
- Заполнять массив непрерывно и по возрастающей. Как только браузер встречает необычное поведение массива, например устанавливается значение `arr[0]`, а потом сразу `arr[1000]`, то он начинает работать с ним, как с обычным объектом. Как правило, это влечёт преобразование его в хэш-таблицу.
Если следовать этим принципам, то массивы будут занимать меньше памяти и быстрее работать. - The declaration:
## Итого
Массивы существуют для работы с упорядоченным набором элементов.
**Объявление:**
```js ```js
// предпочтительное // square brackets (usual)
var arr = [элемент1, элемент2...]; let arr = [item1, item2...];
// new Array // new Array (exceptionally rare)
var arr = new Array(элемент1, элемент2...); let arr = new Array(item1, item2...);
``` ```
При этом `new Array(число)` создаёт массив заданной длины, *без элементов*. Чтобы избежать ошибок, предпочтителен первый синтаксис. The call to `new Array(number)` creates an array with the given length, but without elements.
**Свойство `length`** -- длина массива. Если точнее, то последний индекс массива плюс `1`. Если её уменьшить вручную, то массив укоротится. Если `length` больше реального количества элементов, то отсутствующие элементы равны `undefined`. - The `length` property is the array length or, to be precise, its last numeric index plus one. It is auto-adjusted by array methods.
- If we shorten `length` manually, the array is truncated.
Массив можно использовать как очередь или стек. We can use an array as a deque with the following operations:
**Операции с концом массива:** - `push(...items)` adds `items` to the end.
- `pop()` removes the element from the end and returns it.
- `shift()` removes the element from the beginning and returns it.
- `unshift(...items)` adds items to the beginning.
- `arr.push(элемент1, элемент2...)` добавляет элементы в конец. To loop over the elements of the array:
- `var elem = arr.pop()` удаляет и возвращает последний элемент. - `for(let item of arr)` -- looks nice,
- `for(let i=0; i<arr.length; i++)` -- works fastest, old-browser-compatible.
- `for(let i in arr)` -- never use.
**Операции с началом массива:** To get an array of object properties:
- `Object.keys(obj)`
- `arr.unshift(элемент1, элемент2...)` добавляет элементы в начало.
- `var elem = arr.shift()` удаляет и возвращает первый элемент.
Эти операции перенумеровывают все элементы, поэтому работают медленно.
В следующей главе мы рассмотрим другие методы для работы с массивами.
That were the "extended basics". There are more methods. In the next chapter we'll study them in detail.

BIN
1-js/4-data-structures/7-array/queue.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.7 KiB

After

Width:  |  Height:  |  Size: 6 KiB

Before After
Before After

BIN
1-js/4-data-structures/7-array/queue@2x.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 13 KiB

Before After
Before After

BIN
1-js/4-data-structures/7-array/stack.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.1 KiB

After

Width:  |  Height:  |  Size: 11 KiB

Before After
Before After

Some files were not shown because too many files have changed in this diff Show more