diff --git a/1-js/2-first-steps/19-function-expression/article.md b/1-js/2-first-steps/19-function-expression/article.md index 38ebf093..a062c173 100644 --- a/1-js/2-first-steps/19-function-expression/article.md +++ b/1-js/2-first-steps/19-function-expression/article.md @@ -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 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. ``` +## 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 + + - 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 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. -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. diff --git a/1-js/4-data-structures/10-arguments-pseudoarray/1-check-arguments-undefined/solution.md b/1-js/4-data-structures/10-arguments-pseudoarray/1-check-arguments-undefined/solution.md deleted file mode 100644 index 09151b46..00000000 --- a/1-js/4-data-structures/10-arguments-pseudoarray/1-check-arguments-undefined/solution.md +++ /dev/null @@ -1,11 +0,0 @@ -Узнать количество реально переданных аргументов можно по значению `arguments.length`: - -```js run -function f(x) { - alert( arguments.length ? 1 : 0 ); -} - -f(undefined); -f(); -``` - diff --git a/1-js/4-data-structures/10-arguments-pseudoarray/1-check-arguments-undefined/task.md b/1-js/4-data-structures/10-arguments-pseudoarray/1-check-arguments-undefined/task.md deleted file mode 100644 index c02da655..00000000 --- a/1-js/4-data-structures/10-arguments-pseudoarray/1-check-arguments-undefined/task.md +++ /dev/null @@ -1,18 +0,0 @@ -importance: 5 - ---- - -# Проверка на аргумент-undefined - -Как в функции отличить отсутствующий аргумент от `undefined`? - -```js -function f(x) { - // ..ваш код.. - // выведите 1, если первый аргумент есть, и 0 - если нет -} - -f(undefined); // 1 -f(); // 0 -``` - diff --git a/1-js/4-data-structures/10-arguments-pseudoarray/2-sum-arguments/solution.md b/1-js/4-data-structures/10-arguments-pseudoarray/2-sum-arguments/solution.md deleted file mode 100644 index 27a9a8cc..00000000 --- a/1-js/4-data-structures/10-arguments-pseudoarray/2-sum-arguments/solution.md +++ /dev/null @@ -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 -``` - diff --git a/1-js/4-data-structures/10-arguments-pseudoarray/2-sum-arguments/task.md b/1-js/4-data-structures/10-arguments-pseudoarray/2-sum-arguments/task.md deleted file mode 100644 index de719f24..00000000 --- a/1-js/4-data-structures/10-arguments-pseudoarray/2-sum-arguments/task.md +++ /dev/null @@ -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 -``` - diff --git a/1-js/4-data-structures/10-arguments-pseudoarray/article.md b/1-js/4-data-structures/10-arguments-pseudoarray/article.md deleted file mode 100644 index bcebdf75..00000000 --- a/1-js/4-data-structures/10-arguments-pseudoarray/article.md +++ /dev/null @@ -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` просто переопределит первое. -```` - -## Доступ к "лишним" аргументам - -Как получить значения аргументов, которых нет в списке параметров? - -Доступ к ним осуществляется через "псевдо-массив" arguments. - -Он содержит список аргументов по номерам: `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 -} -``` - diff --git a/1-js/4-data-structures/10-arguments-pseudoarray/head.html b/1-js/4-data-structures/10-arguments-pseudoarray/head.html deleted file mode 100644 index 49d09dd5..00000000 --- a/1-js/4-data-structures/10-arguments-pseudoarray/head.html +++ /dev/null @@ -1,14 +0,0 @@ - \ No newline at end of file diff --git a/1-js/4-data-structures/11-datetime/1-new-date/solution.md b/1-js/4-data-structures/11-date/1-new-date/solution.md similarity index 100% rename from 1-js/4-data-structures/11-datetime/1-new-date/solution.md rename to 1-js/4-data-structures/11-date/1-new-date/solution.md diff --git a/1-js/4-data-structures/11-datetime/1-new-date/task.md b/1-js/4-data-structures/11-date/1-new-date/task.md similarity index 100% rename from 1-js/4-data-structures/11-datetime/1-new-date/task.md rename to 1-js/4-data-structures/11-date/1-new-date/task.md diff --git a/1-js/4-data-structures/11-datetime/2-get-week-day/_js.view/solution.js b/1-js/4-data-structures/11-date/2-get-week-day/_js.view/solution.js similarity index 100% rename from 1-js/4-data-structures/11-datetime/2-get-week-day/_js.view/solution.js rename to 1-js/4-data-structures/11-date/2-get-week-day/_js.view/solution.js diff --git a/1-js/4-data-structures/11-datetime/2-get-week-day/_js.view/test.js b/1-js/4-data-structures/11-date/2-get-week-day/_js.view/test.js similarity index 100% rename from 1-js/4-data-structures/11-datetime/2-get-week-day/_js.view/test.js rename to 1-js/4-data-structures/11-date/2-get-week-day/_js.view/test.js diff --git a/1-js/4-data-structures/11-datetime/2-get-week-day/solution.md b/1-js/4-data-structures/11-date/2-get-week-day/solution.md similarity index 100% rename from 1-js/4-data-structures/11-datetime/2-get-week-day/solution.md rename to 1-js/4-data-structures/11-date/2-get-week-day/solution.md diff --git a/1-js/4-data-structures/11-datetime/2-get-week-day/task.md b/1-js/4-data-structures/11-date/2-get-week-day/task.md similarity index 100% rename from 1-js/4-data-structures/11-datetime/2-get-week-day/task.md rename to 1-js/4-data-structures/11-date/2-get-week-day/task.md diff --git a/1-js/4-data-structures/11-datetime/3-weekday/_js.view/solution.js b/1-js/4-data-structures/11-date/3-weekday/_js.view/solution.js similarity index 100% rename from 1-js/4-data-structures/11-datetime/3-weekday/_js.view/solution.js rename to 1-js/4-data-structures/11-date/3-weekday/_js.view/solution.js diff --git a/1-js/4-data-structures/11-datetime/3-weekday/_js.view/test.js b/1-js/4-data-structures/11-date/3-weekday/_js.view/test.js similarity index 100% rename from 1-js/4-data-structures/11-datetime/3-weekday/_js.view/test.js rename to 1-js/4-data-structures/11-date/3-weekday/_js.view/test.js diff --git a/1-js/4-data-structures/11-datetime/3-weekday/solution.md b/1-js/4-data-structures/11-date/3-weekday/solution.md similarity index 100% rename from 1-js/4-data-structures/11-datetime/3-weekday/solution.md rename to 1-js/4-data-structures/11-date/3-weekday/solution.md diff --git a/1-js/4-data-structures/11-datetime/3-weekday/task.md b/1-js/4-data-structures/11-date/3-weekday/task.md similarity index 100% rename from 1-js/4-data-structures/11-datetime/3-weekday/task.md rename to 1-js/4-data-structures/11-date/3-weekday/task.md diff --git a/1-js/4-data-structures/11-datetime/4-get-date-ago/_js.view/solution.js b/1-js/4-data-structures/11-date/4-get-date-ago/_js.view/solution.js similarity index 100% rename from 1-js/4-data-structures/11-datetime/4-get-date-ago/_js.view/solution.js rename to 1-js/4-data-structures/11-date/4-get-date-ago/_js.view/solution.js diff --git a/1-js/4-data-structures/11-datetime/4-get-date-ago/_js.view/test.js b/1-js/4-data-structures/11-date/4-get-date-ago/_js.view/test.js similarity index 100% rename from 1-js/4-data-structures/11-datetime/4-get-date-ago/_js.view/test.js rename to 1-js/4-data-structures/11-date/4-get-date-ago/_js.view/test.js diff --git a/1-js/4-data-structures/11-datetime/4-get-date-ago/solution.md b/1-js/4-data-structures/11-date/4-get-date-ago/solution.md similarity index 100% rename from 1-js/4-data-structures/11-datetime/4-get-date-ago/solution.md rename to 1-js/4-data-structures/11-date/4-get-date-ago/solution.md diff --git a/1-js/4-data-structures/11-datetime/4-get-date-ago/task.md b/1-js/4-data-structures/11-date/4-get-date-ago/task.md similarity index 100% rename from 1-js/4-data-structures/11-datetime/4-get-date-ago/task.md rename to 1-js/4-data-structures/11-date/4-get-date-ago/task.md diff --git a/1-js/4-data-structures/11-datetime/5-last-day-of-month/_js.view/solution.js b/1-js/4-data-structures/11-date/5-last-day-of-month/_js.view/solution.js similarity index 100% rename from 1-js/4-data-structures/11-datetime/5-last-day-of-month/_js.view/solution.js rename to 1-js/4-data-structures/11-date/5-last-day-of-month/_js.view/solution.js diff --git a/1-js/4-data-structures/11-datetime/5-last-day-of-month/_js.view/test.js b/1-js/4-data-structures/11-date/5-last-day-of-month/_js.view/test.js similarity index 100% rename from 1-js/4-data-structures/11-datetime/5-last-day-of-month/_js.view/test.js rename to 1-js/4-data-structures/11-date/5-last-day-of-month/_js.view/test.js diff --git a/1-js/4-data-structures/11-datetime/5-last-day-of-month/solution.md b/1-js/4-data-structures/11-date/5-last-day-of-month/solution.md similarity index 100% rename from 1-js/4-data-structures/11-datetime/5-last-day-of-month/solution.md rename to 1-js/4-data-structures/11-date/5-last-day-of-month/solution.md diff --git a/1-js/4-data-structures/11-datetime/5-last-day-of-month/task.md b/1-js/4-data-structures/11-date/5-last-day-of-month/task.md similarity index 100% rename from 1-js/4-data-structures/11-datetime/5-last-day-of-month/task.md rename to 1-js/4-data-structures/11-date/5-last-day-of-month/task.md diff --git a/1-js/4-data-structures/11-datetime/6-get-seconds-today/solution.md b/1-js/4-data-structures/11-date/6-get-seconds-today/solution.md similarity index 100% rename from 1-js/4-data-structures/11-datetime/6-get-seconds-today/solution.md rename to 1-js/4-data-structures/11-date/6-get-seconds-today/solution.md diff --git a/1-js/4-data-structures/11-datetime/6-get-seconds-today/task.md b/1-js/4-data-structures/11-date/6-get-seconds-today/task.md similarity index 100% rename from 1-js/4-data-structures/11-datetime/6-get-seconds-today/task.md rename to 1-js/4-data-structures/11-date/6-get-seconds-today/task.md diff --git a/1-js/4-data-structures/11-datetime/7-get-seconds-to-tomorrow/solution.md b/1-js/4-data-structures/11-date/7-get-seconds-to-tomorrow/solution.md similarity index 100% rename from 1-js/4-data-structures/11-datetime/7-get-seconds-to-tomorrow/solution.md rename to 1-js/4-data-structures/11-date/7-get-seconds-to-tomorrow/solution.md diff --git a/1-js/4-data-structures/11-datetime/7-get-seconds-to-tomorrow/task.md b/1-js/4-data-structures/11-date/7-get-seconds-to-tomorrow/task.md similarity index 100% rename from 1-js/4-data-structures/11-datetime/7-get-seconds-to-tomorrow/task.md rename to 1-js/4-data-structures/11-date/7-get-seconds-to-tomorrow/task.md diff --git a/1-js/4-data-structures/11-datetime/8-format-date-ddmmyy/_js.view/solution.js b/1-js/4-data-structures/11-date/8-format-date-ddmmyy/_js.view/solution.js similarity index 100% rename from 1-js/4-data-structures/11-datetime/8-format-date-ddmmyy/_js.view/solution.js rename to 1-js/4-data-structures/11-date/8-format-date-ddmmyy/_js.view/solution.js diff --git a/1-js/4-data-structures/11-datetime/8-format-date-ddmmyy/_js.view/test.js b/1-js/4-data-structures/11-date/8-format-date-ddmmyy/_js.view/test.js similarity index 100% rename from 1-js/4-data-structures/11-datetime/8-format-date-ddmmyy/_js.view/test.js rename to 1-js/4-data-structures/11-date/8-format-date-ddmmyy/_js.view/test.js diff --git a/1-js/4-data-structures/11-datetime/8-format-date-ddmmyy/solution.md b/1-js/4-data-structures/11-date/8-format-date-ddmmyy/solution.md similarity index 100% rename from 1-js/4-data-structures/11-datetime/8-format-date-ddmmyy/solution.md rename to 1-js/4-data-structures/11-date/8-format-date-ddmmyy/solution.md diff --git a/1-js/4-data-structures/11-datetime/8-format-date-ddmmyy/task.md b/1-js/4-data-structures/11-date/8-format-date-ddmmyy/task.md similarity index 100% rename from 1-js/4-data-structures/11-datetime/8-format-date-ddmmyy/task.md rename to 1-js/4-data-structures/11-date/8-format-date-ddmmyy/task.md diff --git a/1-js/4-data-structures/11-datetime/9-format-date-relative/_js.view/solution.js b/1-js/4-data-structures/11-date/9-format-date-relative/_js.view/solution.js similarity index 100% rename from 1-js/4-data-structures/11-datetime/9-format-date-relative/_js.view/solution.js rename to 1-js/4-data-structures/11-date/9-format-date-relative/_js.view/solution.js diff --git a/1-js/4-data-structures/11-datetime/9-format-date-relative/_js.view/test.js b/1-js/4-data-structures/11-date/9-format-date-relative/_js.view/test.js similarity index 100% rename from 1-js/4-data-structures/11-datetime/9-format-date-relative/_js.view/test.js rename to 1-js/4-data-structures/11-date/9-format-date-relative/_js.view/test.js diff --git a/1-js/4-data-structures/11-datetime/9-format-date-relative/solution.md b/1-js/4-data-structures/11-date/9-format-date-relative/solution.md similarity index 100% rename from 1-js/4-data-structures/11-datetime/9-format-date-relative/solution.md rename to 1-js/4-data-structures/11-date/9-format-date-relative/solution.md diff --git a/1-js/4-data-structures/11-datetime/9-format-date-relative/task.md b/1-js/4-data-structures/11-date/9-format-date-relative/task.md similarity index 100% rename from 1-js/4-data-structures/11-datetime/9-format-date-relative/task.md rename to 1-js/4-data-structures/11-date/9-format-date-relative/task.md diff --git a/1-js/4-data-structures/11-date/article.md b/1-js/4-data-structures/11-date/article.md new file mode 100644 index 00000000..d7ff7fe6 --- /dev/null +++ b/1-js/4-data-structures/11-date/article.md @@ -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 . +``` + +## 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 в документации к методу MSDN Date.parse. + +Конечно же, сейчас лучше использовать современный формат. Если же нужна поддержка 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 раз точнее. + diff --git a/1-js/4-data-structures/11-datetime/article.md b/1-js/4-data-structures/11-datetime/article.md deleted file mode 100644 index 52780ec8..00000000 --- a/1-js/4-data-structures/11-datetime/article.md +++ /dev/null @@ -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-файл, если точнее -- с момента выгрузки предыдущей страницы из памяти. - -Так что это время включает в себя всё, включая начальное обращение к серверу. - -Его можно посмотреть в любом месте страницы, даже в ``, чтобы узнать, сколько времени потребовалось браузеру, чтобы до него добраться, включая загрузку 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 -``` - -Вы сможете подробно узнать о них в статье , которая посвящена этому стандарту. - -**Методы вывода без локализации:** - -`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()` -
То же самое, что `toString()`, но дата в зоне UTC. - -
`toISOString()`
-
Возвращает дату в формате ISO Детали формата будут далее. Поддерживается современными браузерами, не поддерживается IE8-. - -```js run -var d = new Date(); - -alert( d.toISOString() ); // вывод, похожий на '2011-01-26T13:51:50.417Z' -``` - -
- -Если хочется иметь большую гибкость и кросс-браузерность, то также можно воспользоваться специальной библиотекой, например [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 в документации к методу MSDN Date.parse. - -Конечно же, сейчас лучше использовать современный формат. Если же нужна поддержка 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 раз точнее. - diff --git a/1-js/4-data-structures/3-string/article.md b/1-js/4-data-structures/3-string/article.md index f0f9856e..90589716 100644 --- a/1-js/4-data-structures/3-string/article.md +++ b/1-js/4-data-structures/3-string/article.md @@ -139,7 +139,7 @@ alert( `The backslash: \\` ); // The backslash: \ 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 let str = `Hello`; @@ -198,7 +198,7 @@ In the following sections we'll see more examples of that. ## 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 alert( 'Interface'.toUpperCase() ); // INTERFACE @@ -217,7 +217,7 @@ There are multiple ways to look for a substring in a string. ### 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. @@ -276,7 +276,7 @@ while ((pos = str.indexOf(target, pos + 1)) != -1) { ``` ```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. ``` @@ -339,7 +339,7 @@ Just remember: `if (~str.indexOf(...))` reads as "if found". ### 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: @@ -349,7 +349,7 @@ alert( "Widget with id".includes("Widget") ); // true 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 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. -[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 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`. -`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: @@ -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. -It is implemented by [str.normalize()](mdn:String/normalize). +It is implemented by [str.normalize()](mdn:js/String/normalize). ```js run 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 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. diff --git a/1-js/4-data-structures/4-object/article.md b/1-js/4-data-structures/4-object/article.md index 4f8b2f8b..ef20fbc3 100644 --- a/1-js/4-data-structures/4-object/article.md +++ b/1-js/4-data-structures/4-object/article.md @@ -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: ```js -let obj = new Object(); // works same as below -let obj = {}; +let user = new Object(); // works the same as below +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 let user = { name: "John", 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 @@ -134,15 +160,15 @@ alert( "age" in user ); // true, user.age exists 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 let user = { age: 30 }; 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`. @@ -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. -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. - 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. -```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`. 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: ```js -let message = "hello"; +let message = "Hello!"; 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) @@ -358,16 +380,18 @@ Now we have two variables, each one with the reference to the same object: ![](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 let user = { name: 'John' }; 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 ``` @@ -405,13 +429,17 @@ clone.name = "Pete"; // changed the data in it 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 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: ```js @@ -420,12 +448,25 @@ let user = { name: "John" }; let permissions1 = { canView: true }; let permissions2 = { canEdit: true }; +// copies all properties from permissions1 and permissions2 into user Object.assign(user, permissions1, permissions2); // 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 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". -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 diff --git a/1-js/4-data-structures/4-object/object-person-1.png b/1-js/4-data-structures/4-object/object-person-1.png deleted file mode 100644 index 18c690d6..00000000 Binary files a/1-js/4-data-structures/4-object/object-person-1.png and /dev/null differ diff --git a/1-js/4-data-structures/4-object/object-person-1@2x.png b/1-js/4-data-structures/4-object/object-person-1@2x.png deleted file mode 100644 index 09c54169..00000000 Binary files a/1-js/4-data-structures/4-object/object-person-1@2x.png and /dev/null differ diff --git a/1-js/4-data-structures/4-object/object-person-2.png b/1-js/4-data-structures/4-object/object-person-2.png deleted file mode 100644 index 6251154f..00000000 Binary files a/1-js/4-data-structures/4-object/object-person-2.png and /dev/null differ diff --git a/1-js/4-data-structures/4-object/object-person-2@2x.png b/1-js/4-data-structures/4-object/object-person-2@2x.png deleted file mode 100644 index 6a4edcf5..00000000 Binary files a/1-js/4-data-structures/4-object/object-person-2@2x.png and /dev/null differ diff --git a/1-js/4-data-structures/4-object/object-person-empty.png b/1-js/4-data-structures/4-object/object-person-empty.png deleted file mode 100644 index 4b3393b7..00000000 Binary files a/1-js/4-data-structures/4-object/object-person-empty.png and /dev/null differ diff --git a/1-js/4-data-structures/4-object/object-person-empty@2x.png b/1-js/4-data-structures/4-object/object-person-empty@2x.png deleted file mode 100644 index 9aea3030..00000000 Binary files a/1-js/4-data-structures/4-object/object-person-empty@2x.png and /dev/null differ diff --git a/1-js/4-data-structures/4-object/object-reference-console.png b/1-js/4-data-structures/4-object/object-reference-console.png deleted file mode 100644 index 9944a2df..00000000 Binary files a/1-js/4-data-structures/4-object/object-reference-console.png and /dev/null differ diff --git a/1-js/4-data-structures/4-object/object-reference-console@2x.png b/1-js/4-data-structures/4-object/object-reference-console@2x.png deleted file mode 100644 index bfb0a3cf..00000000 Binary files a/1-js/4-data-structures/4-object/object-reference-console@2x.png and /dev/null differ diff --git a/1-js/4-data-structures/4-object/object-user-empty.png b/1-js/4-data-structures/4-object/object-user-empty.png new file mode 100644 index 00000000..483d072c Binary files /dev/null and b/1-js/4-data-structures/4-object/object-user-empty.png differ diff --git a/1-js/4-data-structures/4-object/object-user-empty@2x.png b/1-js/4-data-structures/4-object/object-user-empty@2x.png new file mode 100644 index 00000000..8db894cb Binary files /dev/null and b/1-js/4-data-structures/4-object/object-user-empty@2x.png differ diff --git a/1-js/4-data-structures/4-object/object-user-props.png b/1-js/4-data-structures/4-object/object-user-props.png new file mode 100644 index 00000000..2bfdfabd Binary files /dev/null and b/1-js/4-data-structures/4-object/object-user-props.png differ diff --git a/1-js/4-data-structures/4-object/object-user-props@2x.png b/1-js/4-data-structures/4-object/object-user-props@2x.png new file mode 100644 index 00000000..4935b59c Binary files /dev/null and b/1-js/4-data-structures/4-object/object-user-props@2x.png differ diff --git a/1-js/4-data-structures/4-object/object.png b/1-js/4-data-structures/4-object/object.png index e4a3352a..f94d094a 100644 Binary files a/1-js/4-data-structures/4-object/object.png and b/1-js/4-data-structures/4-object/object.png differ diff --git a/1-js/4-data-structures/4-object/object@2x.png b/1-js/4-data-structures/4-object/object@2x.png index 167587bf..003c2f6e 100644 Binary files a/1-js/4-data-structures/4-object/object@2x.png and b/1-js/4-data-structures/4-object/object@2x.png differ diff --git a/1-js/4-data-structures/4-object/variable-contains-reference.png b/1-js/4-data-structures/4-object/variable-contains-reference.png index 25d2095f..d6e7fddf 100644 Binary files a/1-js/4-data-structures/4-object/variable-contains-reference.png and b/1-js/4-data-structures/4-object/variable-contains-reference.png differ diff --git a/1-js/4-data-structures/4-object/variable-contains-reference@2x.png b/1-js/4-data-structures/4-object/variable-contains-reference@2x.png index 3e0743fd..145bad29 100644 Binary files a/1-js/4-data-structures/4-object/variable-contains-reference@2x.png and b/1-js/4-data-structures/4-object/variable-contains-reference@2x.png differ diff --git a/1-js/4-data-structures/4-object/variable-copy-reference.png b/1-js/4-data-structures/4-object/variable-copy-reference.png index e68b0542..97510c4b 100644 Binary files a/1-js/4-data-structures/4-object/variable-copy-reference.png and b/1-js/4-data-structures/4-object/variable-copy-reference.png differ diff --git a/1-js/4-data-structures/4-object/variable-copy-reference@2x.png b/1-js/4-data-structures/4-object/variable-copy-reference@2x.png index 2baf172b..a64238a5 100644 Binary files a/1-js/4-data-structures/4-object/variable-copy-reference@2x.png and b/1-js/4-data-structures/4-object/variable-copy-reference@2x.png differ diff --git a/1-js/4-data-structures/4-object/variable-copy-value.png b/1-js/4-data-structures/4-object/variable-copy-value.png index 9140ef16..e21af099 100644 Binary files a/1-js/4-data-structures/4-object/variable-copy-value.png and b/1-js/4-data-structures/4-object/variable-copy-value.png differ diff --git a/1-js/4-data-structures/4-object/variable-copy-value@2x.png b/1-js/4-data-structures/4-object/variable-copy-value@2x.png index 4cd3ad09..2f0b2f47 100644 Binary files a/1-js/4-data-structures/4-object/variable-copy-value@2x.png and b/1-js/4-data-structures/4-object/variable-copy-value@2x.png differ diff --git a/1-js/4-data-structures/7-array/1-get-last-in-array/solution.md b/1-js/4-data-structures/7-array/1-get-last-in-array/solution.md deleted file mode 100644 index 6c5956a9..00000000 --- a/1-js/4-data-structures/7-array/1-get-last-in-array/solution.md +++ /dev/null @@ -1,16 +0,0 @@ -Последний элемент имеет индекс на `1` меньший, чем длина массива. - -Например: - -```js -var fruits = ["Яблоко", "Груша", "Слива"]; -``` - -Длина массива этого массива `fruits.length` равна `3`. Здесь "Яблоко" имеет индекс `0`, "Груша" -- индекс `1`, "Слива" -- индекс `2`. - -То есть, для массива длины `goods`: - -```js -var lastItem = goods[goods.length - 1]; // получить последний элемент -``` - diff --git a/1-js/4-data-structures/7-array/1-get-last-in-array/task.md b/1-js/4-data-structures/7-array/1-get-last-in-array/task.md deleted file mode 100644 index c31a1a92..00000000 --- a/1-js/4-data-structures/7-array/1-get-last-in-array/task.md +++ /dev/null @@ -1,11 +0,0 @@ -importance: 5 - ---- - -# Получить последний элемент массива - -Как получить последний элемент из произвольного массива? - -У нас есть массив `goods`. Сколько в нем элементов -- не знаем, но можем прочитать из `goods.length`. - -Напишите код для получения последнего элемента `goods`. \ No newline at end of file diff --git a/1-js/4-data-structures/7-array/10-maximal-subarray/_js.view/solution.js b/1-js/4-data-structures/7-array/10-maximal-subarray/_js.view/solution.js index 5835fb09..51632837 100644 --- a/1-js/4-data-structures/7-array/10-maximal-subarray/_js.view/solution.js +++ b/1-js/4-data-structures/7-array/10-maximal-subarray/_js.view/solution.js @@ -1,8 +1,9 @@ function getMaxSubSum(arr) { - var maxSum = 0, - partialSum = 0; - for (var i = 0; i < arr.length; i++) { - partialSum += arr[i]; + let maxSum = 0; + let partialSum = 0; + + for (let item of arr) { + partialSum += item; maxSum = Math.max(maxSum, partialSum); if (partialSum < 0) partialSum = 0; } diff --git a/1-js/4-data-structures/7-array/10-maximal-subarray/_js.view/test.js b/1-js/4-data-structures/7-array/10-maximal-subarray/_js.view/test.js index 4fc8605e..143ad534 100644 --- a/1-js/4-data-structures/7-array/10-maximal-subarray/_js.view/test.js +++ b/1-js/4-data-structures/7-array/10-maximal-subarray/_js.view/test.js @@ -1,33 +1,33 @@ 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); }); - 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); }); - 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); }); - 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); }); - 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); }); - it("максимальная подсумма [] равна 0", function() { + it("maximal subsum of [] equals 0", function() { assert.equal(getMaxSubSum([]), 0); }); - it("максимальная подсумма [-1] равна 0", function() { + it("maximal subsum of [-1] equals 0", function() { 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); }); }); \ No newline at end of file diff --git a/1-js/4-data-structures/7-array/10-maximal-subarray/solution.md b/1-js/4-data-structures/7-array/10-maximal-subarray/solution.md index bf8d1a20..dfc6e2eb 100644 --- a/1-js/4-data-structures/7-array/10-maximal-subarray/solution.md +++ b/1-js/4-data-structures/7-array/10-maximal-subarray/solution.md @@ -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 -// Начиная с -1: +// Starting from -1: -1 -1 + 2 -1 + 2 + 3 -1 + 2 + 3 + (-9) -1 + 2 + 3 + (-9) + 11 -// Начиная с 2: +// Starting from 2: 2 2 + 3 2 + 3 + (-9) 2 + 3 + (-9) + 11 -// Начиная с 3: +// Starting from 3: 3 3 + (-9) 3 + (-9) + 11 -// Начиная с -9 +// Starting from -9 -9 -9 + 11 -// Начиная с -11 +// Starting from -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 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++) { - var sumFixedStart = 0; - for (var j = i; j < arr.length; j++) { + for (let i = 0; i < arr.length; i++) { + let sumFixedStart = 0; + for (let j = i; j < arr.length; j++) { sumFixedStart += arr[j]; maxSum = Math.max(maxSum, sumFixedStart); } @@ -58,29 +57,27 @@ alert( getMaxSubSum([1, 2, 3]) ); // 6 alert( getMaxSubSum([100, -9, 2, -3, 5]) ); // 100 ``` -Такое решение имеет [оценку сложности](http://ru.wikipedia.org/wiki/%C2%ABO%C2%BB_%D0%B1%D0%BE%D0%BB%D1%8C%D1%88%D0%BE%D0%B5_%D0%B8_%C2%ABo%C2%BB_%D0%BC%D0%B0%D0%BB%D0%BE%D0%B5) O(n2), то есть при увеличении массива в 2 раза алгоритм требует в 4 раза больше времени. На больших массивах (1000, 10000 и более элементов) такие алгоритмы могут приводить к серьёзным "тормозам". +The solution has a time complexety of [O(n2)](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 function getMaxSubSum(arr) { - var maxSum = 0, - partialSum = 0; - for (var i = 0; i < arr.length; i++) { - partialSum += arr[i]; - maxSum = Math.max(maxSum, partialSum); - if (partialSum < 0) partialSum = 0; + let maxSum = 0; + let partialSum = 0; + + for (let item of arr; i++) { // for each item of arr + partialSum += item; // add it to partialSum + maxSum = Math.max(maxSum, partialSum); // remember the maximum + if (partialSum < 0) partialSum = 0; // zero if negative } + return maxSum; } @@ -92,6 +89,7 @@ alert( getMaxSubSum([1, 2, 3]) ); // 6 alert( getMaxSubSum([-1, -2, -3]) ); // 0 ``` -Информацию об алгоритме вы также можете прочитать здесь: и здесь: [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)`. \ No newline at end of file diff --git a/1-js/4-data-structures/7-array/10-maximal-subarray/task.md b/1-js/4-data-structures/7-array/10-maximal-subarray/task.md index a78412b9..b5ffc4c2 100644 --- a/1-js/4-data-structures/7-array/10-maximal-subarray/task.md +++ b/1-js/4-data-structures/7-array/10-maximal-subarray/task.md @@ -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 -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([-1, 2, 3, -9, *!*11*/!*]) = 11 getMaxSubSum([-2, -1, *!*1, 2*/!*]) = 3 getMaxSubSum([*!*100*/!*, -9, 2, -3, 5]) = 100 -getMaxSubSum([*!*1, 2, 3*/!*]) = 6 (неотрицательные - берем всех) +getMaxSubSum([*!*1, 2, 3*/!*]) = 6 (take all) ``` -Если все элементы отрицательные, то не берём ни одного элемента и считаем сумму равной нулю: +If all items are negative, it means that we take none (the subarray is empty), so the sum is zero: ```js getMaxSubSum([-1, -2, -3]) = 0 ``` -Постарайтесь придумать решение, которое работает за O(n2), а лучше за O(n) операций. \ No newline at end of file +Please try to think of a fast solution: [O(n2)](https://en.wikipedia.org/wiki/Big_O_notation) or even O(n) if you can. \ No newline at end of file diff --git a/1-js/4-data-structures/7-array/2-add-item-to-array/solution.md b/1-js/4-data-structures/7-array/2-add-item-to-array/solution.md deleted file mode 100644 index 9f72e68b..00000000 --- a/1-js/4-data-structures/7-array/2-add-item-to-array/solution.md +++ /dev/null @@ -1,6 +0,0 @@ -Текущий последний элемент имеет индекс `goods.length-1`. Значит, индексом нового элемента будет `goods.length`: - -```js -goods[goods.length] = 'Компьютер' -``` - diff --git a/1-js/4-data-structures/7-array/2-add-item-to-array/task.md b/1-js/4-data-structures/7-array/2-add-item-to-array/task.md deleted file mode 100644 index 4d47dad3..00000000 --- a/1-js/4-data-structures/7-array/2-add-item-to-array/task.md +++ /dev/null @@ -1,9 +0,0 @@ -importance: 5 - ---- - -# Добавить новый элемент в массив - -Как добавить элемент в конец произвольного массива? - -У нас есть массив `goods`. Напишите код для добавления в его конец значения "Компьютер". diff --git a/1-js/4-data-structures/7-array/2-item-value/solution.md b/1-js/4-data-structures/7-array/2-item-value/solution.md new file mode 100644 index 00000000..e631f1c7 --- /dev/null +++ b/1-js/4-data-structures/7-array/2-item-value/solution.md @@ -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. + diff --git a/1-js/4-data-structures/7-array/2-item-value/task.md b/1-js/4-data-structures/7-array/2-item-value/task.md new file mode 100644 index 00000000..d09ef022 --- /dev/null +++ b/1-js/4-data-structures/7-array/2-item-value/task.md @@ -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 ); // ? +``` + diff --git a/1-js/4-data-structures/7-array/3-create-array/solution.md b/1-js/4-data-structures/7-array/3-create-array/solution.md index ef1da240..24351434 100644 --- a/1-js/4-data-structures/7-array/3-create-array/solution.md +++ b/1-js/4-data-structures/7-array/3-create-array/solution.md @@ -1,10 +1,10 @@ ```js run -var styles = ["Джаз", "Блюз"]; -styles.push("Рок-н-Ролл"); -styles[styles.length - 2] = "Классика"; +let styles = ["Jazz", "Blues"]; +styles.push("Rock-n-Roll"); +styles[(styles.length + 1) / 2] = "Classics"; alert( styles.shift() ); -styles.unshift("Рэп", "Регги "); +styles.unshift("Rap", "Reggie"); ``` diff --git a/1-js/4-data-structures/7-array/3-create-array/task.md b/1-js/4-data-structures/7-array/3-create-array/task.md index bf67925d..e6dab6a9 100644 --- a/1-js/4-data-structures/7-array/3-create-array/task.md +++ b/1-js/4-data-structures/7-array/3-create-array/task.md @@ -2,23 +2,23 @@ importance: 5 --- -# Создание массива +# Array operations. -Задача из 5 шагов-строк: +Let's try 5 array operations. -1. Создайте массив `styles` с элементами "Джаз", "Блюз". -2. Добавьте в конец значение "Рок-н-Ролл" -3. Замените предпоследнее значение с конца на "Классика". Код замены предпоследнего значения должен работать для массивов любой длины. -4. Удалите первое значение массива и выведите его `alert`. -5. Добавьте в начало значения "Рэп" и "Регги". +1. Create an array `styles` with items "Jazz" and "Blues". +2. Append "Rock-n-Roll" to the end. +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. Strip off the first value of the array and show it. +5. Prepend `Rap` and `Reggie` to the array. -Массив в результате каждого шага: +The array in the process: ```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 ``` diff --git a/1-js/4-data-structures/7-array/4-random-from-array/solution.md b/1-js/4-data-structures/7-array/4-random-from-array/solution.md index 2f13257e..c07a93bc 100644 --- a/1-js/4-data-structures/7-array/4-random-from-array/solution.md +++ b/1-js/4-data-structures/7-array/4-random-from-array/solution.md @@ -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 -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] ); ``` diff --git a/1-js/4-data-structures/7-array/4-random-from-array/task.md b/1-js/4-data-structures/7-array/4-random-from-array/task.md index 4d696369..c40a10c1 100644 --- a/1-js/4-data-structures/7-array/4-random-from-array/task.md +++ b/1-js/4-data-structures/7-array/4-random-from-array/task.md @@ -2,17 +2,10 @@ importance: 3 --- -# Получить случайное значение из массива +# A random array value -Напишите код для вывода `alert` случайного значения из массива: +Write the code to `alert` a random value from the array: ```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)); -``` - diff --git a/1-js/4-data-structures/7-array/5-array-input-sum/solution.md b/1-js/4-data-structures/7-array/5-array-input-sum/solution.md new file mode 100644 index 00000000..cbdfbded --- /dev/null +++ b/1-js/4-data-structures/7-array/5-array-input-sum/solution.md @@ -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() ); +``` + diff --git a/1-js/4-data-structures/7-array/5-array-input-sum/task.md b/1-js/4-data-structures/7-array/5-array-input-sum/task.md new file mode 100644 index 00000000..4af8e7c9 --- /dev/null +++ b/1-js/4-data-structures/7-array/5-array-input-sum/task.md @@ -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] diff --git a/1-js/4-data-structures/7-array/5-calculator-for-input/solution.md b/1-js/4-data-structures/7-array/5-calculator-for-input/solution.md deleted file mode 100644 index 760956f8..00000000 --- a/1-js/4-data-structures/7-array/5-calculator-for-input/solution.md +++ /dev/null @@ -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 ); -``` - diff --git a/1-js/4-data-structures/7-array/5-calculator-for-input/task.md b/1-js/4-data-structures/7-array/5-calculator-for-input/task.md deleted file mode 100644 index 5bb12a59..00000000 --- a/1-js/4-data-structures/7-array/5-calculator-for-input/task.md +++ /dev/null @@ -1,14 +0,0 @@ -importance: 4 - ---- - -# Создайте калькулятор для введённых значений - -Напишите код, который: - -- Запрашивает по очереди значения при помощи `prompt` и сохраняет их в массиве. -- Заканчивает ввод, как только посетитель введёт пустую строку, не число или нажмёт "Отмена". -- При этом ноль `0` не должен заканчивать ввод, это разрешённое число. -- Выводит сумму всех значений массива - -[demo] diff --git a/1-js/4-data-structures/7-array/6-item-value/solution.md b/1-js/4-data-structures/7-array/6-item-value/solution.md deleted file mode 100644 index 909dce59..00000000 --- a/1-js/4-data-structures/7-array/6-item-value/solution.md +++ /dev/null @@ -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]; -``` - diff --git a/1-js/4-data-structures/7-array/6-item-value/task.md b/1-js/4-data-structures/7-array/6-item-value/task.md deleted file mode 100644 index 945d709b..00000000 --- a/1-js/4-data-structures/7-array/6-item-value/task.md +++ /dev/null @@ -1,20 +0,0 @@ -importance: 3 - ---- - -# Чему равен элемент массива? - -Что выведет этот код? - -```js -var arr = [1, 2, 3]; - -var arr2 = arr; -arr2[0] = 5; - -*!* -alert( arr[0] ); -alert( arr2[0] ); -*/!* -``` - diff --git a/1-js/4-data-structures/7-array/7-array-find/_js.view/solution.js b/1-js/4-data-structures/7-array/7-array-find/_js.view/solution.js deleted file mode 100644 index c172ef0a..00000000 --- a/1-js/4-data-structures/7-array/7-array-find/_js.view/solution.js +++ /dev/null @@ -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; -} \ No newline at end of file diff --git a/1-js/4-data-structures/7-array/7-array-find/_js.view/test.js b/1-js/4-data-structures/7-array/7-array-find/_js.view/test.js deleted file mode 100644 index 86b958ba..00000000 --- a/1-js/4-data-structures/7-array/7-array-find/_js.view/test.js +++ /dev/null @@ -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); - }); -}); \ No newline at end of file diff --git a/1-js/4-data-structures/7-array/7-array-find/solution.md b/1-js/4-data-structures/7-array/7-array-find/solution.md deleted file mode 100644 index a25e49fd..00000000 --- a/1-js/4-data-structures/7-array/7-array-find/solution.md +++ /dev/null @@ -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 существует встроенная функция Array#indexOf, которая работает именно таким образом. Имеет смысл ей воспользоваться, если браузер ее поддерживает. - -```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`. diff --git a/1-js/4-data-structures/7-array/7-array-find/task.md b/1-js/4-data-structures/7-array/7-array-find/task.md deleted file mode 100644 index 52d50fec..00000000 --- a/1-js/4-data-structures/7-array/7-array-find/task.md +++ /dev/null @@ -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 -``` - diff --git a/1-js/4-data-structures/7-array/8-filter-range/_js.view/solution.js b/1-js/4-data-structures/7-array/8-filter-range/_js.view/solution.js deleted file mode 100644 index 58002f54..00000000 --- a/1-js/4-data-structures/7-array/8-filter-range/_js.view/solution.js +++ /dev/null @@ -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; -} \ No newline at end of file diff --git a/1-js/4-data-structures/7-array/8-filter-range/_js.view/test.js b/1-js/4-data-structures/7-array/8-filter-range/_js.view/test.js deleted file mode 100644 index 4cb4cbf6..00000000 --- a/1-js/4-data-structures/7-array/8-filter-range/_js.view/test.js +++ /dev/null @@ -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]); - }); -}); \ No newline at end of file diff --git a/1-js/4-data-structures/7-array/8-filter-range/solution.md b/1-js/4-data-structures/7-array/8-filter-range/solution.md deleted file mode 100644 index d3e49b26..00000000 --- a/1-js/4-data-structures/7-array/8-filter-range/solution.md +++ /dev/null @@ -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 ); -``` - diff --git a/1-js/4-data-structures/7-array/8-filter-range/task.md b/1-js/4-data-structures/7-array/8-filter-range/task.md deleted file mode 100644 index ef282596..00000000 --- a/1-js/4-data-structures/7-array/8-filter-range/task.md +++ /dev/null @@ -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 не изменился -``` - diff --git a/1-js/4-data-structures/7-array/9-eratosthenes-sieve/sieve.gif b/1-js/4-data-structures/7-array/9-eratosthenes-sieve/sieve.gif deleted file mode 100644 index d1960cef..00000000 Binary files a/1-js/4-data-structures/7-array/9-eratosthenes-sieve/sieve.gif and /dev/null differ diff --git a/1-js/4-data-structures/7-array/9-eratosthenes-sieve/solution.md b/1-js/4-data-structures/7-array/9-eratosthenes-sieve/solution.md deleted file mode 100644 index db49acf7..00000000 --- a/1-js/4-data-structures/7-array/9-eratosthenes-sieve/solution.md +++ /dev/null @@ -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 ); -``` - diff --git a/1-js/4-data-structures/7-array/9-eratosthenes-sieve/task.md b/1-js/4-data-structures/7-array/9-eratosthenes-sieve/task.md deleted file mode 100644 index b4c6d344..00000000 --- a/1-js/4-data-structures/7-array/9-eratosthenes-sieve/task.md +++ /dev/null @@ -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 пока p2 < n. -6. Все оставшиеся не зачеркнутыми числа -- простые. - -Посмотрите также [анимацию алгоритма](sieve.gif). - -Реализуйте "Решето Эратосфена" в JavaScript, используя массив. - -Найдите все простые числа до `100` и выведите их сумму. - diff --git a/1-js/4-data-structures/7-array/array-pop.png b/1-js/4-data-structures/7-array/array-pop.png index 34d6dc06..023642fa 100644 Binary files a/1-js/4-data-structures/7-array/array-pop.png and b/1-js/4-data-structures/7-array/array-pop.png differ diff --git a/1-js/4-data-structures/7-array/array-pop@2x.png b/1-js/4-data-structures/7-array/array-pop@2x.png index 82ab7474..301fd8f6 100644 Binary files a/1-js/4-data-structures/7-array/array-pop@2x.png and b/1-js/4-data-structures/7-array/array-pop@2x.png differ diff --git a/1-js/4-data-structures/7-array/array-shift.png b/1-js/4-data-structures/7-array/array-shift.png index 15a745c8..a2af561f 100644 Binary files a/1-js/4-data-structures/7-array/array-shift.png and b/1-js/4-data-structures/7-array/array-shift.png differ diff --git a/1-js/4-data-structures/7-array/array-shift@2x.png b/1-js/4-data-structures/7-array/array-shift@2x.png index 0348c1f8..d7628a5a 100644 Binary files a/1-js/4-data-structures/7-array/array-shift@2x.png and b/1-js/4-data-structures/7-array/array-shift@2x.png differ diff --git a/1-js/4-data-structures/7-array/article.md b/1-js/4-data-structures/7-array/article.md index 09ffa28b..33d6df53 100644 --- a/1-js/4-data-structures/7-array/article.md +++ b/1-js/4-data-structures/7-array/article.md @@ -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] -## Definition +## Declaration There are two syntaxes for creating an empty array: @@ -15,7 +19,7 @@ let arr = new Array(); 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 let fruits = ["Apple", "Orange", "Plum"]; @@ -53,7 +57,7 @@ let fruits = ["Apple", "Orange", "Plum"]; 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 let fruits = ["Apple", "Orange", "Plum"]; @@ -61,360 +65,407 @@ let 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: ```js run no-beautify // 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 -alert( arr[2].name ); // John +// get the object at index 1 and then show its name +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) -В реальной жизни эта структура данных встречается очень часто. Например, очередь сообщений, которые надо показать на экране. +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) -Например, стеком является колода карт, в которую новые карты кладутся сверху, и берутся -- тоже сверху. +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` -: Удаляет *последний* элемент из массива и возвращает его: +: Extracts the last element of the array and returns it: ```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` -: Добавляет элемент *в конец* массива: +: Append the element to the end of the array: ```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` -: Удаляет из массива *первый* элемент и возвращает его: +: Extracts the first element of the array and returns it: ```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` -: Добавляет элемент *в начало* массива: +: Add the element to the beginning of the array: ```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 -var fruits = ["Яблоко"]; +let fruits = ["Apple"]; -fruits.push("Апельсин", "Персик"); -fruits.unshift("Ананас", "Лимон"); +fruits.push("Orange", "Peach"); +fruits.unshift("Pineapple", "Lemon"); -// результат: ["Ананас", "Лимон", "Яблоко", "Апельсин", "Персик"] +// ["Pineapple", "Lemon", "Apple", "Orange", "Peach"] 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 -function eat(arr) { - arr.pop(); -} +let fruits = ["Banana"] -var arr = ["нам", "не", "страшен", "серый", "волк"] +let arr = fruits; -alert( arr.length ); // 5 -eat(arr); -eat(arr); -alert( arr.length ); // 3, в функцию массив не скопирован, а передана ссылка +alert( arr === fruits ); // the same object + +arr.push("Pear"); // modify it? + +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 -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 -var a = []; -a[0] = 0; -a[5] = 5; +- Add a non-numeric property like `arr.test = 5`. +- Make holes, like add `arr[0]` and then `arr[1000]`. +- Fill the array in reverse order, like `arr[1000]`, `arr[999]` and so on. -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) -Чтобы понять, почему работать с концом массива -- быстрее, чем с его началом, разберём подробнее происходящее при операции: +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 -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. Удалить нулевой элемент. -2. Переместить все свойства влево, с индекса `1` на `0`, с `2` на `1` и так далее. -3. Обновить свойство `length`. +1. Remove the element with the index `0`. +2. Move all elements to the left, renumber them from the index `1` to `0`, from `2` to `1` and so on. +3. Update the `length` property. ![](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 -fruits.pop(); // убрать 1 элемент с конца +fruits.pop(); // take 1 element from the end ``` ![](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 -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] ); } */!* ``` -````warn header="Не используйте `for..in` для массивов" -Так как массив является объектом, то возможен и вариант `for..in`: +That's the most optimized and fastest way to loop over the array. -```js run -var arr = ["Яблоко", "Апельсин", "Груша"]; +There's an alternative kind of loops: `for..of`. -*!* -for (var key in arr) { -*/!* - alert( arr[key] ); // Яблоко, Апельсин, Груша +The syntax: +```js +for(let item of arr) { + // 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` надёжно выведет только цифровые свойства, что обычно и требуется. -2. Цикл `for (var i=0; i ['my', 'long', 'word'] + .map( + (word, index) => index == 0 ? word : word[0].toUpperCase() + word.slice(1) + ) // ['my', 'long', 'word'] -> ['my', 'Long', 'Word'] + .join(''); // ['my', 'Long', 'Word'] -> myLongWord +} diff --git a/1-js/4-data-structures/8-array-methods/1-camelcase/_js.view/test.js b/1-js/4-data-structures/8-array-methods/1-camelcase/_js.view/test.js new file mode 100644 index 00000000..bcf5e955 --- /dev/null +++ b/1-js/4-data-structures/8-array-methods/1-camelcase/_js.view/test.js @@ -0,0 +1,19 @@ +describe("camelize", function() { + + it("leaves an empty line as is", function() { + assert.equal(camelize(""), ""); + }); + + it("turns background-color into backgroundColor", function() { + assert.equal(camelize("background-color"), "backgroundColor"); + }); + + it("turns list-style-image into listStyleImage", function() { + assert.equal(camelize("list-style-image"), "listStyleImage"); + }); + + it("turns -webkit-transition into WebkitTransition", function() { + assert.equal(camelize("-webkit-transition"), "WebkitTransition"); + }); + +}); \ No newline at end of file diff --git a/1-js/4-data-structures/8-array-methods/1-camelcase/solution.md b/1-js/4-data-structures/8-array-methods/1-camelcase/solution.md new file mode 100644 index 00000000..e69de29b diff --git a/1-js/4-data-structures/8-array-methods/1-camelcase/task.md b/1-js/4-data-structures/8-array-methods/1-camelcase/task.md new file mode 100644 index 00000000..6e27d9ce --- /dev/null +++ b/1-js/4-data-structures/8-array-methods/1-camelcase/task.md @@ -0,0 +1,19 @@ +importance: 5 + +--- + +# Translate border-left-width to borderLeftWidth + +Write the function `camelize(str)` that changes dash-separated words like "my-short-string" into camel-cased "myShortString". + +That is: removes all dashes, each word after dash becomes uppercased. + +Examples: + +```js +camelize("background-color") == 'backgroundColor'; +camelize("list-style-image") == 'listStyleImage'; +camelize("-webkit-transition") == 'WebkitTransition'; +``` + + diff --git a/1-js/4-data-structures/8-array-methods/2-camelcase/_js.view/solution.js b/1-js/4-data-structures/8-array-methods/2-camelcase/_js.view/solution.js deleted file mode 100644 index 6a150668..00000000 --- a/1-js/4-data-structures/8-array-methods/2-camelcase/_js.view/solution.js +++ /dev/null @@ -1,10 +0,0 @@ -function camelize(str) { - var arr = str.split('-'); - - for (var i = 1; i < arr.length; i++) { - // преобразовать: первый символ с большой буквы - arr[i] = arr[i].charAt(0).toUpperCase() + arr[i].slice(1); - } - - return arr.join(''); -} \ No newline at end of file diff --git a/1-js/4-data-structures/8-array-methods/2-camelcase/_js.view/test.js b/1-js/4-data-structures/8-array-methods/2-camelcase/_js.view/test.js deleted file mode 100644 index 0546d816..00000000 --- a/1-js/4-data-structures/8-array-methods/2-camelcase/_js.view/test.js +++ /dev/null @@ -1,22 +0,0 @@ -describe("camelize", function() { - - it("оставляет пустую строку \"как есть\"", function() { - assert.equal(camelize(""), ""); - }); - - describe("делает заглавным первый символ после дефиса", function() { - - it("превращает background-color в backgroundColor", function() { - assert.equal(camelize("background-color"), "backgroundColor"); - }); - - it("превращает list-style-image в listStyleImage", function() { - assert.equal(camelize("list-style-image"), "listStyleImage"); - }); - - it("превращает -webkit-transition в WebkitTransition", function() { - assert.equal(camelize("-webkit-transition"), "WebkitTransition"); - }); - }); - -}); \ No newline at end of file diff --git a/1-js/4-data-structures/8-array-methods/2-camelcase/solution.md b/1-js/4-data-structures/8-array-methods/2-camelcase/solution.md deleted file mode 100644 index b39a2907..00000000 --- a/1-js/4-data-structures/8-array-methods/2-camelcase/solution.md +++ /dev/null @@ -1,25 +0,0 @@ -# Идея - -Задача может быть решена несколькими способами. Один из них -- разбить строку по дефису `str.split('-')`, затем последовательно сконструировать новую. - -# Решение - -Разобьем строку в массив, а затем преобразуем его элементы и сольём обратно: - -```js run -function camelize(str) { - var arr = str.split('-'); - - for (var i = 1; i < arr.length; i++) { - // преобразовать: первый символ с большой буквы - arr[i] = arr[i].charAt(0).toUpperCase() + arr[i].slice(1); - } - - return arr.join(''); -} - -alert( camelize("background-color") ); // backgroundColor -alert( camelize("list-style-image") ); // listStyleImage -alert( camelize("-webkit-transition") ); // WebkitTransition -``` - diff --git a/1-js/4-data-structures/8-array-methods/2-camelcase/task.md b/1-js/4-data-structures/8-array-methods/2-camelcase/task.md deleted file mode 100644 index 572e9544..00000000 --- a/1-js/4-data-structures/8-array-methods/2-camelcase/task.md +++ /dev/null @@ -1,22 +0,0 @@ -importance: 3 - ---- - -# Перевести текст вида border-left-width в borderLeftWidth - -Напишите функцию `camelize(str)`, которая преобразует строки вида "my-short-string" в "myShortString". - -То есть, дефисы удаляются, а все слова после них получают заглавную букву. - -Например: - -```js -camelize("background-color") == 'backgroundColor'; -camelize("list-style-image") == 'listStyleImage'; -camelize("-webkit-transition") == 'WebkitTransition'; -``` - -Такая функция полезна при работе с CSS. - -P.S. Вам пригодятся методы строк `charAt`, `split` и `toUpperCase`. - diff --git a/1-js/4-data-structures/8-array-methods/2-filter-range/_js.view/solution.js b/1-js/4-data-structures/8-array-methods/2-filter-range/_js.view/solution.js new file mode 100644 index 00000000..0bdfbae5 --- /dev/null +++ b/1-js/4-data-structures/8-array-methods/2-filter-range/_js.view/solution.js @@ -0,0 +1,5 @@ + +function filterRange(arr, a, b) { + // added brackets around the expression for better readability + return arr.filter(item => (a <= item && item <= b)); +} \ No newline at end of file diff --git a/1-js/4-data-structures/8-array-methods/2-filter-range/_js.view/test.js b/1-js/4-data-structures/8-array-methods/2-filter-range/_js.view/test.js new file mode 100644 index 00000000..fb26c8dc --- /dev/null +++ b/1-js/4-data-structures/8-array-methods/2-filter-range/_js.view/test.js @@ -0,0 +1,21 @@ +describe("filterRange", function() { + + it("returns the filtered values", function() { + + let arr = [5, 3, 8, 1]; + + let filtered = filterRange(arr, 1, 4); + + assert.deepEqual(filtered, [3, 1]); + }); + + it("doesn't change the array", function() { + + let arr = [5, 3, 8, 1]; + + let filtered = filterRange(arr, 1, 4); + + assert.deepEqual(arr, [5,3,8,1]); + }); + +}); \ No newline at end of file diff --git a/1-js/4-data-structures/8-array-methods/2-filter-range/solution.md b/1-js/4-data-structures/8-array-methods/2-filter-range/solution.md new file mode 100644 index 00000000..e69de29b diff --git a/1-js/4-data-structures/8-array-methods/2-filter-range/task.md b/1-js/4-data-structures/8-array-methods/2-filter-range/task.md new file mode 100644 index 00000000..fb6f06ee --- /dev/null +++ b/1-js/4-data-structures/8-array-methods/2-filter-range/task.md @@ -0,0 +1,22 @@ +importance: 4 + +--- + +# Filter "in place" + +Write a function `filterRange(arr, a, b)` that gets an array `arr`, looks for elements between `a` and `b` in it and returns an array of them. + +The function should not modify the array. It should return the new array. + +For instance: + +```js +let arr = [5, 3, 8, 1]; + +let filtered = filterRange(arr, 1, 4); + +alert( filtered ); // 3,1 (matching values) + +alert( arr ); // 5,3,8,1 (not modified) +``` + diff --git a/1-js/4-data-structures/8-array-methods/3-filter-range-in-place/_js.view/solution.js b/1-js/4-data-structures/8-array-methods/3-filter-range-in-place/_js.view/solution.js new file mode 100644 index 00000000..61cda126 --- /dev/null +++ b/1-js/4-data-structures/8-array-methods/3-filter-range-in-place/_js.view/solution.js @@ -0,0 +1,15 @@ + + +function filterRangeInPlace(arr, a, b) { + + for (let i = 0; i < arr.length; i++) { + let val = arr[i]; + + // remove if outside of the interval + if (val < a || val > b) { + arr.splice(i, 1); + i--; + } + } + +} \ No newline at end of file diff --git a/1-js/4-data-structures/8-array-methods/3-filter-range-in-place/_js.view/test.js b/1-js/4-data-structures/8-array-methods/3-filter-range-in-place/_js.view/test.js new file mode 100644 index 00000000..db32d9a1 --- /dev/null +++ b/1-js/4-data-structures/8-array-methods/3-filter-range-in-place/_js.view/test.js @@ -0,0 +1,16 @@ +describe("filterRangeInPlace", function() { + + it("returns the filtered values", function() { + + let arr = [5, 3, 8, 1]; + + filterRangeInPlace(arr, 1, 4); + + assert.deepEqual(arr, [3, 1]); + }); + + it("doesn't return anything", function() { + assert.isUndefined(filterRangeInPlace([1,2,3], 1, 4)); + }); + +}); \ No newline at end of file diff --git a/1-js/4-data-structures/8-array-methods/3-filter-range-in-place/solution.md b/1-js/4-data-structures/8-array-methods/3-filter-range-in-place/solution.md new file mode 100644 index 00000000..e69de29b diff --git a/1-js/4-data-structures/8-array-methods/3-filter-range-in-place/task.md b/1-js/4-data-structures/8-array-methods/3-filter-range-in-place/task.md new file mode 100644 index 00000000..3d7487c4 --- /dev/null +++ b/1-js/4-data-structures/8-array-methods/3-filter-range-in-place/task.md @@ -0,0 +1,19 @@ +importance: 4 + +--- + +# Filter "in place" + +Write a function `filterRangeInPlace(arr, a, b)` that gets an array `arr` and removes from it all values except those that are between `a` and `b. The test is: `a ≤ arr[i] ≤ b`. + +The function should only modify the array. It should not return anything. + +For instance: +```js +let arr = [5, 3, 8, 1]; + +filterRangeInPlace(arr, 1, 4); // removed the numbers except from 1 to 4 + +alert( arr ); // [3, 1] +``` + diff --git a/1-js/4-data-structures/8-array-methods/3-remove-class/_js.view/solution.js b/1-js/4-data-structures/8-array-methods/3-remove-class/_js.view/solution.js deleted file mode 100644 index f5c9ab64..00000000 --- a/1-js/4-data-structures/8-array-methods/3-remove-class/_js.view/solution.js +++ /dev/null @@ -1,11 +0,0 @@ -function removeClass(obj, cls) { - var classes = obj.className.split(' '); - - for (i = 0; i < classes.length; i++) { - if (classes[i] == cls) { - classes.splice(i, 1); // удалить класс - i--; - } - } - obj.className = classes.join(' '); -} \ No newline at end of file diff --git a/1-js/4-data-structures/8-array-methods/3-remove-class/_js.view/test.js b/1-js/4-data-structures/8-array-methods/3-remove-class/_js.view/test.js deleted file mode 100644 index 809009a9..00000000 --- a/1-js/4-data-structures/8-array-methods/3-remove-class/_js.view/test.js +++ /dev/null @@ -1,43 +0,0 @@ -describe("removeClass", function() { - - it("ничего не делает, если класса нет", function() { - var obj = { - className: 'open menu' - }; - removeClass(obj, 'new'); - assert.deepEqual(obj, { - className: 'open menu' - }); - }); - - it("не меняет пустое свойство", function() { - var obj = { - className: '' - }; - removeClass(obj, 'new'); - assert.deepEqual(obj, { - className: "" - }); - }); - - it("удаляет класс, не оставляя лишних пробелов", function() { - var obj = { - className: 'open menu' - }; - removeClass(obj, 'open'); - assert.deepEqual(obj, { - className: "menu" - }); - }); - - it("если класс один и он удалён, то результат - пустая строка", function() { - var obj = { - className: "menu" - }; - removeClass(obj, 'menu'); - assert.deepEqual(obj, { - className: "" - }); - }); - -}); \ No newline at end of file diff --git a/1-js/4-data-structures/8-array-methods/3-remove-class/solution.md b/1-js/4-data-structures/8-array-methods/3-remove-class/solution.md deleted file mode 100644 index 522b3fc7..00000000 --- a/1-js/4-data-structures/8-array-methods/3-remove-class/solution.md +++ /dev/null @@ -1,32 +0,0 @@ -Решение заключается в том, чтобы разбить `className` в массив классов, а затем пройтись по нему циклом. Если класс есть - удаляем его `splice`, заново объединяем массив в строку и присваиваем объекту. - -```js run -function removeClass(obj, cls) { - var classes = obj.className.split(' '); - - for (i = 0; i < classes.length; i++) { - if (classes[i] == cls) { - classes.splice(i, 1); // удалить класс -*!* - i--; // (*) -*/!* - } - } - obj.className = classes.join(' '); - -} - -var obj = { - className: 'open menu menu' -} - -removeClass(obj, 'blabla'); -removeClass(obj, 'menu') -alert(obj.className) // open -``` - -В примере выше есть тонкий момент. Элементы массива проверяются один за другим. При вызове `splice` удаляется текущий, `i-й` элемент, и те элементы, которые идут дальше, сдвигаются на его место. - -Таким образом, **на месте `i` оказывается новый, непроверенный элемент**. - -Чтобы это учесть, строчка `(*)` уменьшает `i`, чтобы следующая итерация цикла заново проверила элемент с номером `i`. Без нее функция будет работать с ошибками. diff --git a/1-js/4-data-structures/8-array-methods/3-remove-class/task.md b/1-js/4-data-structures/8-array-methods/3-remove-class/task.md deleted file mode 100644 index bf38fbbe..00000000 --- a/1-js/4-data-structures/8-array-methods/3-remove-class/task.md +++ /dev/null @@ -1,32 +0,0 @@ -importance: 5 - ---- - -# Функция removeClass - -У объекта есть свойство `className`, которое хранит список "классов" - слов, разделенных пробелами: - -```js -var obj = { - className: 'open menu' -}; -``` - -Напишите функцию `removeClass(obj, cls)`, которая удаляет класс `cls`, если он есть: - -```js -removeClass(obj, 'open'); // obj.className='menu' -removeClass(obj, 'blabla'); // без изменений (нет такого класса) -``` - -P.S. Дополнительное усложнение. Функция должна корректно обрабатывать дублирование класса в строке: - -```js -obj = { - className: 'my menu menu' -}; -removeClass(obj, 'menu'); -alert( obj.className ); // 'my' -``` - -Лишних пробелов после функции образовываться не должно. \ No newline at end of file diff --git a/1-js/4-data-structures/8-array-methods/4-filter-in-place/_js.view/solution.js b/1-js/4-data-structures/8-array-methods/4-filter-in-place/_js.view/solution.js deleted file mode 100644 index 541e1e0c..00000000 --- a/1-js/4-data-structures/8-array-methods/4-filter-in-place/_js.view/solution.js +++ /dev/null @@ -1,10 +0,0 @@ -function filterRangeInPlace(arr, a, b) { - - for (var i = 0; i < arr.length; i++) { - var val = arr[i]; - if (val < a || val > b) { - arr.splice(i--, 1); - } - } - -} \ No newline at end of file diff --git a/1-js/4-data-structures/8-array-methods/4-filter-in-place/_js.view/test.js b/1-js/4-data-structures/8-array-methods/4-filter-in-place/_js.view/test.js deleted file mode 100644 index f8374db2..00000000 --- a/1-js/4-data-structures/8-array-methods/4-filter-in-place/_js.view/test.js +++ /dev/null @@ -1,9 +0,0 @@ -describe("filterRangeInPlace", function() { - - it("меняет массив, оставляя только значения из диапазона", function() { - var arr = [5, 3, 8, 1]; - filterRangeInPlace(arr, 1, 4); - assert.deepEqual(arr, [3, 1]); - }); - -}); \ No newline at end of file diff --git a/1-js/4-data-structures/8-array-methods/4-filter-in-place/solution.md b/1-js/4-data-structures/8-array-methods/4-filter-in-place/solution.md deleted file mode 100644 index 08a2b8a4..00000000 --- a/1-js/4-data-structures/8-array-methods/4-filter-in-place/solution.md +++ /dev/null @@ -1,20 +0,0 @@ - - -```js run -function filterRangeInPlace(arr, a, b) { - - for (var i = 0; i < arr.length; i++) { - var val = arr[i]; - if (val < a || val > b) { - arr.splice(i--, 1); - } - } - -} - -var arr = [5, 3, 8, 1]; - -filterRangeInPlace(arr, 1, 4); -alert( arr ); // [3, 1] -``` - diff --git a/1-js/4-data-structures/8-array-methods/4-filter-in-place/task.md b/1-js/4-data-structures/8-array-methods/4-filter-in-place/task.md deleted file mode 100644 index c269282b..00000000 --- a/1-js/4-data-structures/8-array-methods/4-filter-in-place/task.md +++ /dev/null @@ -1,19 +0,0 @@ -importance: 4 - ---- - -# Фильтрация массива "на месте" - -Создайте функцию `filterRangeInPlace(arr, a, b)`, которая получает массив с числами `arr` и удаляет из него все числа вне диапазона `a..b`. -То есть, проверка имеет вид `a ≤ arr[i] ≤ b`. Функция должна менять сам массив и ничего не возвращать. - -Например: - -```js -arr = [5, 3, 8, 1]; - -filterRangeInPlace(arr, 1, 4); // удалены числа вне диапазона 1..4 - -alert( arr ); // массив изменился: остались [3, 1] -``` - diff --git a/1-js/4-data-structures/8-array-methods/4-sort-back/solution.md b/1-js/4-data-structures/8-array-methods/4-sort-back/solution.md new file mode 100644 index 00000000..5a9f076b --- /dev/null +++ b/1-js/4-data-structures/8-array-methods/4-sort-back/solution.md @@ -0,0 +1,10 @@ + + +```js run +let arr = [5, 2, 1, -10, 8]; + +arr.sort((a,b) => b - a); + +alert( arr ); +``` + diff --git a/1-js/4-data-structures/8-array-methods/4-sort-back/task.md b/1-js/4-data-structures/8-array-methods/4-sort-back/task.md new file mode 100644 index 00000000..05a08aad --- /dev/null +++ b/1-js/4-data-structures/8-array-methods/4-sort-back/task.md @@ -0,0 +1,14 @@ +importance: 4 + +--- + +# Sort in the reverse order + +```js +let arr = [5, 2, 1, -10, 8]; + +// ... your code to sort it in the reverse order + +alert( arr ); // 8, 5, 2, 1, -10 +``` + diff --git a/1-js/4-data-structures/8-array-methods/5-copy-sort-array/solution.md b/1-js/4-data-structures/8-array-methods/5-copy-sort-array/solution.md new file mode 100644 index 00000000..8537b129 --- /dev/null +++ b/1-js/4-data-structures/8-array-methods/5-copy-sort-array/solution.md @@ -0,0 +1,17 @@ +We can use `slice()` to make a copy and run the sort on it: + +```js run +function copySorted(arr) { + return arr.slice().sort(); +} + +let arr = ["HTML", "JavaScript", "CSS"]; + +*!* +let sorted = copySorted(arr); +*/!* + +alert( sorted ); +alert( arr ); +``` + diff --git a/1-js/4-data-structures/8-array-methods/5-copy-sort-array/task.md b/1-js/4-data-structures/8-array-methods/5-copy-sort-array/task.md new file mode 100644 index 00000000..c1395b4a --- /dev/null +++ b/1-js/4-data-structures/8-array-methods/5-copy-sort-array/task.md @@ -0,0 +1,18 @@ +importance: 5 + +--- + +# Copy and sort array + +We have an array of strings `arr`. We'd like to have a sorted copy of it, but keep `arr` unmodified. + +Create a function `copySorted(arr)` that returns such a copy. + +```js +let arr = ["HTML", "JavaScript", "CSS"]; + +let sorted = copySorted(arr); + +alert( sorted ); // CSS, HTML, JavaScript +alert( arr ); // HTML, JavaScript, CSS (no changes) +``` diff --git a/1-js/4-data-structures/8-array-methods/5-sort-back/solution.md b/1-js/4-data-structures/8-array-methods/5-sort-back/solution.md deleted file mode 100644 index d1946016..00000000 --- a/1-js/4-data-structures/8-array-methods/5-sort-back/solution.md +++ /dev/null @@ -1,14 +0,0 @@ - - -```js run -var arr = [5, 2, 1, -10, 8]; - -function compareReversed(a, b) { - return b - a; -} - -arr.sort(compareReversed); - -alert( arr ); -``` - diff --git a/1-js/4-data-structures/8-array-methods/5-sort-back/task.md b/1-js/4-data-structures/8-array-methods/5-sort-back/task.md deleted file mode 100644 index 743fad52..00000000 --- a/1-js/4-data-structures/8-array-methods/5-sort-back/task.md +++ /dev/null @@ -1,16 +0,0 @@ -importance: 5 - ---- - -# Сортировать в обратном порядке - -Как отсортировать массив чисел в обратном порядке? - -```js -var arr = [5, 2, 1, -10, 8]; - -// отсортируйте? - -alert( arr ); // 8, 5, 2, 1, -10 -``` - diff --git a/1-js/4-data-structures/8-array-methods/6-array-get-names/solution.md b/1-js/4-data-structures/8-array-methods/6-array-get-names/solution.md new file mode 100644 index 00000000..6653655b --- /dev/null +++ b/1-js/4-data-structures/8-array-methods/6-array-get-names/solution.md @@ -0,0 +1,17 @@ +```js run no-beautify +function getNames(arr) { + return arr.map(item => item.name); +} + + +let john = { name: "John", age: 25 } +let pete = { name: "Pete", age: 30 } +let mary = { name: "Mary", age: 28 } + +let arr = [ john, pete, mary ]; + +let names = getNames(arr); + +alert( names ) // John, Pete, Mary +``` + diff --git a/1-js/4-data-structures/8-array-methods/6-array-get-names/task.md b/1-js/4-data-structures/8-array-methods/6-array-get-names/task.md new file mode 100644 index 00000000..b2f6bf4a --- /dev/null +++ b/1-js/4-data-structures/8-array-methods/6-array-get-names/task.md @@ -0,0 +1,22 @@ +importance: 5 + +--- + +# Sort objects + +Write the function `getNames(users)` that gets an array of "user" objects with property `name` and returns an array of names. + +For instance: + +```js no-beautify +let john = { name: "John", age: 25 } +let pete = { name: "Pete", age: 30 } +let mary = { name: "Mary", age: 28 } + +let arr = [ john, pete, mary ]; + +let names = getNames(arr); + +alert( names ) // John, Pete, Mary +``` + diff --git a/1-js/4-data-structures/8-array-methods/6-copy-sort-array/solution.md b/1-js/4-data-structures/8-array-methods/6-copy-sort-array/solution.md deleted file mode 100644 index 3c07bf05..00000000 --- a/1-js/4-data-structures/8-array-methods/6-copy-sort-array/solution.md +++ /dev/null @@ -1,13 +0,0 @@ -Для копирования массива используем `slice()`, и тут же -- сортировку: - -```js run -var arr = ["HTML", "JavaScript", "CSS"]; - -*!* -var arrSorted = arr.slice().sort(); -*/!* - -alert( arrSorted ); -alert( arr ); -``` - diff --git a/1-js/4-data-structures/8-array-methods/6-copy-sort-array/task.md b/1-js/4-data-structures/8-array-methods/6-copy-sort-array/task.md deleted file mode 100644 index c9b1e93a..00000000 --- a/1-js/4-data-structures/8-array-methods/6-copy-sort-array/task.md +++ /dev/null @@ -1,20 +0,0 @@ -importance: 5 - ---- - -# Скопировать и отсортировать массив - -Есть массив строк `arr`. Создайте массив `arrSorted` -- из тех же элементов, но отсортированный. - -Исходный массив не должен меняться. - -```js -var arr = ["HTML", "JavaScript", "CSS"]; - -// ... ваш код ... - -alert( arrSorted ); // CSS, HTML, JavaScript -alert( arr ); // HTML, JavaScript, CSS (без изменений) -``` - -Постарайтесь сделать код как можно короче. \ No newline at end of file diff --git a/1-js/4-data-structures/8-array-methods/7-shuffle-array/solution.md b/1-js/4-data-structures/8-array-methods/7-shuffle-array/solution.md deleted file mode 100644 index a640c6e9..00000000 --- a/1-js/4-data-structures/8-array-methods/7-shuffle-array/solution.md +++ /dev/null @@ -1,22 +0,0 @@ -# Подсказка - -Функция сортировки должна возвращать случайный результат сравнения. Используйте для этого [Math.random](http://javascript.ru/Math.random). - -# Решение - -Обычно `Math.random()` возвращает результат от `0` до `1`. Вычтем `0.5`, чтобы область значений стала `[-0.5 ... 0.5)`. - -```js run -var arr = [1, 2, 3, 4, 5]; - -*!* -function compareRandom(a, b) { - return Math.random() - 0.5; -} - -arr.sort(compareRandom); -*/!* - -alert( arr ); // элементы в случайном порядке, например [3,5,1,2,4] -``` - diff --git a/1-js/4-data-structures/8-array-methods/7-shuffle-array/task.md b/1-js/4-data-structures/8-array-methods/7-shuffle-array/task.md deleted file mode 100644 index 6c10daeb..00000000 --- a/1-js/4-data-structures/8-array-methods/7-shuffle-array/task.md +++ /dev/null @@ -1,16 +0,0 @@ -importance: 3 - ---- - -# Случайный порядок в массиве - -Используйте функцию `sort` для того, чтобы "перетрясти" элементы массива в случайном порядке. - -```js -var arr = [1, 2, 3, 4, 5]; - -arr.sort(ваша функция); - -alert( arr ); // элементы в случайном порядке, например [3,5,1,2,4] -``` - diff --git a/1-js/4-data-structures/8-array-methods/7-sort-objects/solution.md b/1-js/4-data-structures/8-array-methods/7-sort-objects/solution.md new file mode 100644 index 00000000..2c7c5181 --- /dev/null +++ b/1-js/4-data-structures/8-array-methods/7-sort-objects/solution.md @@ -0,0 +1,17 @@ +```js run no-beautify +function sortByName(arr) { + arr.sort((a, b) => a.name > b.name); +} + +let john = { name: "John", age: 25 }; +let pete = { name: "Pete", age: 30 }; +let mary = { name: "Mary", age: 28 }; + +let arr = [ john, pete, mary ]; + +sortByName(arr); + +// now sorted is: [john, mary, pete] +alert(arr[1].name) // Mary +``` + diff --git a/1-js/4-data-structures/8-array-methods/7-sort-objects/task.md b/1-js/4-data-structures/8-array-methods/7-sort-objects/task.md new file mode 100644 index 00000000..935c27fc --- /dev/null +++ b/1-js/4-data-structures/8-array-methods/7-sort-objects/task.md @@ -0,0 +1,23 @@ +importance: 5 + +--- + +# Sort objects + +Write the function `sortByName(users)` that gets an array of objects with property `name` and sorts it. + +For instance: + +```js no-beautify +let john = { name: "John", age: 25 } +let pete = { name: "Pete", age: 30 } +let mary = { name: "Mary", age: 28 } + +let arr = [ john, pete, mary ]; + +lsortByName(arr); + +// now: [john, mary, pete] +alert(arr[1].name) // Mary +``` + diff --git a/1-js/4-data-structures/8-array-methods/8-average-age/solution.md b/1-js/4-data-structures/8-array-methods/8-average-age/solution.md new file mode 100644 index 00000000..87bb3a94 --- /dev/null +++ b/1-js/4-data-structures/8-array-methods/8-average-age/solution.md @@ -0,0 +1,14 @@ +```js run +function getAverageAge(users) { + return arr.reduce((prev, user) => prev + user.age, 0) / arr.length; +} + +let john = { name: "John", age: 25 } +let pete = { name: "Pete", age: 30 } +let mary = { name: "Mary", age: 29 } + +let arr = [ john, pete, mary ]; + +alert( getAverageAge(arr) ); // 28 +``` + diff --git a/1-js/4-data-structures/8-array-methods/8-average-age/task.md b/1-js/4-data-structures/8-array-methods/8-average-age/task.md new file mode 100644 index 00000000..ccb2142d --- /dev/null +++ b/1-js/4-data-structures/8-array-methods/8-average-age/task.md @@ -0,0 +1,22 @@ +importance: 4 + +--- + +# Get average age + +Write the function `getAverageAge(users)` that gets an array of objects with property `age` and gets the average. + +The formula for the average is `(age1 + age2 + ... + ageN) / N`. + +For instance: + +```js no-beautify +let john = { name: "John", age: 25 } +let pete = { name: "Pete", age: 30 } +let mary = { name: "Mary", age: 29 } + +let arr = [ john, pete, mary ]; + +alert( getAverageAge(arr) ); // (25+30+29)/3 = 28 +``` + diff --git a/1-js/4-data-structures/8-array-methods/8-sort-objects/solution.md b/1-js/4-data-structures/8-array-methods/8-sort-objects/solution.md deleted file mode 100644 index f569ed0e..00000000 --- a/1-js/4-data-structures/8-array-methods/8-sort-objects/solution.md +++ /dev/null @@ -1,25 +0,0 @@ -Для сортировки объявим и передадим в `sort` анонимную функцию, которая сравнивает объекты по полю `age`: - -```js run no-beautify -*!* -// Наша функция сравнения -function compareAge(personA, personB) { - return personA.age - personB.age; -} -*/!* - -// проверка -var vasya = { name: "Вася", age: 23 }; -var masha = { name: "Маша", age: 18 }; -var vovochka = { name: "Вовочка", age: 6 }; - -var people = [ vasya , masha , vovochka ]; - -people.sort(compareAge); - -// вывести -for(var i = 0; i < people.length; i++) { - alert(people[i].name); // Вовочка Маша Вася -} -``` - diff --git a/1-js/4-data-structures/8-array-methods/8-sort-objects/task.md b/1-js/4-data-structures/8-array-methods/8-sort-objects/task.md deleted file mode 100644 index 5781dc9d..00000000 --- a/1-js/4-data-structures/8-array-methods/8-sort-objects/task.md +++ /dev/null @@ -1,24 +0,0 @@ -importance: 5 - ---- - -# Сортировка объектов - -Напишите код, который отсортирует массив объектов `people` по полю `age`. - -Например: - -```js no-beautify -var vasya = { name: "Вася", age: 23 }; -var masha = { name: "Маша", age: 18 }; -var vovochka = { name: "Вовочка", age: 6 }; - -var people = [ vasya , masha , vovochka ]; - -... ваш код ... - -// теперь people: [vovochka, masha, vasya] -alert(people[0].age) // 6 -``` - -Выведите список имён в массиве после сортировки. \ No newline at end of file diff --git a/1-js/4-data-structures/8-array-methods/9-output-single-linked-list/linked-list.png b/1-js/4-data-structures/8-array-methods/9-output-single-linked-list/linked-list.png deleted file mode 100644 index be31b3bc..00000000 Binary files a/1-js/4-data-structures/8-array-methods/9-output-single-linked-list/linked-list.png and /dev/null differ diff --git a/1-js/4-data-structures/8-array-methods/9-output-single-linked-list/linked-list@2x.png b/1-js/4-data-structures/8-array-methods/9-output-single-linked-list/linked-list@2x.png deleted file mode 100644 index 32f931cd..00000000 Binary files a/1-js/4-data-structures/8-array-methods/9-output-single-linked-list/linked-list@2x.png and /dev/null differ diff --git a/1-js/4-data-structures/8-array-methods/9-output-single-linked-list/solution.md b/1-js/4-data-structures/8-array-methods/9-output-single-linked-list/solution.md deleted file mode 100644 index a3bd7d18..00000000 --- a/1-js/4-data-structures/8-array-methods/9-output-single-linked-list/solution.md +++ /dev/null @@ -1,153 +0,0 @@ -# Вывод списка в цикле - -```js run -var list = { - value: 1, - next: { - value: 2, - next: { - value: 3, - next: { - value: 4, - next: null - } - } - } -}; - -function printList(list) { - var tmp = list; - - while (tmp) { - alert( tmp.value ); - tmp = tmp.next; - } - -} - -printList(list); -``` - -Обратите внимание, что для прохода по списку используется временная переменная `tmp`, а не `list`. Можно было бы и бегать по списку, используя входной параметр функции: - -```js -function printList(list) { - - while(*!*list*/!*) { - alert( list.value ); - list = list.next; - } - -} -``` - -...Но при этом мы в будущем не сможем расширить функцию и сделать со списком что-то ещё, ведь после окончания цикла начало списка уже нигде не хранится. - -Поэтому и используется временная переменная -- чтобы сделать код расширяемым, и, кстати, более понятным, ведь роль `tmp` -- исключительно обход списка, как `i` в цикле `for`. - -# Вывод списка с рекурсией - -Рекурсивный вариант `printList(list)` следует простой логике: вывести текущее значение `(1)`, а затем пропустить через себя следующее `(2)`: - -```js run -var list = { - value: 1, - next: { - value: 2, - next: { - value: 3, - next: { - value: 4, - next: null - } - } - } -}; - -function printList(list) { - - alert( list.value ); // (1) - - if (list.next) { - printList(list.next); // (2) - } - -} - -printList(list); -``` - -# Обратный вывод с рекурсией - -Обратный вывод -- почти то же самое, что прямой, просто сначала мы обрабатываем следующее значение, а потом -- текущее: - -```js run -var list = { - value: 1, - next: { - value: 2, - next: { - value: 3, - next: { - value: 4, - next: null - } - } - } -}; - -function printReverseList(list) { - - if (list.next) { - printReverseList(list.next); - } - - alert( list.value ); -} - -printReverseList(list); -``` - -# Обратный вывод без рекурсии - -```js run -var list = { - value: 1, - next: { - value: 2, - next: { - value: 3, - next: { - value: 4, - next: null - } - } - } -}; - -function printReverseList(list) { - var arr = []; - var tmp = list; - - while (tmp) { - arr.push(tmp.value); - tmp = tmp.next; - } - - for (var i = arr.length - 1; i >= 0; i--) { - alert( arr[i] ); - } -} - -printReverseList(list); -``` - -**Обратный вывод без рекурсии быстрее.** - -По сути, рекурсивный вариант и нерекурсивный работают одинаково: они проходят список и запоминают его элементы, а потом выводят в обратном порядке. - -В случае с массивом это очевидно, а для рекурсии запоминание происходит в стеке (внутренней специальной структуре данных): когда вызывается вложенная функция, то интерпретатор сохраняет в стек текущие параметры. Вложенные вызовы заполняют стек, а потом он выводится в обратном порядке. - -При этом, при рекурсии в стеке сохраняется не только элемент списка, а другая вспомогательная информация, необходимая для возвращения из вложенного вызова. Поэтому тратится больше памяти. Все эти расходы отсутствуют во варианте без рекурсии, так как в массиве хранится именно то, что нужно. - -Преимущество рекурсии, с другой стороны -- более короткий и, зачастую, более простой код. \ No newline at end of file diff --git a/1-js/4-data-structures/8-array-methods/9-output-single-linked-list/task.md b/1-js/4-data-structures/8-array-methods/9-output-single-linked-list/task.md deleted file mode 100644 index 3306199f..00000000 --- a/1-js/4-data-structures/8-array-methods/9-output-single-linked-list/task.md +++ /dev/null @@ -1,49 +0,0 @@ -importance: 5 - ---- - -# Вывести односвязный список - -[Односвязный список](http://ru.wikipedia.org/wiki/Связный_список) -- это структура данных, которая состоит из *элементов*, каждый из которых хранит ссылку на следующий. Последний элемент может не иметь ссылки, либо она равна `null`. - -Например, объект ниже задаёт односвязный список, в `next` хранится ссылка на следующий элемент: - -```js -var list = { - value: 1, - next: { - value: 2, - next: { - value: 3, - next: { - value: 4, - next: null - } - } - } -}; -``` - -Графическое представление этого списка: -![](linked-list.png) - -Альтернативный способ создания: - -```js no-beautify -var list = { value: 1 }; -list.next = { value: 2 }; -list.next.next = { value: 3 }; -list.next.next.next = { value: 4 }; -``` - -Такая структура данных интересна тем, что можно очень быстро разбить список на части, объединить списки, удалить или добавить элемент в любое место, включая начало. При использовании массива такие действия требуют обширных перенумерований. - -Задачи: - -1. Напишите функцию `printList(list)`, которая выводит элементы списка по очереди, при помощи цикла. -2. Напишите функцию `printList(list)` при помощи рекурсии. -3. Напишите функцию `printReverseList(list)`, которая выводит элементы списка в обратном порядке, при помощи рекурсии. -Для списка выше она должна выводить `4`,`3`,`2`,`1` -4. Сделайте вариант `printReverseList(list)`, использующий не рекурсию, а цикл. - -Как лучше -- с рекурсией или без? \ No newline at end of file diff --git a/1-js/4-data-structures/8-array-methods/article.md b/1-js/4-data-structures/8-array-methods/article.md index 9f1e3069..b2f57b91 100644 --- a/1-js/4-data-structures/8-array-methods/article.md +++ b/1-js/4-data-structures/8-array-methods/article.md @@ -1,234 +1,196 @@ -# Массивы: методы +# Array methods -В этой главе мы рассмотрим встроенные методы массивов JavaScript. +Arrays provide a lot of methods. In this chapter we'll study them more in-depth. [cut] -## Метод split +## split and join -Ситуация из реальной жизни. Мы пишем сервис отсылки сообщений и посетитель вводит имена тех, кому его отправить: `Маша, Петя, Марина, Василий...`. Но нам-то гораздо удобнее работать с массивом имен, чем с одной строкой. +The situation from the real life. We are writing a messaging app, and the person enters the comma-delimited list of receivers: `John, Pete, Mary`. But for us an array of nameswould be much more comfortable than a single string. -К счастью, есть метод `split(s)`, который позволяет превратить строку в массив, разбив ее по разделителю `s`. В примере ниже таким разделителем является строка из запятой и пробела. +The [str.split(s)](mdn:js/String/split) method turns the string into array splitting it by the given delimiter `s`. + +In the example below, we split by a comma and a space: ```js run -var names = 'Маша, Петя, Марина, Василий'; +let names = 'Bilbo, Gandalf, Nazgul'; -var arr = names.split(', '); +let arr = names.split(', '); -for (var i = 0; i < arr.length; i++) { - alert( 'Вам сообщение ' + arr[i] ); +for (let name of arr) { + alert( `A message to ${name}.` ); // A message to Bilbo (and other names) } ``` -````smart header="Второй аргумент `split`" -У метода `split` есть необязательный второй аргумент -- ограничение на количество элементов в массиве. Если их больше, чем указано -- остаток массива будет отброшен: +The `split` method has an optional second numeric argument -- a limit on the array length. If it is provided, then the extra elements are ignored. In practice it is rarely used though: ```js run -alert( "a,b,c,d".split(',', *!*2*/!*) ); // a,b +let arr = 'Bilbo, Gandalf, Nazgul, Saruman'.split(', ', 2); + +alert(arr); // Bilbo, Gandalf +``` + +````smart header="Split into letters" +The call to `split(s)` with an empty `s` would split the string into an array of letters: + +```js run +let str = "test"; + +alert( str.split('') ); // t,e,s,t ``` ```` -````smart header="Разбивка по буквам" -Вызов `split` с пустой строкой разобьёт по буквам: +The call [arr.join(str)](mdn:js/Array/join) does the reverse to `split`. It creates a string of `arr` items glued by `str` beween them. + +For instance: ```js run -var str = "тест"; +let arr = ['Bilbo', 'Gandalf', 'Nazgul']; -alert( str.split('') ); // т,е,с,т -``` -```` +let str = arr.join(';'); -## Метод join - -Вызов `arr.join(str)` делает в точности противоположное `split`. Он берет массив и склеивает его в строку, используя `str` как разделитель. - -Например: - -```js run -var arr = ['Маша', 'Петя', 'Марина', 'Василий']; - -var str = arr.join(';'); - -alert( str ); // Маша;Петя;Марина;Василий +alert( str ); // Bilbo;Gandalf;Nazgul ``` -````smart header="new Array + join = Повторение строки" -Код для повторения строки `3` раза: +## splice + +How to delete an element from the array? + +The arrays are objects, so we can use a generic `delete` call: ```js run -alert( new Array(4).join("ля") ); // ляляля -``` +var arr = ["I", "go", "home"]; -Как видно, `new Array(4)` делает массив без элементов длины 4, который `join` объединяет в строку, вставляя *между его элементами* строку `"ля"`. +delete arr[1]; // remove "go" -В результате, так как элементы пусты, получается повторение строки. Такой вот небольшой трюк. -```` - -## Удаление из массива - -Так как массивы являются объектами, то для удаления ключа можно воспользоваться обычным `delete`: - -```js run -var arr = ["Я", "иду", "домой"]; - -delete arr[1]; // значение с индексом 1 удалено - -// теперь arr = ["Я", undefined, "домой"]; +// now arr = ["I", , "home"]; alert( arr[1] ); // undefined ``` -Да, элемент удален из массива, но не так, как нам этого хочется. Образовалась "дырка". +The element was removed, but the array still has `arr.length == 3`. -Это потому, что оператор `delete` удаляет пару "ключ-значение". Это -- все, что он делает. Обычно же при удалении из массива мы хотим, чтобы оставшиеся элементы сдвинулись и заполнили образовавшийся промежуток. +That's natural, because `delete obj.key` removes a value by the `key`. It's all it does. Fine for objects. But for arrays we usually want the rest of elements to shift and occupy the freed place. We expect to have a shorter array now. -Поэтому для удаления используются специальные методы: из начала -- `shift`, с конца -- `pop`, а из середины -- `splice`, с которым мы сейчас познакомимся. +So, special methods should be used. -## Метод splice +The [arr.splice(str)](mdn:js/Array/splice) method is a swiss army knife for arrays. It can do everything: add, remove and insert elements. -Метод `splice` -- это универсальный раскладной нож для работы с массивами. Умеет все: удалять элементы, вставлять элементы, заменять элементы -- по очереди и одновременно. +The syntax is: -Его синтаксис: +``` +arr.splice(index[, deleteCount, elem1, ..., elemN]) +``` -`arr.splice(index[, deleteCount, elem1, ..., elemN])` -: Удалить `deleteCount` элементов, начиная с номера `index`, а затем вставить `elem1, ..., elemN` на их место. Возвращает массив из удалённых элементов. +It removes `deleteCount` elements, starting from the index `index`, and then inserts `elem1, ..., elemN` at their place. Returns the array of removed elements. -Этот метод проще всего понять, рассмотрев примеры. +This method is easy to grasp by examples. -Начнём с удаления: +Let's start with the deletion: ```js run -var arr = ["Я", "изучаю", "JavaScript"]; +let arr = ["I", "study", "JavaScript"]; *!* -arr.splice(1, 1); // начиная с позиции 1, удалить 1 элемент +arr.splice(1, 1); // from index 1 remove 1 element */!* -alert( arr ); // осталось ["Я", "JavaScript"] +alert( arr ); // ["I", "JavaScript"] ``` -В следующем примере мы удалим 3 элемента и вставим другие на их место: +In the next example we remove 3 elements and replace them by the other two: ```js run -var arr = [*!*"Я", "сейчас", "изучаю",*/!* "JavaScript"]; +let arr = [*!*"I", "study", "JavaScript",*/!* "right", "now"]; -// удалить 3 первых элемента и добавить другие вместо них -arr.splice(0, 3, "Мы", "изучаем") +// remove 3 first elements and replace them by another +arr.splice(0, 3, "Let's", "dance") -alert( arr ) // теперь [*!*"Мы", "изучаем"*/!*, "JavaScript"] +alert( arr ) // now [*!*"Let's", "dance"*/!*, "right", "now"] ``` -Здесь видно, что `splice` возвращает массив из удаленных элементов: +Here we can see that `splice` returns the array of removed elements: ```js run -var arr = [*!*"Я", "сейчас",*/!* "изучаю", "JavaScript"]; +let arr = [*!*"I", "study",*/!* "JavaScript", "right", "now"]; -// удалить 2 первых элемента -var removed = arr.splice(0, 2); +// remove 2 first elements +let removed = arr.splice(0, 2); -alert( removed ); // "Я", "сейчас" <-- array of removed elements +alert( removed ); // "I", "study" <-- array of removed elements ``` -Метод `splice` также может вставлять элементы без удаления, для этого достаточно установить `deleteCount` в `0`: +The `splice` method is also able to only insert the elements, without any removals. For that we need to set `deleteCount` to `0`: ```js run -var arr = ["Я", "изучаю", "JavaScript"]; +let arr = ["I", "study", "JavaScript"]; -// с позиции 2 -// удалить 0 -// вставить "сложный", "язык" -arr.splice(2, 0, "сложный", "язык"); +// from index 2 +// delete 0 +// then insert "complex" and "language" +arr.splice(2, 0, "complex", "language"); -alert( arr ); // "Я", "изучаю", "сложный", "язык", "JavaScript" +alert( arr ); // "I", "study", "complex", "language", "JavaScript" ``` -Допускается использование отрицательного номера позиции, которая в этом случае отсчитывается с конца: +````smart header="Negative indexes allowed" +Here and in other array methods, negative indexes are allowed. The specify the position from the end of the array, like here: ```js run -var arr = [1, 2, 5] +let arr = [1, 2, 5] -// начиная с позиции индексом -1 (предпоследний элемент) -// удалить 0 элементов, -// затем вставить числа 3 и 4 +// from index -1 (one step from the end) +// delete 0 elements, +// then insert 3 and 4 arr.splice(-1, 0, 3, 4); -alert( arr ); // результат: 1,2,3,4,5 +alert( arr ); // 1,2,3,4,5 ``` +```` -## Метод slice +## sort(fn) -Метод `slice(begin, end)` копирует участок массива от `begin` до `end`, не включая `end`. Исходный массив при этом не меняется. +The method [arr.sort()](mdn:js/Array/sort) sorts the array *at place*. -Например: +For instance: ```js run -var arr = ["Почему", "надо", "учить", "JavaScript"]; - -var arr2 = arr.slice(1, 3); // элементы 1, 2 (не включая 3) - -alert( arr2 ); // надо, учить -``` - -Аргументы ведут себя так же, как и в строковом `slice`: - -- Если не указать `end` -- копирование будет до конца массива: - - ```js run - var arr = ["Почему", "надо", "учить", "JavaScript"]; - - alert( arr.slice(1) ); // взять все элементы, начиная с номера 1 - ``` -- Можно использовать отрицательные индексы, они отсчитываются с конца: - - ```js - var arr2 = arr.slice(-2); // копировать от 2го элемента с конца и дальше - ``` -- Если вообще не указать аргументов -- скопируется весь массив: - - ```js - var fullCopy = arr.slice(); - ``` - -```smart header="Совсем как в строках" -Синтаксис метода `slice` одинаков для строк и для массивов. Тем проще его запомнить. -``` - -## Сортировка, метод sort(fn) - -Метод `sort()` сортирует массив *на месте*. Например: - -```js run -var arr = [ 1, 2, 15 ]; +let arr = [ 1, 2, 15 ]; +// the method reorders the content of arr (and returns it) arr.sort(); alert( arr ); // *!*1, 15, 2*/!* ``` -Не заметили ничего странного в этом примере? +Did you notice anything strange in the outcome? -Порядок стал `1, 15, 2`, это точно не сортировка чисел. Почему? +The order became `1, 15, 2`. Incorrect. But why? -**Это произошло потому, что по умолчанию `sort` сортирует, преобразуя элементы к строке.** +**The items are sorted as strings by default.** -Поэтому и порядок у них строковый, ведь `"2" > "15"`. +Literally, all elements are converted to strings and then compared. So, the lexicographic ordering is applied and indeed `"2" > "15"`. -### Свой порядок сортировки +To use our own sorting order, we need to supply a function of two arguments as the argument of `arr.sort()`. -Для указания своего порядка сортировки в метод `arr.sort(fn)` нужно передать функцию `fn` от двух элементов, которая умеет сравнивать их. +The function should work like this: +```js +function compare(a, b) { + if (a > b) return 1; + if (a == b) return 0; + if (a < b) return -1; +} +``` -Внутренний алгоритм функции сортировки умеет сортировать любые массивы -- апельсинов, яблок, пользователей, и тех и других и третьих -- чего угодно. Но для этого ему нужно знать, как их сравнивать. Эту роль и выполняет `fn`. - -Если эту функцию не указать, то элементы сортируются как строки. - -Например, укажем эту функцию явно, отсортируем элементы массива как числа: +For instance: ```js run function compareNumeric(a, b) { if (a > b) return 1; + if (a == b) return 0; if (a < b) return -1; } -var arr = [ 1, 2, 15 ]; +let arr = [ 1, 2, 15 ]; *!* arr.sort(compareNumeric); @@ -237,163 +199,292 @@ arr.sort(compareNumeric); alert(arr); // *!*1, 2, 15*/!* ``` -Обратите внимание, мы передаём в `sort()` именно саму функцию `compareNumeric`, без вызова через скобки. Был бы ошибкой следующий код: +Now it works as intended. -```js -arr.sort( compareNumeric*!*()*/!* ); // не сработает -``` +Let's step aside and thing what's happening. The `arr` can be array of anything, right? It may contain numbers or strings or html elements or whatever. We have a set of something. To sort it, we need an *ordering function* that knows how to compare the elements. The default is a string order. -Как видно из примера выше, функция, передаваемая `sort`, должна иметь два аргумента. +The `arr.sort(fn)` method has a built-in implementation of a sorting algorithm. We don't need to care which one (an optimized [quicksort](https://en.wikipedia.org/wiki/Quicksort) most of time). It will walk the array, compare its elements using the provided function and reorder them. -Алгоритм сортировки, встроенный в JavaScript, будет передавать ей для сравнения элементы массива. Она должна возвращать: +So, `arr.sort(fn)` is like a black box for us. -- Положительное значение, если `a > b`, -- Отрицательное значение, если `a < b`, -- Если равны -- можно `0`, но вообще -- не важно, что возвращать, их взаимный порядок не имеет значения. +1. We've got an array of some items to sort. +2. We call `sort(fn)` providing the function that knows how to compare. +3. It sorts. -````smart header="Алгоритм сортировки" -В методе `sort`, внутри самого интерпретатора JavaScript, реализован универсальный алгоритм сортировки. Как правило, это ["\"быстрая сортировка\""](http://algolist.manual.ru/sort/quick_sort.php), дополнительно оптимизированная для небольших массивов. - -Он решает, какие пары элементов и когда сравнивать, чтобы отсортировать побыстрее. Мы даём ему функцию -- способ сравнения, дальше он вызывает её сам. - -Кстати, те значения, с которыми `sort` вызывает функцию сравнения, можно увидеть, если вставить в неё `alert`: +By the way, if we ever want to know which elements are compared -- nothing prevents from alerting them: ```js run [1, -2, 15, 2, 0, 8].sort(function(a, b) { alert( a + " <> " + b ); }); ``` + +The algorithm may compare an element with multiple other elements. But it tries to make as few comparisons as possible. + + +````smart header="A comparison function may return any number" +Actually, a comparison function is only required to return a positive number to say "greater" and a negative number to say "less". + +That allows to write shorter functions: + +```js run +let arr = [ 1, 2, 15 ]; + +arr.sort(function(a, b) { return a - b; }); + +alert(arr); // *!*1, 2, 15*/!* +``` ```` -````smart header="Сравнение `compareNumeric` в одну строку" -Функцию `compareNumeric` для сравнения элементов-чисел можно упростить до одной строчки. +````smart header="Arrow functions for the best" +Remember [arrow functions](info:function-expression#arrow-functions)? We can use them here for neater sorting: -```js -function compareNumeric(a, b) { - return a - b; -} +```js +arr.sort( (a, b) => a - b ); ``` -Эта функция вполне подходит для `sort`, так как возвращает положительное число, если `a > b`, отрицательное, если наоборот, и `0`, если числа равны. +This would work exactly the same as a longer function expression above. ```` -## reverse +## indexOf/lastIndexOf and includes -Метод [arr.reverse()](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/reverse) меняет порядок элементов в массиве на обратный. +The methods [arr.indexOf](mdn:js/Array/indexOf), [arr.lastIndexOf](mdn:js/Array/lastIndexOf) and [arr.includes](mdn:js/Array/includes) are the same as their string counterparts. + +For instance: ```js run -var arr = [1, 2, 3]; -arr.reverse(); - -alert( arr ); // 3,2,1 -``` - -## concat - -Метод [arr.concat(value1, value2, ... valueN)](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/concat) создаёт новый массив, в который копируются элементы из `arr`, а также `value1, value2, ... valueN`. - -Например: - -```js run -var arr = [1, 2]; -*!* -var newArr = arr.concat(3, 4); -*/!* - -alert( newArr ); // 1,2,3,4 -``` - -У `concat` есть одна забавная особенность. - -Если аргумент `concat` -- массив, то `concat` добавляет элементы из него. - -Например: - -```js run -var arr = [1, 2]; - -*!* -var newArr = arr.concat([3, 4], 5); // то же самое, что arr.concat(3,4,5) -*/!* - -alert( newArr ); // 1,2,3,4,5 -``` - -## indexOf/lastIndexOf - -Эти методы не поддерживаются в IE8-. Для их поддержки подключите библиотеку [ES5-shim](https://github.com/kriskowal/es5-shim). - -Метод ["arr.indexOf(searchElement[, fromIndex])"](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/indexOf) возвращает номер элемента `searchElement` в массиве `arr` или `-1`, если его нет. - -Поиск начинается с номера `fromIndex`, если он указан. Если нет -- с начала массива. - -**Для поиска используется строгое сравнение `===`.** - -Например: - -```js run -var arr = [1, 0, false]; +let arr = [1, 0, false]; alert( arr.indexOf(0) ); // 1 alert( arr.indexOf(false) ); // 2 alert( arr.indexOf(null) ); // -1 + +alert( arr.includes(1) ); // true ``` -Как вы могли заметить, по синтаксису он полностью аналогичен методу [indexOf для строк](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String/indexOf). +Note that the methods use `===` comparison. So, if we look for `false`, it finds exactly `false` and not the zero. -Метод ["arr.lastIndexOf(searchElement[, fromIndex])"](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/lastIndexOf) ищет справа-налево: с конца массива или с номера `fromIndex`, если он указан. -```warn header="Методы `indexOf/lastIndexOf` осуществляют поиск перебором" -Если нужно проверить, существует ли значение в массиве -- его нужно перебрать. Только так. Внутренняя реализация `indexOf/lastIndexOf` осуществляет полный перебор, аналогичный циклу `for` по массиву. Чем длиннее массив, тем дольше он будет работать. -``` +## find -````smart header="Коллекция уникальных элементов" -Рассмотрим задачу -- есть коллекция строк, и нужно быстро проверять: есть ли в ней какой-то элемент. Массив для этого не подходит из-за медленного `indexOf`. Но подходит объект! Доступ к свойству объекта осуществляется очень быстро, так что можно сделать все элементы ключами объекта и проверять, есть ли уже такой ключ. +Imagine we have an array of objects. How do we find an object with the specific condition? -Например, организуем такую проверку для коллекции строк `"div"`, `"a"` и `"form"`: +Here the [arr.find(fn)](mdn:js/Array/find) method comes in handy. +The syntax is: ```js -var store = {}; // объект для коллекции - -var items = ["div", "a", "form"]; - -for (var i = 0; i < items.length; i++) { - var key = items[i]; // для каждого элемента создаём свойство - store[key] = true; // значение здесь не важно -} +let result = arr.find(function(item, index, array) { + // return true if the item is what we look for +}); ``` -Теперь для проверки, есть ли ключ `key`, достаточно выполнить `if (store[key])`. Если есть -- можно использовать значение, если нет -- добавить. +The function is called repetitively for each element of the array: -Такое решение работает только со строками, но применимо к любым элементам, для которых можно вычислить строковый "уникальный ключ". -```` +- `item` is the element. +- `index` is its index. +- `array` is the array itself. -## Object.keys(obj) +If it returns `true`, the search is stopped, the `item` is returned. If nothing found, `undefined` is returned. -Ранее мы говорили о том, что свойства объекта можно перебрать в цикле `for..in`. - -Если мы хотим работать с ними в виде массива, то к нашим услугам -- замечательный метод [Object.keys(obj)](https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object/keys). Он поддерживается везде, кроме IE8-: +For example, we have an array of users, each with the fields `id` and `name`. Let's find the one with `id == 1`: ```js run -var user = { - name: "Петя", - age: 30 -} +let users = [ + {id: 1, name: "John"}, + {id: 2, name: "Pete"}, + {id: 3, name: "Mary"} +]; -var keys = Object.keys(user); +let user = users.find(item => item.id == 1); -alert( keys ); // name, age +alert(user.name); // John ``` -## Итого +In real life arrays of objects is a common thing, so the `find` method is very useful. -Методы: +Note that in the example we provide to `find` a single-argument function `item => item.id == 1`. It could be longer, like `(item, index, array) => ...`, but the additional parameters are optional. In fact, they are rarely used. -- `push/pop`, `shift/unshift`, `splice` -- для добавления и удаления элементов. -- `join/split` -- для преобразования строки в массив и обратно. -- `sort` -- для сортировки массива. Если не передать функцию сравнения -- сортирует элементы как строки. -- `reverse` -- меняет порядок элементов на обратный. -- `concat` -- объединяет массивы. -- `indexOf/lastIndexOf` -- возвращают позицию элемента в массиве (не поддерживается в IE8-). -Изученных нами методов достаточно в 95% случаях, но существуют и другие. Для знакомства с ними рекомендуется заглянуть в справочник Array и [Array в Mozilla Developer Network](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array). \ No newline at end of file +## filter + +The `find` method looks for a single (first) element that makes the function return `true`. + +If there may be multiple, we can use [arr.filter(fn)](mdn:js/Array/filter). + +The syntax is roughly the same, but it returns an array of matching elements: + +```js run +let users = [ + {id: 1, name: "John"}, + {id: 2, name: "Pete"}, + {id: 3, name: "Mary"} +]; + +// returns array of the first two users +let someUsers = users.filter(item => item.id < 3); + +alert(someUsers.length); // 2 +``` + +## forEach + +The [arr.forEach](mdn:js/Array/forEach) method allows to run a function for every element of the array. + +The syntax: +```js +arr.forEach(function(item, index, array) { + // ... do something with item +}); +``` + +For instance, this shows each element of the array: + +```js run +// for each element call alert +["Bilbo", "Gandalf", "Nazgul"].forEach(alert); +``` + +And this code is more elaborate about their positions in the target array: + +```js run +["Bilbo", "Gandalf", "Nazgul"].forEach((item, index, array) => { + alert(`${item} is at index ${index} in ${array}`); +}); +``` + +The result of the function (if it returns any) is thrown away and ignored. + +## map + +The [arr.map](mdn:js/Array/map) is used to transform the array. + +It calls a function for each element of the array and returns the array of the results. + +For instance: + +```js run +let lengths = ["Bilbo", "Gandalf", "Nazgul"].map(item => item.length) +alert(lengths); // 5,7,6 +``` + +## reduce/reduceRight + +When we need to iterate over an array -- we can use `forEach`. + +When we need to iterate and return the data for each element -- we can use `map`. + +The methods [arr.reduce](mdn:js/Array/reduce) and [arr.reduceRight](mdn:js/Array/reduceRight) also belong to that breed, but are a little bit more intricate. They are used to calculate a single value based on the array. + +The syntax is: + +```js +let value = arr.reduce(function(previousValue, item, index, arr) { + // ... +}, initial); +``` + +The function is applied to the elements. You may notice the familiar arguments, starting from the 2nd: + +- `item` -- is the current array item. +- `index` -- is its position. +- `arr` -- is the array. + +So far, like `forEach/map`. But there's one more argument: + +- `previousValue` -- is the result of the previous function call, `initial` for the first call. + +The easiest way to grasp that is by example. + +Here we get a sum of array in one line: + +```js run +let arr = [1, 2, 3, 4, 5] + +let result = arr.reduce((sum, current) => sum + current), 0); + +alert( result ); // 15 +``` + +Here we used the most common variant of `reduce` which uses only 2 arguments. + +Let's see the details of what's going on. + +1. On the first run, `sum` is the initial value (the last argument of `reduce`), equals `0`, and `current` is the first array element, equals `1`. So the result is `1`. +2. On the second run, `sum = 1`, we add the second array element (`2`) to it and return. +3. On the 3rd run, `sum = 3` and we add one more element ot it, and so on... + +The calculation flow: + +![](reduce.png) + +Or in the form of a table, where each row represents is a function call on the next array element: + +| |`sum`|`current`|результат| +|---|-----|---------|---------| +|the first call|`0`|`1`|`1`| +|the second call|`1`|`2`|`3`| +|the third call|`3`|`3`|`6`| +|the fourth call|`6`|`4`|`10`| +|the fifth call|`10`|`5`|`15`| + + +As we can see, the result of the previous call becomes the first argument of the next one. + +We also can omit the initial value: + +```js run +let arr = [1, 2, 3, 4, 5]; + +// removed initial value from reduce (no 0) +let result = arr.reduce((sum, current) => sum + current); + +alert( result ); // 15 +``` + +The result is the same. That's because if there's no initial, then `reduce` takes the first element of the array as the initial value and starts the iteration from the 2nd element. + +The calculation table is the same as above, minus the first row. + +But such use requires an extreme care. If the array is empty, then `reduce` call without initial value gives an error. So it's generally advised to specify the initial value. + +The method [arr.reduceRight](mdn:js/Array/reduceRight) does the same, but goes from right to left. + +## Other methods + +We covered the most useful methods. But there are other too, for instance: + +- [arr.slice(begin, end)](mdn:js/Array/slice) copies the portion of the array. + + It creates a new array and copies elements of `arr` from `begin` to `end` into it. Both arguments are optional: if `end` is omitted, the copying goes till the end, if `begin` is omitted, then from the very beginning. So `arr.slice()` makes a full copy. + +- [arr.concat(arr2, arr3...)](mdn:js/Array/concat) joins the arrays. + + It creates a new array from elements of `arr`, then appends elements from `arr2` to it, then appends elements from `arr3` and so on. + +- [arr.reverse()](mdn:js/Array/reverse) reverses the array. + + It creates a new array with elements from `arr` in the reverse order. + +- [arr.some(fn)](mdn:js/Array/some)/[arr.every(fn)](mdn:js/Array/every) check the array. + + The function `fn` is called on each element of the array similar to `map`. If any/all results are `true`, returns `true`, otherwise `false`. + +These and other methods are also listed in the [manual](mdn:js/Array). + +## Summary + +Most often methods: + +- `split/join` -- convert a string to array and back. +- `splice` -- delete and insert elements at the given position. +- `sort` -- sorts the array. +- `indexOf/lastIndexOf`, `includes` -- look for the value. +- `find/filter` -- return first/all values satisfying the given condition. +- `forEach` -- runs a function for each element. +- `map` -- transforms the array through the function. +- `reduce/reduceRight` -- calculates a single value based on array. +- `slice` -- copy the part of the array. + +These methods are used in 95% of cases. For the full list, see the [manual](mdn:js/Array). + +The methods are easy to remember when you use them. Please refer to the tasks for some practice. diff --git a/1-js/4-data-structures/9-array-iteration/reduce.png b/1-js/4-data-structures/8-array-methods/reduce.png similarity index 100% rename from 1-js/4-data-structures/9-array-iteration/reduce.png rename to 1-js/4-data-structures/8-array-methods/reduce.png diff --git a/1-js/4-data-structures/9-array-iteration/reduce@2x.png b/1-js/4-data-structures/8-array-methods/reduce@2x.png similarity index 100% rename from 1-js/4-data-structures/9-array-iteration/reduce@2x.png rename to 1-js/4-data-structures/8-array-methods/reduce@2x.png diff --git a/1-js/4-data-structures/9-array-iteration/1-rewrite-for-map/solution.md b/1-js/4-data-structures/9-array-iteration/1-rewrite-for-map/solution.md deleted file mode 100644 index 53a42c75..00000000 --- a/1-js/4-data-structures/9-array-iteration/1-rewrite-for-map/solution.md +++ /dev/null @@ -1,14 +0,0 @@ - - -```js run -var arr = ["Есть", "жизнь", "на", "Марсе"]; - -*!* -var arrLength = arr.map(function(item) { - return item.length; -}); -*/!* - -alert( arrLength ); // 4,5,2,5 -``` - diff --git a/1-js/4-data-structures/9-array-iteration/1-rewrite-for-map/task.md b/1-js/4-data-structures/9-array-iteration/1-rewrite-for-map/task.md deleted file mode 100644 index 71a20274..00000000 --- a/1-js/4-data-structures/9-array-iteration/1-rewrite-for-map/task.md +++ /dev/null @@ -1,22 +0,0 @@ -importance: 5 - ---- - -# Перепишите цикл через map - -Код ниже получает из массива строк новый массив, содержащий их длины: - -```js run -var arr = ["Есть", "жизнь", "на", "Марсе"]; - -*!* -var arrLength = []; -for (var i = 0; i < arr.length; i++) { - arrLength[i] = arr[i].length; -} -*/!* - -alert( arrLength ); // 4,5,2,5 -``` - -Перепишите выделенный участок: уберите цикл, используйте вместо него метод `map`. \ No newline at end of file diff --git a/1-js/4-data-structures/9-array-iteration/2-partial-sums-array/_js.view/solution.js b/1-js/4-data-structures/9-array-iteration/2-partial-sums-array/_js.view/solution.js deleted file mode 100644 index c79d8e9e..00000000 --- a/1-js/4-data-structures/9-array-iteration/2-partial-sums-array/_js.view/solution.js +++ /dev/null @@ -1,12 +0,0 @@ -function getSums(arr) { - var result = []; - if (!arr.length) return result; - - var totalSum = arr.reduce(function(sum, item) { - result.push(sum); - return sum + item; - }); - result.push(totalSum); - - return result; -} \ No newline at end of file diff --git a/1-js/4-data-structures/9-array-iteration/2-partial-sums-array/_js.view/test.js b/1-js/4-data-structures/9-array-iteration/2-partial-sums-array/_js.view/test.js deleted file mode 100644 index 74a170a6..00000000 --- a/1-js/4-data-structures/9-array-iteration/2-partial-sums-array/_js.view/test.js +++ /dev/null @@ -1,18 +0,0 @@ -describe("getSums", function() { - - it("частичные суммы [1,2,3,4,5] равны [1,3,6,10,15]", function() { - assert.deepEqual(getSums([1, 2, 3, 4, 5]), [1, 3, 6, 10, 15]); - }); - - it("частичные суммы [-2,-1,0,1] равны [-2,-3,-3,-2]", function() { - assert.deepEqual(getSums([-2, -1, 0, 1]), [-2, -3, -3, -2]); - }); - - it("частичные суммы [] равны []", function() { - assert.deepEqual(getSums([]), []); - }); - - it("частичные суммы [1] равны [1]", function() { - assert.deepEqual(getSums([1]), [1]); - }); -}); \ No newline at end of file diff --git a/1-js/4-data-structures/9-array-iteration/2-partial-sums-array/solution.md b/1-js/4-data-structures/9-array-iteration/2-partial-sums-array/solution.md deleted file mode 100644 index 0af13c4f..00000000 --- a/1-js/4-data-structures/9-array-iteration/2-partial-sums-array/solution.md +++ /dev/null @@ -1,46 +0,0 @@ -Метод `arr.reduce` подходит здесь идеально. Достаточно пройтись по массиву слева-направа, накапливая текущую сумму в переменной и, кроме того, добавляя её в результирующий массив. - -Неправильный вариант может выглядеть так: - -```js run -function getSums(arr) { - var result = []; - if (!arr.length) return result; - - arr.reduce(function(sum, item) { - result.push(sum); - return sum + item; - }); - - return result; -} - -alert(getSums([1,2,3,4,5])); // результат: *!*1,3,6,10*/!* -``` - -Перед тем, как читать дальше, посмотрите на него внимательно. Заметили, в чём ошибка? - -Если вы его запустите, то обнаружите, что результат не совсем тот. В получившемся массиве всего четыре элемента, отсутствует последняя сумма. - -Это из-за того, что последняя сумма является результатом метода `reduce`, он на ней заканчивает проход и далее функцию не вызывает, поэтому она оказывается не добавленной в `result`. - -Исправим это: - -```js run -function getSums(arr) { - var result = []; - if (!arr.length) return result; - - *!*var totalSum*/!* = arr.reduce(function(sum, item) { - result.push(sum); - return sum + item; - }); - *!*result.push(totalSum);*/!* - - return result; -} - -alert(getSums([1,2,3,4,5])); // *!*1,3,6,10,15*/!* -alert(getSums([-2,-1,0,1])); // *!*-2,-3,-3,-2*/!* -``` - diff --git a/1-js/4-data-structures/9-array-iteration/2-partial-sums-array/task.md b/1-js/4-data-structures/9-array-iteration/2-partial-sums-array/task.md deleted file mode 100644 index 81709c7e..00000000 --- a/1-js/4-data-structures/9-array-iteration/2-partial-sums-array/task.md +++ /dev/null @@ -1,24 +0,0 @@ -importance: 2 - ---- - -# Массив частичных сумм - -На входе массив чисел, например: `arr = [1,2,3,4,5]`. - -Напишите функцию `getSums(arr)`, которая возвращает массив его частичных сумм. - -Иначе говоря, вызов `getSums(arr)` должен возвращать новый массив из такого же числа элементов, в котором на каждой позиции должна быть сумма элементов `arr` до этой позиции включительно. - -То есть: - -```js no-beautify -для arr = [ 1, 2, 3, 4, 5 ] -getSums( arr ) = [ 1, 1+2, 1+2+3, 1+2+3+4, 1+2+3+4+5 ] = [ 1, 3, 6, 10, 15 ] -``` - -Еще пример: `getSums([-2,-1,0,1]) = [-2,-3,-3,-2]`. - -- Функция не должна модифицировать входной массив. -- В решении используйте метод `arr.reduce`. - diff --git a/1-js/4-data-structures/9-array-iteration/article.md b/1-js/4-data-structures/9-array-iteration/article.md deleted file mode 100644 index c084538b..00000000 --- a/1-js/4-data-structures/9-array-iteration/article.md +++ /dev/null @@ -1,221 +0,0 @@ -# Массив: перебирающие методы - -Современный стандарт JavaScript предоставляет много методов для "умного" перебора массивов, которые есть в современных браузерах... - -...Ну а для их поддержки в IE8- просто подключите библиотеку [ES5-shim](https://github.com/kriskowal/es5-shim). - -[cut] - -## forEach - -Метод ["arr.forEach(callback[, thisArg])"](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/forEach) используется для перебора массива. - -Он для каждого элемента массива вызывает функцию `callback`. - -Этой функции он передаёт три параметра `callback(item, i, arr)`: - -- `item` -- очередной элемент массива. -- `i` -- его номер. -- `arr` -- массив, который перебирается. - -Например: - -```js run -var arr = ["Яблоко", "Апельсин", "Груша"]; - -arr.forEach(function(item, i, arr) { - alert( i + ": " + item + " (массив:" + arr + ")" ); -}); -``` - -Второй, необязательный аргумент `forEach` позволяет указать контекст `this` для `callback`. Мы обсудим его в деталях чуть позже, сейчас он нам не важен. - -Метод `forEach` ничего не возвращает, его используют только для перебора, как более "элегантный" вариант, чем обычный цикл `for`. - -## filter - -Метод ["arr.filter(callback[, thisArg])"](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/filter) используется для *фильтрации* массива через функцию. - -Он создаёт новый массив, в который войдут только те элементы `arr`, для которых вызов `callback(item, i, arr)` возвратит `true`. - -Например: - -```js run -var arr = [1, -1, 2, -2, 3]; - -*!* -var positiveArr = arr.filter(function(number) { - return number > 0; -}); -*/!* - -alert( positiveArr ); // 1,2,3 -``` - -## map - -Метод ["arr.map(callback[, thisArg])"](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/map) используется для *трансформации* массива. - -Он создаёт новый массив, который будет состоять из результатов вызова `callback(item, i, arr)` для каждого элемента `arr`. - -Например: - -```js run -var names = ['HTML', 'CSS', 'JavaScript']; - -*!* -var nameLengths = names.map(function(name) { - return name.length; -}); -*/!* - -// получили массив с длинами -alert( nameLengths ); // 4,3,10 -``` - -## every/some - -Эти методы используется для проверки массива. - -- Метод ["arr.every(callback[, thisArg])"](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/every) возвращает `true`, если вызов `callback` вернёт `true` для *каждого* элемента `arr`. -- Метод ["arr.some(callback[, thisArg])"](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/some) возвращает `true`, если вызов `callback` вернёт `true` для *какого-нибудь* элемента `arr`. - -```js run -var arr = [1, -1, 2, -2, 3]; - -function isPositive(number) { - return number > 0; -} - -*!* -alert( arr.every(isPositive) ); // false, не все положительные -alert( arr.some(isPositive) ); // true, есть хоть одно положительное -*/!* -``` - -## reduce/reduceRight - -Метод ["arr.reduce(callback[, initialValue])"](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/reduce) используется для последовательной обработки каждого элемента массива с сохранением промежуточного результата. - -Это один из самых сложных методов для работы с массивами. Но его стоит освоить, потому что временами с его помощью можно в несколько строк решить задачу, которая иначе потребовала бы в разы больше места и времени. - -Метод `reduce` используется для вычисления на основе массива какого-либо единого значения, иначе говорят "для свёртки массива". Чуть далее мы разберём пример для вычисления суммы. - -Он применяет функцию `callback` по очереди к каждому элементу массива слева направо, сохраняя при этом промежуточный результат. - -Аргументы функции `callback(previousValue, currentItem, index, arr)`: - -- `previousValue` -- последний результат вызова функции, он же "промежуточный результат". -- `currentItem` -- текущий элемент массива, элементы перебираются по очереди слева-направо. -- `index` -- номер текущего элемента. -- `arr` -- обрабатываемый массив. - -Кроме `callback`, методу можно передать "начальное значение" -- аргумент `initialValue`. Если он есть, то на первом вызове значение `previousValue` будет равно `initialValue`, а если у `reduce` нет второго аргумента, то оно равно первому элементу массива, а перебор начинается со второго. - -Проще всего понять работу метода `reduce` на примере. - -Например, в качестве "свёртки" мы хотим получить сумму всех элементов массива. - -Вот решение в одну строку: - -```js run -var arr = [1, 2, 3, 4, 5] - -// для каждого элемента массива запустить функцию, -// промежуточный результат передавать первым аргументом далее -var result = arr.reduce(function(sum, current) { - return sum + current; -}, 0); - -alert( result ); // 15 -``` - -Разберём, что в нём происходит. - -При первом запуске `sum` -- исходное значение, с которого начинаются вычисления, равно нулю (второй аргумент `reduce`). - -Сначала анонимная функция вызывается с этим начальным значением и первым элементом массива, результат запоминается и передаётся в следующий вызов, уже со вторым аргументом массива, затем новое значение участвует в вычислениях с третьим аргументом и так далее. - -Поток вычислений получается такой - -![](reduce.png) - -В виде таблицы где каждая строка -- вызов функции на очередном элементе массива: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
sumcurrentрезультат
первый вызов011
второй вызов123
третий вызов336
четвёртый вызов6410
пятый вызов10515
- -Как видно, результат предыдущего вызова передаётся в первый аргумент следующего. - -Кстати, полный набор аргументов функции для `reduce` включает в себя `function(sum, current, i, array)`, то есть номер текущего вызова `i` и весь массив `arr`, но здесь в них нет нужды. - -Посмотрим, что будет, если не указать `initialValue` в вызове `arr.reduce`: - -```js run -var arr = [1, 2, 3, 4, 5] - -// убрали 0 в конце -var result = arr.reduce(function(sum, current) { - return sum + current -}); - -alert( result ); // 15 -``` - -Результат -- точно такой же! Это потому, что при отсутствии `initialValue` в качестве первого значения берётся первый элемент массива, а перебор стартует со второго. - -Таблица вычислений будет такая же, за вычетом первой строки. - -**Метод [arr.reduceRight](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/reduceRight) работает аналогично, но идёт по массиву справа-налево:** - -## Итого - -Мы рассмотрели методы: - -- `forEach` -- для *перебора* массива. -- `filter` -- для *фильтрации* массива. -- `every/some` -- для *проверки* массива. -- `map` -- для *трансформации* массива в массив. -- `reduce/reduceRight` -- для *прохода по массиву с вычислением значения*. - -Во многих ситуациях их использование позволяет написать код короче и понятнее, чем обычный перебор через `for`. diff --git a/1-js/4-data-structures/9-map-set-weakmap-weakset/1-recipients-set/solution.md b/1-js/4-data-structures/9-map-set-weakmap-weakset/1-recipients-set/solution.md new file mode 100644 index 00000000..08475cb6 --- /dev/null +++ b/1-js/4-data-structures/9-map-set-weakmap-weakset/1-recipients-set/solution.md @@ -0,0 +1,31 @@ +The sane choice here is a `WeakSet`: + +```js +let messages = [ + {title: "Hello"}, + {title: "I'm Mary"} + {title: "Bye!"} +]; + +let readMessages = new WeakSet(); + +// two messages have been read +readMessages.add(messages[0]); +readMessages.add(messages[1]); +// readMessages has 2 elements + +// ...let's read the first message again! +readMessages.add(messages[0]); +// readMessages still has 2 unique elements + +// answer: was the message[0] read? +alert("Read message 0: " + readMessages.has(messages[0])); + +messages.shift(); +// now readMessages has 1 element (or will be cleaned soon) +``` + +The `WeakSet` allows to store a set of messages and easily check for the existance of a message in it. + +It cleans up itself automatically. The tradeoff is that we can't iterate over it. That's not needed here though. + diff --git a/1-js/4-data-structures/9-map-set-weakmap-weakset/1-recipients-set/task.md b/1-js/4-data-structures/9-map-set-weakmap-weakset/1-recipients-set/task.md new file mode 100644 index 00000000..b90195d5 --- /dev/null +++ b/1-js/4-data-structures/9-map-set-weakmap-weakset/1-recipients-set/task.md @@ -0,0 +1,21 @@ +importance: 5 + +--- + +# A set of messages + +There's an array of messages: + +```js +let messages = [ + {title: "Hello"}, + {title: "I'm Mary"} + {title: "Bye!"} +]; +``` + +Your code can access it, but the messages are managed by someone else's code. New messages are added, old ones are removed regularly by that code, and you don't know the exact moments when it happens. + +Now, which data structure you could use to store only messages that are "have been read"? The structure must be well-suited to give the answer "was it read?" for the given message. + +P.S. When a message is removed from the collection, it should disappear from your structure as well. diff --git a/1-js/4-data-structures/9-map-set-weakmap-weakset/article.md b/1-js/4-data-structures/9-map-set-weakmap-weakset/article.md new file mode 100644 index 00000000..16dcdd52 --- /dev/null +++ b/1-js/4-data-structures/9-map-set-weakmap-weakset/article.md @@ -0,0 +1,317 @@ + +# Map, Set, WeakMap and WeakSet + +Now we have the following data structures: + +- Objects for storing keyed collections +- Arrays for storing ordered collections + +But that's not enough for real life. That's why there also exist `Map` and `Set`. + +## Map + +[Map](mdn:js/Map) is a collection of keyed data items. Just like an `Object`. But the main difference is that `Map` allows keys of any type. + +The main methods are: + +- `new Map()` -- creates the map. +- `map.set(key, value)` -- stores the value by the key. +- `map.get(key)` -- returns the value by the key. +- `map.has(key)` -- returns `true` if the `key` exists, `false` otherwise. +- `map.delete(key)` -- removes the value by the key. +- `map.clear()` -- clears the map +- `map.size` -- is the current elements count. + +For instance: + +```js run +let map = new Map(); + +map.set('1', 'str1'); // a string key +map.set(1, 'num1'); // a numeric key +map.set(true, 'bool1'); // a boolean key + +// remember the regular Object? it would keys to string +// Map keeps the type, so these two are different: +alert( map.get(1) ); // 'num1' +alert( map.get('1') ); // 'str1' + +alert( map.size ); // 3 +``` + +Every `map.set` call returns the map itself, so we can "chain" the calls: + +```js +map.set('1', 'str1') + .set(1, 'num1') + .set(true, 'bool1'); +``` + +When a `Map` is created, we can pass an array (or another iterable object) with key-value pairs, like this: + +```js +// array of [key, value] pairs +let map = new Map([ + ['1', 'str1'], + [1, 'num1'], + [true, 'bool1'] +]); +``` + +**Map can use objects as keys.** + +That can be really helpful. + +For instance: +```js run +let john = { name: "John" }; + +// for every user, let's store his visits count +let visitsCountMap = new Map(); + +// john is the key for the map +visitsCountMap.set(john, 123); + +alert( visitsCountMap.get(john) ); // 123 +``` + +Using objects as keys is one of most notable and important `Map` features. It's difficult to replace the `Map` with a regular `Object` here. + + +```smart header="How `Map` compares keys" +To test values for equivalence, `Map` uses the algorithm [SameValueZero](https://tc39.github.io/ecma262/#sec-samevaluezero). It is roughly the same as the strict equality `===`, but the difference is that `NaN` is considered equal to `NaN`. So `NaN` can be used as the key as well. + +This algorithm can't be changed to our own. +``` + +````smart header="Using an `Object` instead" +In some cases objects have a special "unique identifier" property. Or we can create it for them. That allows to use an object: + +```js run +// note the id field +let john = { name: "John", *!*id: 1*/!* }; + +let visitsCounts = {}; + +visitCounts[john.id] = 123; + +alert( visitsCounts[john.id] ); // 123 +``` + +That was the main way to go in the past when maps did not exist in the language. But now we have maps. They are more versatile. And they do not require such identifiers to exist. +```` + + +````smart header="`Map` allows *any* keys" +The important syntax diference from objects is that `Map` values are inserted/removed via methods. + +```js +// object vs map syntax +obj[key] = value; +map.set(key, value); +``` + +There's a reason for that. In objects, there is a built-in property named `__proto__`. We'll see the details about it later. Here the important thing is that it should not be overwritten. If it is set to a primitive then the write operation is ignored, so we can say that JavaScript protects it to a certain extent. + +But if key/value pairs come from the user (like a user naming himself `__proto__`), then we can meet unexpected problems with it. That's actually an endless source of bugs in many well-known JavaScript libraries. `Map`, from the other hand, is totally safe. +```` + + +### Iteration + +For looping over `map`, there are 3 methods: + +- `map.keys()` -- returns an iterable object for keys, +- `map.values()` -- returns an iterable object for values, +- `map.entries()` -- returns an iterable object for entries `[key, value]`, it's used by default in `for..of`. + +For instance: + +```js run +let recipeMap = new Map([ + ['cucumber', 500], + ['tomatoes', 350], + ['onion', 50] +]); + +// iterate over vegetables +for(let vegetable of recipeMap.keys()) { + alert(vegetable); // cucumber, tomateos, onion +} + +// iterate over amounts +for(let amount of recipeMap.values()) { + alert(amount); // 500, 350, 50 +} + +// iterate over [key, value] entries +for(let entry of recipeMap) { // the same as of recipeMap.entries() + alert(entry); // cucumber,50 (and so on) +} +``` + +```smart header="The insertion order is used" +The iteration goes in the same order as the values were inserted. `Map` guarantees that unlike a regular `Object`. +``` + +Besides that, `Map` has a built-in `forEach` method, similar to `Array`: + +```js +recipeMap.forEach( (value, key, map) => { + alert(`${key}: ${value}`); // cucumber: 50 etc +}); +``` + + +## Set + +`Set` -- is a collection of values, where each value may occur. + +The main methods are: + +- `new Set([values])` -- creates the set, optionally with an array of values (any iterable will do). +- `set.add(value)` -- adds a value, returns the set itself. +- `set.delete(value)` -- removes the value, returns `true` if `value` existed at the moment of the call, otherwise `false`. +- `set.has(value)` -- returns `true` if the value exists in the set, otherwise `false`. +- `set.clear()` -- removes everything from the set. +- `set.size` -- is the elements count. + +For example, we have visitors coming, and we'd like to remember everyone. But repeated visits should not lead to duplicates. A visitor must be "counted" only once. + +`Set` is just the right thing for that: + +```js run +let set = new Set(); + +let john = { name: "John" }; +let pete = { name: "Pete" }; +let mary = { name: "Mary" }; + +// visits, some users come multiple times +set.add(john); +set.add(pete); +set.add(mary); +set.add(john); +set.add(mary); + +// set keeps only unique values +alert( set.size ); // 3 + +for(let user of set) { + alert(user.name); // John (then Pete and Mary) +} +``` + +The alternative to `Set` could be an array of users. We can check for duplicates on every insertion using [arr.find](mdn:js/Array/find). + +But the performance would be much worse, because this method walks through the whole array checking every element. `Set` is much better optimized internally for uniqueness checks. + +### Iteration + +We can loop over a set either with `for..of` or using `forEach`: + +```js run +let set = new Set(["oranges", "apples", "bananas"]); + +for(let value of set) alert(value); + +// the same with forEach: +set.forEach((value, valueAgain, set) => { + alert(value); +}); +``` + +Note the funny thing. The `forEach` function in the `Set` has 3 arguments: a value, then *again a value*, and then the target object. Indeed, the same value appears in the arguments twice. + +That's made for compatibility with `Map` where `forEach` has three arguments. + +## WeakMap and WeakSet + +`WeakSet` -- is a special kind of `Set` that does not prevent JavaScript from memory cleaning. `WeakMap` -- is the same thing for `Map`. + +That is: usually the JavaScript engine stores something in memory while it can potentially be accessed/used. + +For instance: +```js +// created an object +let john = { name: "John" }; + +// it will be removed from memory now: +john = null; +``` + +We'll go into more details later, but the gist is somewhat obvious, right? If nothing references the object, it can be safely removed. + +**If an object only exists in `WeakMap/WeakSet`, then it is removed from the memory.** + +That's handy for situations when we have a main storage for the objects somewhere and need to keep additional data for them that only exists while the object exists. + +For instance, we have users and want to keep a visit count for them. But the visit count is only relevant while the user exists. + +So we can put it into a `WeakMap`: + +```js run +let john = { name: "John" }; + +// user => visits count +let visitsCountMap = new WeakMap(); + +// john is the key for the map +visitsCountMap.set(john, 123); + +alert( visitsCountMap.get(john) ); // 123 + +// now john leaves us, we don't need him any more +john = null; + +*!* +alert( visitsCountMap.get(john) ); // undefined +*/!* +``` + +Do you see the difference versus a regular `Map`? If `visitorCountMap` were a `new Map()`, then `john` would remain in it. If users keep coming and leaving, then there would be more and more values flooding the map. + +So, with a regular `Map`, the user deletion becomes a more tedious task: we also need to clean up the additional stores. And it can be a cumbersome task in the more complex case when users are managed in one place of the code and the additional structure is at another place and is getting no information about removals. `WeakMap` comes to the rescue. + +`WeakMap` uses only objects as keys. It has the following methods: + +- `weakMap.get(key)` +- `weakMap.set(key, value)` +- `weakMap.delete(key, value)` +- `weakMap.has(key)` + +`WeakMap` does not support methods `clear()` and has no `size` property. Also we can not iterate over it. + +That's for technical reasons. Once a key is no longer referenced from anywhere, it is removed from the `WeakMap` and from the memory. But technically it's not exactly specified *when the removal happens*. + +The JavaScript engine decides that. It may choose to perform the memory cleanup immediately or wait and do the cleaning later when more deletions happen. So, technically the current element count of the `WeakMap` is not known. The engine may have cleaned it up or not, or did it partially. For that reason, the methods that access the `WeakMap` as a whole are not supported. + +The same refers to `WeakSet`. + +- It keeps a set of objects, an object exists while it is referenced from anywhere else. +- It only supports `add`, `has` and `delete`, no support for `size` and no iterations. + +The limitations may appear inconvenient, but they actually do not prevent `WeakMap/WeakSet` from doing the main task -- be an "additional" storage of data for objects which are stored/managed at another place. + +## Summary + +- `Map` -- is a a collection of keyed values. + + The differences from a regular `Object`: + + - Any keys, objects can be keys. + - Iterates in the insertion order. + - Additional convenient methods for iterating and cleaning, the `size` property. + +- `Set` -- is a collection of unique values. + + - Unlike an array, does not allow to reorder elements. Keeps the insertion order. + +- `WeakMap` -- a variant of `Map` that allows only objects as keys and removes them once they become unaccessible by other means. + + - It does not support operations on the structure as a whole: no `size`, no `clear()`, no iterations. + +- `WeakSet` -- is a variant of `Set` that only stores objects and removes them once they become unaccessible by other means. + +`WeakMap` and `WeakSet` are used as "secondary" data structures in additional to the "main" object storage. Once the object is removed from the main storage, they clean up aumatically. + diff --git a/figures.sketch b/figures.sketch index 6c3f1d19..e5a68d60 100644 Binary files a/figures.sketch and b/figures.sketch differ