From c058fa0fb22dc40ef0225b21a97578cddd0aaffa Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:51:05 +0100 Subject: unslug ru: move --- files/ru/web/javascript/guide/about/index.html | 159 ---- .../web/javascript/guide/introduction/index.html | 159 ++++ .../guide/ispolzovanie_promisov/index.html | 321 ------- .../guide/javascript_overview/index.html | 142 ---- .../guide/loops_and_iteration/index.html | 362 ++++++++ .../guide/predefined_core_objects/index.html | 923 --------------------- .../web/javascript/guide/using_promises/index.html | 321 +++++++ .../index.html" | 159 ---- .../index.html" | 68 -- .../index.html" | 362 -------- 10 files changed, 842 insertions(+), 2134 deletions(-) delete mode 100644 files/ru/web/javascript/guide/about/index.html create mode 100644 files/ru/web/javascript/guide/introduction/index.html delete mode 100644 files/ru/web/javascript/guide/ispolzovanie_promisov/index.html delete mode 100644 files/ru/web/javascript/guide/javascript_overview/index.html create mode 100644 files/ru/web/javascript/guide/loops_and_iteration/index.html delete mode 100644 files/ru/web/javascript/guide/predefined_core_objects/index.html create mode 100644 files/ru/web/javascript/guide/using_promises/index.html delete mode 100644 "files/ru/web/javascript/guide/\320\262\320\262\320\265\320\264\320\265\320\275\320\270\320\265_\320\262_javascript/index.html" delete mode 100644 "files/ru/web/javascript/guide/\320\276\320\261_\321\215\321\202\320\276\320\274_\321\200\321\203\320\272\320\276\320\262\320\276\320\264\321\201\321\202\320\262\320\265/index.html" delete mode 100644 "files/ru/web/javascript/guide/\321\206\320\270\320\272\320\273\321\213_\320\270_\320\270\321\202\320\265\321\200\320\260\321\206\320\270\320\270/index.html" (limited to 'files/ru/web/javascript/guide') diff --git a/files/ru/web/javascript/guide/about/index.html b/files/ru/web/javascript/guide/about/index.html deleted file mode 100644 index 6d58fafb80..0000000000 --- a/files/ru/web/javascript/guide/about/index.html +++ /dev/null @@ -1,159 +0,0 @@ ---- -title: Об этом учебнике -slug: Web/JavaScript/Guide/About -translation_of: Web/JavaScript/Guide/Introduction -translation_of_original: Web/JavaScript/Guide/About ---- -

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

- -

Особенности разных версий JavaScript

- -

 

- - - -

 

- -

Что вы уже должны знать

- -

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

- -

Общее понимание, что такое Интернет и всемирная сеть WWW. Знание языка разметки гипертекста (HTML) также привествуется.

- -

Некоторый опыт программирования на C или Visual Basic будет полезен, но не является обязательным.

- -

Версии JavaScript

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Таблица 1. Версии JavaScript и Navigator
Версия JavaScriptВерсия Navigator
JavaScript 1.0Navigator 2.0
JavaScript 1.1Navigator 3.0
JavaScript 1.2Navigator 4.0-4.05
JavaScript 1.3Navigator 4.06-4.7x
JavaScript 1.4 
JavaScript 1.5Navigator 6.0
- Mozilla (браузер с открытым исходным кодом)
JavaScript 1.6Firefox 1.5, другие, основанные на Mozilla 1.8 продукты
JavaScript 1.7Firefox 2, другие, основанные на Mozilla 1.8.1 продукты
JavaScript 1.8Firefox 3, другие, основанные на Mozilla 1.9 продукты
- -

Каждая версия Netscape Enterprise Server также поддерживает разные версии JavaScript. Чтобы помочь вам писать скрипты совместимые с разными версиями Enterprise Server, это руководство пользуется аббревиатурой, которая однозначно идентифицирует версию сервера, в которой реализована каждая функциональность.

- -


-  Таблица 2. Аббревиатуры версий Netscape Enterprise Server

- - - - - - - - - - - - - - - - - - -
AbbreviationEnterprise Server version
NES 2.0Netscape Enterprise Server 2.0
NES 3.0Netscape Enterprise Server 3.0
- -

Где найти информацию по JavaScript

- -

Документация JavaScript включает в себя следующие материалы:

- - - -

Если вы новичок в JavaScript, то начните с Учебника JavaScript. Как только вы усвоили фундаментальные основы, вы можете начать пользоваться Справочником JavaScript, чтобы получить больше информации об определенных объектах, выражениях и операторах.

- -

Советы изучающим JavaScript

- -

Начать изучать JavaScript очень легко: все что вам нужно - это современный веб браузер. Этот учебник включает описание некоторых особенностей JavaScript, которые доступны только в самых последних версиях Firefox (и других браузерах основанных на движке Gecko), так что лучше всего воспользоваться самой последней версией Firefox.

- -

Интерактивный интерпретатор.

- -

Интерактивная строка ввода JavaScript окажет бесценную услугу в изучении языка, так как позволит пробовать все вещи сразу же, вам не потребуется сохранять изменения в файле и обновлять страницу каждый раз. Консоль ошибок Firefox, доступна через меню Инструменты, предлагает простой способ попробовать выполнить JavaScript выражения: просто введите строку с кодом и нажмите кнопку "Evaluate".

- -

Image:ErrorConsole.png

- -

Firebug

- -

Более продвинутое средство доступно в Firebug. Firebug это расширение Firefox. Хотя в последних версиях Firefox средства отладки становятся более совершенными и такой нужды Firebug уже нет. Выражения которые вы вводите интерпретируются как объекты и связываются c другими частями в Firebug. Например, вы можете сложить 5 плюс 5, заменить буквы в строке со строчных на прописные, получить кликабельную ссылку на документ, или получить ссылку на элемент в документе:

- -

- -

Нажав на кнопке со стрелкой в нижнем правом углу вы можете открыть многострочный редактор скриптов.

- -

Firebug также имеет в составе продвинутый инспектор DOM, дебаггер JavaScript, инструменты профилирования и многие другие полезные утилиты. JavaScript код выполняемый на веб странице может вызвать функцию console.log(), которая выведет свой аргумент на консоль Firebug.

- -

Множество примеров в этом учебнике используют функцию alert(), чтобы вывести сообщение во время выполнения скрипта.

- -

Принятые соглашения в документе

- -

JavaScript приложения выполняются на разных операционных системах; информация в этом учебнике актуальна в любом случае. Пути к директориям или файлам даны в формате Windows (обратный слеш как разделитель). Для версии Юникс, пути точно такие же, за исключением того, что используеся обычный слеш вместо обратного, а также соотвественно корневая директория начинается с '/' а не 'c:/' как это в Windows.

- -

Этот учебник использует единый локатор ресурсов (URL-ы) следующей формы:

- -

http://server.domain/path/file.html

- -

В этих URL-ах, server - это имя сервера на котором запущено ваше приложение, например research1 или www; domain - это имя Internet домена, например netscape.com или uiuc.edu; path - структура директорий на сервере; и file.html - имя файла, который расположен на вашем сервере. В общем, элементы выделенные курсивом в URL-ах это метки-заполнители, а элементы выделенные нормальным моноширинным шрифтом точные неизменные значения (например, конфиругацию сервера вы можете изменить, как и сменить доменное имя, структура каталогов может поменяться, а вот протокол всегда один, и расширение файла для  вебстраниц тоже постоянно). Если ваш вебсервер поддерживает Secure Sockets Layer (SSL), то вы можете пользоваться  https вместо http в URL.

- -

Этот учебник пользуется следующим соглашением об использовании шрифтов:

- - diff --git a/files/ru/web/javascript/guide/introduction/index.html b/files/ru/web/javascript/guide/introduction/index.html new file mode 100644 index 0000000000..1b49c45ddb --- /dev/null +++ b/files/ru/web/javascript/guide/introduction/index.html @@ -0,0 +1,159 @@ +--- +title: Введение в JavaScript +slug: Web/JavaScript/Guide/Введение_в_JavaScript +tags: + - Beginner + - Guide + - JavaScript +translation_of: Web/JavaScript/Guide/Introduction +--- +

{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Values,_variables,_and_literals")}}

+ +
+

Данная глава является введением в JavaScript и рассматривает некоторые его фундаментальные концепции.

+
+ +

Что вам уже следует знать?

+ +

В данном руководстве предполагается, что вы имеете:

+ + + +

Где можно найти информацию о JavaScript?

+ +

Документация по JavaScript на MDN включает:

+ + + +

Если вы являетесь новичком в JavaScript, то начните с Изучение Web и Руководство по JavaScript. Как только вы освоите фундаментальные концепции, используйте Справочник по JavaScript для того, чтобы получить более подробную информацию о конкретных объектах или операторах.

+ +

Что такое JavaScript?

+ +

JavaScript — это кросс-платформенный, объектно-ориентированный скриптовый язык, являющийся небольшим и легковесным. Внутри среды исполнения JavaScript может быть связан с объектами данной среды и предоставлять программный контроль над ними.

+ +

JavaScript включает стандартную библиотеку объектов, например, Array, Date и Math, а также базовый набор языковых элементов, например, операторы и управляющие конструкции. Ядро JavaScript может быть расширено для различных целей путем добавления в него новых объектов, например:

+ + + +

JavaScript и Java

+ +

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

+ +

В отличие от системы скомпилированных классов Java, построенной на объявлениях, JavaScript поддерживает систему исполнения, основанную на небольшом числе типов данных, представляющих числовые, логические и строковые значения. JavaScript имеет объектную модель на базе прототипов вместо более общей модели на базе классов. Модель объектов на базе прототипов предоставляет динамическое наследование, т.е. то, что наследуется, может отличаться для отдельных объектов. JavaScript также поддерживает функции без каких-либо специальных декларативных требований. Функции могут быть свойствами объектов, выполняться как свободно-типизированные методы.

+ +

По сравнению с Java, JavaScript является языком с очень свободной формой. Вам не надо объявлять переменные, классы и методы. Вам не надо беспокоиться о том, являются ли методы публичными (public), приватными (private) или защищенными (protected), а также вам не надо реализовывать интерфейсы. Переменные, параметры и возвращаемые функциями типы не являются явно типизированными.

+ +

Java — это язык программирования, основанный на классах и предназначенный для быстрого выполнения и безопасности типов. Безопасность типов означает, например, что вы не можете привести тип integer к типу object reference или получить доступ к приватной памяти, изменяя байт-код Java. Ориентированная на классы модель Java означает, что программы состоят исключительно из классов и их методов. Наследование классов и строгая типизация в Java обычно требуют тесно связанные иерархии объектов. Эти требования делают программирование на Java более комплексным, чем программирование на JavaScript.

+ +

По духу JavaScript происходит от небольших, динамически типизированных языков, таких как HyperTalk и dBASE. Эти скриптовые языки предлагают инструменты программирования для гораздо более широкой аудитории благодаря более простому синтаксису, специализированной встроенной функциональности и минимальным требованиям для создания объектов.

+ + + + + + + + + + + + + + + + + + + + + + + +
Сравнение JavaScript и Java
JavaScriptJava
Объектно-ориентированный. Нет различий между типами объектов. Наследование реализовано через механизм прототипов, свойства и методы могут быть добавлены в любой объект динамически.На базе классов. Объекты делятся на классы и экземпляры с наследованием через классовую иерархию. Классы и экземпляры не могут иметь динамически добавленные свойства или методы.
Типы данных переменных не объявляются (динамическая типизация).Типы данных переменных должны быть объявлены (статическая типизация).
Не может автоматически записывать на жесткий диск.Может автоматически записывать на жесткий диск.
+ +

Для получения дополнительной информации о различиях между JavaScript и Java, прочитайте Details of the object model.

+ +

JavaScript и спецификация ECMAScript

+ +

JavaScript стандартизирован европейской ассоциацией Ecma International, деятельность которой посвящена стандартизации информационных и коммуникационных систем (изначально ECMA являлся акронимом European Computer Manufacturers Association). Эта стандартизированная версия JavaScript, называемая ECMAScript, работает одинаково во всех приложениях, поддерживающих стандарт. Компании могут использовать открытый стандарт языка, чтобы разработать собственную реализацию JavaScript. Стандарт ECMAScript задокументирован в спецификации ECMA-262. Чтобы узнать больше информации о разных версиях JavaScript и ECMAScript, прочитайте Что нового в JavaScript.

+ +

Стандарт ECMA-262 также утвержден ISO (International Organization for Standardization) как ISO-16262. Вы можете найти спецификацию на сайте Ecma International. Спецификация ECMAScript не описывает Document Object Model (DOM), которая стандартизирована World Wide Web Consortium (W3C). DOM определяет способ для доступа к объектам HTML документа из вашего скрипта. Чтобы получить более точное представление о различных технологиях, используемых при программировании на JavaScript, прочитайте Обзор JavaScript.

+ +

Документация JavaScript против спецификации ECMAScript

+ +

Спецификация ECMAScript — это набор требований, касающихся реализации ECMAScript. Она предназначена для реализации языковых возможностей, соответствующих стандарту, в вашей реализации ECMAScript или движке (например, SpiderMonkey в Firefox или V8 в Google Chrome).

+ +

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

+ +

Спецификация ECMAScript использует терминологию и синтаксис, которые могут быть незнакомы JavaScript-программистам. Хотя описание языка может отличаться в ECMAScript, но сам язык остается таким же. JavaScript поддерживает всю функциональность, описанную в спецификации ECMAScript.

+ +

Документация JavaScript описывает аспекты языка, являющиеся подходящими для JavaScript-программиста.

+ +

Начинаем знакомство с JavaScript

+ +

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

+ +

В Firefox встроены два инструмента, полезных для экспериментирования с JavaScript: Web Console и Scratchpad.

+ +

Web Console

+ +

Web Console отображает информацию о текущей загруженной веб-странице, а также включает командную строку, которую вы можете использовать, чтобы выполнить выражения JavaScript на текущей странице.

+ +

Чтобы открыть Web Console, выберите "Web Console" из меню "Web Developer", которое находится под меню "Tools" в Firefox. Консоль появится в нижней части окна браузера. Вдоль нижней части консоли размещается командная строка, которую вы можете использовать для ввода JavaScript, результат выполнения появится на панели выше:

+ +

+ + + +
function greetMe(yourName) {
+  alert('Hello ' + yourName);
+}
+console.log(eval('3 + 5'));
+ + + +

Scratchpad

+ +

Web Console отлично подходит для выполнения одиночных строк JavaScript, но хотя вы можете выполнить и несколько строк, это не очень удобно, к тому же вы не можете сохранить ваш код, используя Web Console. Поэтому для более комплексных примеров Scratchpad является более подходящим инструментом.

+ +

Чтобы открыть Scratchpad(Shift+F4), выберите "Scratchpad" из меню "Web Developer", которое находится под меню "Tools" в Firefox. Блокнот будет открыт в отдельном окне, вы можете использовать его для создания и выполнения JavaScript в браузере. Вы также можете сохранять ваши скрипты на жесткий диск, а потом загружать их.

+ +

Если вы выберете "Display", то код в вашем блокноте будет выполнен в браузере, а результат вставлен обратно в блокнот как комментарий:

+ +

+ +

Hello world

+ +

Чтобы начать писать JavaScript код откройте Scratchpad и напишите свой первый "Hello World!" код:

+ +
(function(){
+  "use strict";
+  /* Start of your code */
+  function greetMe(yourName) {
+    alert('Hello ' + yourName);
+  }
+
+  greetMe('World');
+  /* End of your code */
+})();
+ +

Выберите код на панели и зажмите Ctrl + R, чтобы открыть код в браузере! На следующих страницах мы изучим синтаксис  и возможности JS, чтобы вы могли написать сложное более сложное приложение. Не забывайте добавлять перед кодом (function(){"use strict"; и })();  после. вы узнаете, что это означает, а пока считайте, что это —

+ +

1.  Значительно улучшает производительность

+ +

2.  Предотвращает структуры, которые могут запутать вас на начальном этапе.

+ +

3.  Предотвращает взаимодействие фрагментов кода, выполняемых в консоли.

+ +

{{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammar_and_types")}}

diff --git a/files/ru/web/javascript/guide/ispolzovanie_promisov/index.html b/files/ru/web/javascript/guide/ispolzovanie_promisov/index.html deleted file mode 100644 index a910dfca09..0000000000 --- a/files/ru/web/javascript/guide/ispolzovanie_promisov/index.html +++ /dev/null @@ -1,321 +0,0 @@ ---- -title: Использование промисов -slug: Web/JavaScript/Guide/Ispolzovanie_promisov -tags: - - JavaScript - - Асинхронность - - Гайд - - промис -translation_of: Web/JavaScript/Guide/Using_promises ---- -
-

{{jsSidebar("Руководство по JavaScript")}}{{PreviousNext("Web/JavaScript/Guide/Details_of_the_Object_Model", "Web/JavaScript/Guide/Iterators_and_Generators")}}

-
- -

{{jsxref("Promise")}} (промис, англ. "обещание") - это объект, представляющий результат успешного или неудачного завершения асинхронной операции. Так как большинство людей пользуются уже созданными промисами, это руководство начнем с объяснения использования вернувшихся промисов до объяснения принципов создания. 

- -

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

- -

Например, вместо старомодной функции, которая принимает два коллбэка и вызывает один из них в зависимости от успешного или неудачного завершения операции:

- -
function doSomethingOldStyle(successCallback, failureCallback) {
-  console.log("Готово.");
-  // Успех в половине случаев.
-  if (Math.random() > .5) {
-    successCallback("Успех")
-  } else {
-    failureCallback("Ошибка")
-  }
-}
-
-function successCallback(result) {
-  console.log("Успешно завершено с результатом " + result);
-}
-
-function failureCallback(error) {
-  console.log("Завершено с ошибкой " + error);
-}
-
-doSomethingOldStyle(successCallback, failureCallback);
-
- -

…современные функции возвращают промис, в который вы записываете ваши коллбэки:

- -
function doSomething() {
-  return new Promise((resolve, reject) => {
-    console.log("Готово.");
-    // Успех в половине случаев.
-    if (Math.random() > .5) {
-      resolve("Успех")
-    } else {
-      reject("Ошибка")
-    }
-  })
-}
-
-const promise = doSomething();
-promise.then(successCallback, failureCallback);
- -

…или просто:

- -
doSomething().then(successCallback, failureCallback);
- -

Мы называем это асинхронным вызовом функции. У этого соглашения есть несколько преимуществ. Давайте рассмотрим их.

- -

Гарантии

- -

В отличие от старомодных переданных коллбэков промис дает некоторые гарантии:

- - - -

Но наиболее непосредственная польза от промисов - цепочка вызовов (chaining).

- -

Цепочка вызовов

- -

Общая нужда - выполнять две или более асинхронных операции одна за другой, причём каждая следующая начинается при успешном завершении предыдущей и использует результат её выполнения. Мы реализуем это, создавая цепочку вызовов промисов (promise chain).

- -

Вот в чём магия: функция then возвращает новый промис, отличающийся от первоначального:

- -
let promise = doSomething();
-let promise2 = promise.then(successCallback, failureCallback);
-
- -

или

- -
let promise2 = doSomething().then(successCallback, failureCallback);
-
- -

Второй промис представляет завершение не только doSomething(), но и функций successCallback или failureCallback, переданных Вами, а они тоже могут быть асинхронными функциями, возвращающими промис. В этом случае все коллбэки, добавленные к promise2 будут поставлены в очередь за промисом, возвращаемым successCallback или failureCallback.

- -

По сути, каждый вызванный промис означает успешное завершение предыдущих шагов в цепочке.

- -

Раньше выполнение нескольких асинхронных операций друг за другом приводило к классической "Вавилонской башне" коллбэков:

- -
doSomething(function(result) {
-  doSomethingElse(result, function(newResult) {
-    doThirdThing(newResult, function(finalResult) {
-      console.log('Итоговый результат: ' + finalResult);
-    }, failureCallback);
-  }, failureCallback);
-}, failureCallback);
-
- -

В современных функциях мы записываем коллбэки в возвращаемые промисы - формируем цепочку промисов:

- -
doSomething().then(function(result) {
-  return doSomethingElse(result);
-})
-.then(function(newResult) {
-  return doThirdThing(newResult);
-})
-.then(function(finalResult) {
-  console.log('Итоговый результат: ' + finalResult);
-})
-.catch(failureCallback);
-
- -

Аргументы then необязательны, а catch(failureCallback) - это сокращение для then(null, failureCallback). Вот как это выражено с помощью стрелочных функций:

- -
doSomething()
-.then(result => doSomethingElse(result))
-.then(newResult => doThirdThing(newResult))
-.then(finalResult => {
-  console.log(`Итоговый результат: ${finalResult}`);
-})
-.catch(failureCallback);
-
- -

Важно: Всегда возвращайте промисы в return, иначе коллбэки не будут сцеплены и ошибки могут быть не пойманы (стрелочные функции неявно возвращают результат, если скобки {} вокруг тела функции опущены).

- -

Цепочка вызовов после catch

- -

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

- -
new Promise((resolve, reject) => {
-    console.log('Начало');
-
-    resolve();
-})
-.then(() => {
-    throw new Error('Где-то произошла ошибка');
-
-    console.log('Выведи это');
-})
-.catch(() => {
-    console.log('Выведи то');
-})
-.then(() => {
-    console.log('Выведи это, несмотря ни на что');
-});
- -

В результате выведется данный текст:

- -
Начало
-Выведи то
-Выведи это, несмотря ни на что
- -

Заметьте, что текст "Выведи это" не вывелся, потому что "Где то произошла ошибка" привела к отказу

- -

Распространение ошибки

- -

Вы могли ранее заметить, что failureCallback  повторяется три раза  в "pyramid of doom", а в цепочке промисов всего лишь один раз:

- -
doSomething()
-.then(result => doSomethingElse(result))
-.then(newResult => doThirdThing(newResult))
-.then(finalResult => console.log(`Итоговый результат: ${finalResult}`))
-.catch(failureCallback);
- -

В основном, цепочка промисов останавливает выполнение кода, если где-либо произошла ошибка, и вместо этого ищет далее по цепочке обработчики ошибок. Это очень похоже на то, как работает синхронный код:

- -
try {
-  let result = syncDoSomething();
-  let newResult = syncDoSomethingElse(result);
-  let finalResult = syncDoThirdThing(newResult);
-  console.log(`Итоговый результат: ${finalResult}`);
-} catch(error) {
-  failureCallback(error);
-}
-
- -

Эта симметрия с синхронным кодом лучше всего показывает себя в синтаксическом сахаре async/await в ECMAScript 2017:

- -
async function foo() {
-  try {
-    let result = await doSomething();
-    let newResult = await doSomethingElse(result);
-    let finalResult = await doThirdThing(newResult);
-    console.log(`Итоговый результат: ${finalResult}`);
-  } catch(error) {
-    failureCallback(error);
-  }
-}
-
- -

Работа данного кода основана на промисах. Для примера здесь используется функция doSomething(), которая встречалась ранее. Вы можете прочитать больше о синтаксисе здесь

- -

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

- -

Создание промиса вокруг старого коллбэка

- -

{{jsxref("Promise")}} может быть создан с помощью конструктора. Это может понадобится только для старых API.

- -

В идеале, все асинхронные функции уже должны возвращать промис. Но увы, некоторые APIs до сих пор ожидают успешного или неудачного  коллбека переданных по старинке. Типичный пример: {{domxref("WindowTimers.setTimeout", "setTimeout()")}} функция:

- -
setTimeout(() => saySomething("10 seconds passed"), 10000);
- -

Смешивание старого коллбэк-стиля и промисов проблематично. В случае неудачного завершения saySomething или программной ошибки, нельзя обработать ошибку.

- -

К с частью мы можем обернуть функцию в промис. Хороший тон оборачивать проблематичные функции на самом низком возможном уровне, и больше никогда их не вызывать на прямую:

- -
const wait = ms => new Promise(resolve => setTimeout(resolve, ms));
-
-wait(10000).then(() => saySomething("10 seconds")).catch(failureCallback);
- -

В сущности, конструктор промиса становится исполнителем функции, который позволяет нам резолвить или режектить промис вручную. Так как setTimeout всегда успешен, мы опустили reject в этом случае.

- -

Композиция

- -

{{jsxref("Promise.resolve()")}} и {{jsxref("Promise.reject()")}} короткий способ создать уже успешные или отклоненные промисы соответственно. Это иногда бывает полезно.

- -

{{jsxref("Promise.all()")}} и {{jsxref("Promise.race()")}} - два метода запустить асинхронные операции параллельно.

- -

Последовательное выполнение композиции возможно при помощи хитрости JavaScript:

- -
[func1, func2].reduce((p, f) => p.then(f), Promise.resolve());
- -

Фактически, мы превращаем массив асинхронных функций в цепочку промисов равносильно: Promise.resolve().then(func1).then(func2);

- -

Это также можно сделать, объеденив композицию в функцию, в функциональном стиле программирования:

- -
const applyAsync = (acc,val) => acc.then(val);
-const composeAsync = (...funcs) => x => funcs.reduce(applyAsync, Promise.resolve(x));
- -

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

- -
const transformData = composeAsync(func1, asyncFunc1, asyncFunc2, func2);
-transformData(data);
- -

В ECMAScript 2017, последовательные композиции могут быть выполненны более простым способом с помощью async/await:

- -
for (const f of [func1, func2]) {
-  await f();
-}
- -

Порядок выполнения

- -

Чтобы избежать сюрпризов, функции, переданные в then никогда не будут вызванны синхронно, даже с уже разрешенным промисом:

- -
Promise.resolve().then(() => console.log(2));
-console.log(1); // 1, 2
- -

Вместо немедленного выполнения, переданная функция встанет в очередь микрозадач, а значит выполнится, когда очередь будет пустой  в конце текущего вызова JavaScript цикла событий (event loop), т.е. очень скоро:

- -
const wait = ms => new Promise(resolve => setTimeout(resolve, ms));
-
-wait().then(() => console.log(4));
-Promise.resolve().then(() => console.log(2)).then(() => console.log(3));
-console.log(1); // 1, 2, 3, 4
- -

Вложенность

- -

Простые цепочки promise лучше оставлять без вложений, так как вложеность может быть результатом небрежной структуры. Смотрите распространенные ошибки.

- -

Вложенность - это управляющая структура, ограничивающая область действия операторов catch. В частности, вложенный catch только перехватывает сбои в своей области и ниже, а не ошибки выше в цепочке за пределами вложенной области. При правильном использовании это дает большую точность в извлечение ошибок:

- -
doSomethingCritical()
-.then(result => doSomethingOptional()
-  .then(optionalResult => doSomethingExtraNice(optionalResult))
-  .catch(e => {})) // Игнорируется если необязательные параметр не выкинул исключение
-.then(() => moreCriticalStuff())
-.catch(e => console.log("Критическая ошибка: " + e.message));
- -

Обратите внимание, что необязательный шаги здесь выделены отступом.

- -

Внутренний оператор catch нейтрализует и перехватывает ошибки только от doSomethingOptional() и doSomethingExtraNice(), после чего код возобновляется с помощью moreCriticalStuff(). Важно, что в случае сбоя doSomethingCritical() его ошибка перехватывается только последним (внешним) catch.

- -

Частые ошибки

- -

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

- -
// Плохой пример! Три ошибки!
-
-doSomething().then(function(result) {
-  doSomethingElse(result) // Забыл вернуть обещание из внутренней цепочки + неуместное влаживание
-  .then(newResult => doThirdThing(newResult));
-}).then(() => doFourthThing());
-// Забыл закончить цепочку методом catch
- -

Первая ошибка это неправильно сцепить вещи между собой. Такое происходит когда мы создаем промис но забываем вернуть его. Как следствие, цепочка сломана, но правильнее было бы сказать что теперь у нас есть две независимые цепочки, соревнующиеся за право разрешится первой. Это означает doFourthThing() не будет ждать doSomethingElse() или doThirdThing() пока тот закончится, и будет исполнятся параллельно с ними, это ,вероятно, не то что хотел разработчик. Отдельные цепочки также имеют отдельную обработку ошибок, что приводит к необработанным ошибкам.

- -

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

- -

Третяя ошибка это забыть закончить цепочку ключевым словом catch. Незаконченные цепочки приводят к необработанным отторжениям обещаний в большинстве браузеров.

- -

Хорошим примером является всегда либо возвращать либо заканчивать цепочки обещаний, и как только вы получаете новое обещание, возвращайте его сразу же, чтобы не усложнять код излишней вложенностью:

- -
doSomething()
-.then(function(result) {
-  return doSomethingElse(result);
-})
-.then(newResult => doThirdThing(newResult))
-.then(() => doFourthThing())
-.catch(error => console.log(error));
- -

Обратите внимание что () => x  это сокращенная форма () => { return x; }.

- -

Теперь у нас имеется единственная определенная цепочка с правильной обработкой ошибок.

- -

Использование async/await предотвращает большинство, если не все вышеуказанные ошибки—но взамен появляется другая частая ошибка—забыть ключевое слово await.

- -

Смотрите также

- - diff --git a/files/ru/web/javascript/guide/javascript_overview/index.html b/files/ru/web/javascript/guide/javascript_overview/index.html deleted file mode 100644 index 5db1f95ca4..0000000000 --- a/files/ru/web/javascript/guide/javascript_overview/index.html +++ /dev/null @@ -1,142 +0,0 @@ ---- -title: Обзор JavaScript -slug: Web/JavaScript/Guide/JavaScript_Overview -translation_of: Web/JavaScript/Guide/Introduction -translation_of_original: Web/JavaScript/Guide/JavaScript_Overview ---- -

Эта глава является введением в JavaScript и описывает некоторые из базовых понятий.

- -

Что такое JavaScript?

- -

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

- -

Ядро JavaScript содержит набор базовых объектов, например Array, Date и Math, и набор элементов языка: операторов, управляющих структур, и выражений. Ядро JavaScript может быть расширено для различных целей с помощью дополнений, например:

- - - -

Используя функции JavaScript LiveConnect, Вы можете позволить коду на Java и JavaScript общаться между собой. Вы можете создать экземпляр объекта Java из JavaScript и получить доступ к его публичным методам и свойствам. Из Java, Вы можете получить доступ к объектам, свойствам и методам JavaScript.

- -

Впервые JavaScript был использован в браузерах Netscape.

- -

JavaScript и Java

- -

JavaScript и Java схожи в некоторых отношениях, но принципиально отличаются в других. Язык JavaScript напоминает Java, но не имеет статической типизации и строгой проверки типов. В основном, JavaScript следует большей части синтакса Java в выражениях, именованиях и основного потока управления конструкциями, что стало причиной, почему он был переименован из LiveScript в JavaScript.

- -

В отличии от системы компилированных классов в Java, построенной на объявлениях, JavaScript поддерживает систему исполнения, основанную на небольшом количестве типов данных, представляющих числовые, логические и строковые значения. JavaScript обладает моделью объектов на базе прототипов вместо более общей модели объектов на базе классов. Модель объектов на базе прототипов делает возможным динамическое наследование; то есть, то, что унаследовано, может различаться для отдельных объектов. JavaScript также поддерживает функции без каких-либо специальных декларативных требований. Функции могут быть свойствами объектов, выполняться как слабо типизированные методы.

- -

По сравнению с Java, JavaScript - это язык с очень свободной формой языка. Вам не надо объявлять переменные, классы или методы. Вы не должны беспокоиться, является ли метод public, private или protected, Вам не надо реализовывать интерфейсы. Переменные, параметры и возвращаемые функциями типы не являются явно типизированными.

- -

Java - язык программирования на основе классов, предназначенный для быстрого выполнения и безопасности типов. Безопасность типов означает, например, что Вы не можете взять тип Java integer и привести его к типу object reference или получить доступ к закрытой памяти изменяя байт-код Java. Ориентированная на классы модель Java означает, что программы состоят исключительно из классов и их методов. Наследование классов и строгая типизация в Java обычно тербуют тесно связанную иерархию объектов. Эти требования делают программирование на Java более сложным чем на JavaScript.

- -

По духу JavaScript происходит от нескольких небольших, динамически типизированных языков программирования, таких как HyperTalk и dBASE. Эти скриптовые языки предлагают инструменты программирования для гораздо более широкой аудитории благодаря более простому синтаксису, специальной встроенной функциональности и минимальным требованиям для создания объектов.

- - - - - - - - - - - - - - - - - - - - - - - -
Таблица 1.1 Сравнение JavaScript и Java
JavaScriptJava
Объектно-ориентированный. Нет различий между типами объектов. Наследование реализовано через механизм прототипов, свойства и методы могут быть динамически добавлены к любому объекту.На базе классов. Объекты делятся на классы и экземпляры с наследованием через иерархию классов. Классы и экземпляры не могут иметь динамически добавленные свойства и методы.
Типы данных переменных не объявлены (динамическая типизация).Типы данных переменных должны быть объявлены (статическая типизация).
Не может автоматически записывать на жесткий диск.Может автоматически записывать на жесткий диск.
- -

Для получения дополнительной информации о различиях между JavaScript и Java, см. раздел Details of the Object Model.

- -

JavaScript and the ECMAScript Specification

- -

Netscape invented JavaScript, and JavaScript was first used in Netscape browsers. However, Netscape is working with Ecma International — the European association for standardizing information and communication systems (ECMA was formerly an acronym for the European Computer Manufacturers Association) to deliver a standardized, international programming language based on core JavaScript. This standardized version of JavaScript, called ECMAScript, behaves the same way in all applications that support the standard. Companies can use the open standard language to develop their implementation of JavaScript. The ECMAScript standard is documented in the ECMA-262 specification.

- -

The ECMA-262 standard is also approved by the ISO (International Organization for Standardization) as ISO-16262. You can find a PDF version of ECMA-262 (outdated version) at the Mozilla website. You can also find the specification on the Ecma International website. The ECMAScript specification does not describe the Document Object Model (DOM), which is standardized by the World Wide Web Consortium (W3C). The DOM defines the way in which HTML document objects are exposed to your script.

- -

Relationship between JavaScript Versions and ECMAScript Editions

- -

Netscape worked closely with Ecma International to produce the ECMAScript Specification (ECMA-262). The following table describes the relationship between JavaScript versions and ECMAScript editions.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Table 1.2 JavaScript versions and ECMAScript editions
JavaScript versionRelationship to ECMAScript edition
JavaScript 1.1ECMA-262, Edition 1 is based on JavaScript 1.1.
JavaScript 1.2ECMA-262 was not complete when JavaScript 1.2 was released. JavaScript 1.2 is not fully compatible with ECMA-262, Edition 1, for the following reasons: -
    -
  • Netscape developed additional features in JavaScript 1.2 that were not considered for ECMA-262.
    • -
  • ECMA-262 adds two new features: internationalization using Unicode, and uniform behavior across all platforms. Several features of JavaScript 1.2, such as the Date object, were platform-dependent and used platform-specific behavior.
    • -
-
-

JavaScript 1.3

- 		-

JavaScript 1.3 is fully compatible with ECMA-262, Edition 1.

- -

JavaScript 1.3 resolved the inconsistencies that JavaScript 1.2 had with ECMA-262, while keeping all the additional features of JavaScript 1.2 except == and !=, which were changed to conform with ECMA-262.

-
-

JavaScript 1.4

- 		-

JavaScript 1.4 is fully compatible with ECMA-262, Edition 1.

- -

The third version of the ECMAScript specification was not finalized when JavaScript 1.4 was released.

-
JavaScript 1.5JavaScript 1.5 is fully compatible with ECMA-262, Edition 3.
- -
Note: ECMA-262, Edition 2 consisted of minor editorial changes and bug fixes to the Edition 1 specification. The  current release by the TC39 working group of Ecma International is ECMAScript Edition 5.1
- -

The JavaScript Reference indicates which features of the language are ECMAScript-compliant.

- -

JavaScript will always include features that are not part of the ECMAScript Specification; JavaScript is compatible with ECMAScript, while providing additional features.

- -

JavaScript Documentation versus the ECMAScript Specification

- -

The ECMAScript specification is a set of requirements for implementing ECMAScript; it is useful if you want to determine whether a JavaScript feature is supported in other ECMAScript implementations. If you plan to write JavaScript code that uses only features supported by ECMAScript, then you may need to review the ECMAScript specification.

- -

The ECMAScript document is not intended to help script programmers; use the JavaScript documentation for information on writing scripts.

- -

JavaScript and ECMAScript Terminology

- -

The ECMAScript specification uses terminology and syntax that may be unfamiliar to a JavaScript programmer. Although the description of the language may differ in ECMAScript, the language itself remains the same. JavaScript supports all functionality outlined in the ECMAScript specification.

- -

The JavaScript documentation describes aspects of the language that are appropriate for a JavaScript programmer. For example:

- - diff --git a/files/ru/web/javascript/guide/loops_and_iteration/index.html b/files/ru/web/javascript/guide/loops_and_iteration/index.html new file mode 100644 index 0000000000..231bc70804 --- /dev/null +++ b/files/ru/web/javascript/guide/loops_and_iteration/index.html @@ -0,0 +1,362 @@ +--- +title: Циклы и итерации +slug: Web/JavaScript/Guide/Циклы_и_итерации +tags: + - for + - операторы цикла + - циклы +translation_of: Web/JavaScript/Guide/Loops_and_iteration +--- +
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Control_flow_and_error_handling", "Web/JavaScript/Guide/Functions")}}
+ +

Циклы - простой способ сделать какое-то действие несколько раз. Эта глава руководства JavaScript Guide познакомит вас с различными операторами доступными в JavaScript.

+ +

Вы можете представить цикл в виде компьютеризированной версии игры, где вы говорите кому-то сделать X шагов в одном направлении, затем Y шагов в другом; для примера, идея игры "Иди 5 шагов на восток" может быть выражена в виде цикла:

+ +
var step;
+for (step = 0; step < 5; step++) {
+  // Запускается 5 раз, с шагом от 0 до 4.
+  console.log('Идём 1 шаг на восток');
+}
+
+ +

Существует множество различных видов циклов, но все они по сути делают тоже самое: повторяют какое-либо действие несколько раз (не забывайте про нулевой раз повторения, отсчёт в массиве начинается с 0). Различные по строению циклы предлагают разные способы для определения начала и окончания цикла. Для различных задач программирования существуют свои операторы цикла, с помощью которых они решаются намного проще.

+ +

Операторы предназначеные для организации циклов в  JavaScript:

+ + + +

Цикл for 

+ +

Цикл for  повторяет действия, пока не произойдёт какое-либо специальное событие завершения цикла. Оператор for в JavaScript аналогичен оператору for в Java и C. Объявление оператора for выглядит следующим образом:

+ +
for ([начало]; [условие]; [шаг]) выражения
+
+ +

При его выполнении происходит следущее:

+ +
    +
  1. Выполняется выражение начало, если оно указано. Это выражение обычно инициализирует один или несколько счётчиков, но синтаксис позволяет выражению быть любой сложности. Также используется для объявления переменных.
    2. +
  2. Выполняется условие. Если условие истинно, то выполняются выражения. Если оно ложно, цикл for прерывается. Если же условие полностью пропущено, то оно считается истинным.
    3. +
  3. Выполняются выражения. Чтобы выполнить несколько выражений, используются блок-выражение  { ... }  для группировки выражений.
    4. +
  4. Обновляется шаг, если он есть, а затем управление возвращается к шагу 2.
    5. +
+ +

Пример

+ +

В следующей функции есть цикл for, который считает количество выбранных жанров в списке прокрутки (элемент {{HTMLElement("select")}}, который позволяет выбрать несколько элементов). Цикл for объявляет переменную i и задаёт ей значение 0. Также он проверяет, что i меньше количества элементов в элементе <select>, выполняет оператор if и увеличивает i на один после каждого прохода цикла.

+ +
<form name="selectForm">
+  <p>
+    <label for="musicTypes">Выберите некоторые жанры музыки, а затем нажмите на кнопку ниже:</label>
+    <select id="musicTypes" name="musicTypes" multiple="multiple">
+      <option selected="selected">R&B</option>
+      <option>Jazz</option>
+      <option>Blues</option>
+      <option>New Age</option>
+      <option>Classical</option>
+      <option>Opera</option>
+    </select>
+  </p>
+  <p><input id="btn" type="button" value="Как много выбрано?" /></p>
+</form>
+
+<script>
+function howMany(selectObject) {
+  var numberSelected = 0;
+  for (var i = 0; i < selectObject.options.length; i++) {
+    if (selectObject.options[i].selected) {
+      numberSelected++;
+    }
+  }
+  return numberSelected;
+}
+
+var btn = document.getElementById("btn");
+btn.addEventListener("click", function(){
+  alert('Выбрано элементов: ' + howMany(document.selectForm.musicTypes))
+});
+</script>
+
+
+ +

Цикл do...while 

+ +

Цикл do...while повторяется пока заданное условие истинно. Оператор do...while имеет вид:

+ +
do
+  выражения
+while (условие);
+
+ +

выражения выполняются пока условие истинно. Чтобы использовать несколько выражений, используйте блок-выражение  { ... }, чтобы сгруппировать их. Если условие истинно, выражения выполнятся снова. В конце каждого прохода условие проверяется. Если условие ложно, выполнение приостанавливается и управление передаётся выражению после do...while.

+ +

Пример

+ +

В следующем примере, цикл do выполнится минимум 1 раз и запускается снова, пока i меньше 5.

+ +
do {
+  i += 1;
+  console.log(i);
+} while (i < 5);
+ +

Цикл while

+ +

Цикл while выполняет выражения пока условие истинно. Выглядит он так:

+ +
while (условие)
+  выражения
+
+ +

Если условие становится ложным, выражения в цикле перестают выполняться и управление переходит к выражению после цикла.

+ +

Условие проверяется на истинность до того, как выполняются выражения в цикле. Если условие истинно, выполняются выражения, а затем условие проверяется снова. Если условие ложно, выполнение приостанавливается и управление переходит к выражению после while.

+ +

Чтобы использовать несколько выражений, используйте блок выражение { ... }, чтобы сгруппировать их.

+ +

Пример 1

+ +

Следующий цикл while работает, пока n меньше трёх:

+ +
var n = 0;
+var x = 0;
+while (n < 3) {
+  n++;
+  x += n;
+}
+
+ +

С каждой итерацией, цикл увеличивает n и добавляет это значение к x. Поэтому, x и n получают следующие значения:

+ + + +

После третьего прохода, условие n < 3 становится ложным, поэтому цикл прерывается.

+ +

Пример 2

+ +

Избегайте бесконечных циклов. Убедитесь, что условие цикла в итоге станет ложным; иначе, цикл никогда не прервётся. Выражения в следующем цикле while будут выполняться вечно, т.к. условие никогда не станет ложным:

+ +
while (true) {
+  console.log("Hello, world");
+}
+ +

Метка (label)

+ +

Метка представляет собой оператор с индентификатором, который позволяет вам ссылаться на какое-то место в вашей программе. Например, вы можете использовать метку, чтобы обозначить цикл, а затем использовать операторы break или continue, чтобы указать, должна ли программа прерывать цикл или продолжать его выполнение.

+ +

Синтаксис метки следующий:

+ +
метка :
+   оператор
+
+ +

Значение метки может быть любым корректным JavaScript индентификатором, не являющимся зарезервированным словом. Оператор, указанный вами после метки может быть любым выражением.

+ +

Пример

+ +

В этом примере, метка markLoop обозначает цикл while.

+ +
markLoop:
+while (theMark == true) {
+   doSomething();
+}
+ +

break

+ +

Используйте оператор break, чтобы прерывать цикл, переключать управление или в сочетании с оператором метка.

+ + + +

Синтаксис оператора может быть таким:

+ +
    +
  1. break;
    2. +
  2. break Метка;
    3. +
+ +

Первая форма синтаксиса прерывает цикл совсем или переключает управление; вторая прерывает специально обозначенное выражение.

+ +

Пример 1

+ +

Следующий пример проходит по элементам в массиве, пока не найдёт элемент, чьё значение - theValue:

+ +
for (i = 0; i < a.length; i++) {
+  if (a[i] == theValue) {
+    break;
+  }
+}
+ +

Пример 2: Прерывание метки

+ +
var x = 0;
+var z = 0
+labelCancelLoops: while (true) {
+  console.log("Внешний цикл: " + x);
+  x += 1;
+  z = 1;
+  while (true) {
+    console.log("Внутренний цикл: " + z);
+    z += 1;
+    if (z === 10 && x === 10) {
+      break labelCancelLoops;
+    } else if (z === 10) {
+      break;
+    }
+  }
+}
+
+ +

continue

+ +

Оператор continue используется, чтобы шагнуть на шаг вперёд в циклах while, do-while, for или перейти к метке.

+ + + +

Синтаксис continue может выглядеть так:

+ +
    +
  1. continue;
    2. +
  2. continue Метка;
    3. +
+ +

Пример 1

+ +

Следующий пример показывает цикл while с оператором continue, который срабатывает, когда значение i равно 3. Таким образом, n получает значения 1, 3, 7 и 12.

+ +
var i = 0;
+var n = 0;
+while (i < 5) {
+  i++;
+  if (i == 3) {
+    continue;
+  }
+  n += i;
+}
+
+ +

Пример 2

+ +

Выражение, отмеченное checkiandj содержит выражение отмеченное checkj. При встрече с continue, программа прерывает текущую итерацию checkj и начинает следующую итерацию. Каждый раз при встрече с continue, checkj переходит на следующую итерацию, пока условие возвращает false. Когда возвращается false, после вычисления остатка от деления checkiandj, checkiandj переходит на следующую итерацию, пока его условие возвращает false. Когда возвращается false, программа продолжает выполнение с выражения после checkiandj.

+ +

Если у continue проставлена метка checkiandj, программа может продолжиться с начала метки checkiandj.

+ +
checkiandj:
+  while (i < 4) {
+    console.log(i);
+    i += 1;
+    checkj:
+      while (j > 4) {
+        console.log(j);
+        j -= 1;
+        if ((j % 2) != 0) {
+          continue checkj;
+        }
+        console.log(j + " чётное.");
+      }
+      console.log("i = " + i);
+      console.log("j = " + j);
+  }
+ +

for...in 

+ +

Оператор for...in проходит по всем перечислимым свойствам объекта. JavaScript выполнит указанные выражения для каждого отдельного свойства. Цикл for...in выглядит так:

+ +
for (variable in object) {
+  выражения
+}
+
+ +

Пример

+ +

Следующая функция берёт своим аргументом объект и его имя. Затем проходит по всем свойствам объекта и возвращает строку, которая содержит имена свойств и их значения.

+ +
function dump_props(obj, obj_name) {
+  var result = "";
+  for (var i in obj) {
+    result += obj_name + "." + i + " = " + obj[i] + "<br>";
+  }
+  result += "<hr>";
+  return result;
+}
+
+ +

Для объекта car со свойствами make и model, результатом будет:

+ +
car.make = Ford
+car.model = Mustang
+
+ +

Пример №2

+ +

Также, по ключу можно выводить значение:

+ +
let obj = {model: 'AUDI A8', year: '2019', color: 'brown'}
+
+for (key in obj) {
+  console.log(`${key} = ${obj[key]}`);
+}
+// model = AUDI A8
+// year = 2019
+// color = brown
+ +

Массивы

+ +

Хотя, очень заманчиво использовать for...in как способ пройтись по всем элементам {{jsxref("Array")}}, этот оператор возвращает имя свойств определённых пользователем помимо числовых индексов. Таким образом лучше использовать стандартный for для числовых индексов при взаимодействии с массивами, поскольку оператор for...in проходит по определённым пользователем свойствам в дополнение к элементам массива, если вы изменяете массив, например, добавляете свойства и методы.

+ +

Пример

+ +
let arr = ['AUDI A8', '2019', 'brown'];
+arr.cost = '$100.000';
+
+for (key in arr) {
+  console.log(`${key} = ${arr[key]}`);
+}
+
+// 0 = AUDI A8
+// 1 = 2019
+// 2 = brown
+// cost = $100.000
+
+ +

for...of

+ +

Оператор for...of создаёт цикл, проходящий по перечислимым объектам (включая {{jsxref("Array")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, объект arguments и так далее), вызывая на каждой итерации функцию с выражениями, которые надо выполнить для получения значения каждого отдельного свойства.

+ +
for (variable of object) {
+  выражения
+}
+ +

Следующий пример показывает разницу между циклами for...of и for...in. Тогда как for...in проходит по именам свойств, for...of проходит по значениям свойств:

+ +
let arr = [3, 5, 7];
+arr.foo = "hello";
+
+for (let i in arr) {
+   console.log(i); // выводит "0", "1", "2", "foo"
+}
+
+for (let i of arr) {
+   console.log(i); // выводит "3", "5", "7"
+}
+
+ +

{{PreviousNext("Web/JavaScript/Guide/Control_flow_and_error_handling", "Web/JavaScript/Guide/Functions")}}

diff --git a/files/ru/web/javascript/guide/predefined_core_objects/index.html b/files/ru/web/javascript/guide/predefined_core_objects/index.html deleted file mode 100644 index a0f5770315..0000000000 --- a/files/ru/web/javascript/guide/predefined_core_objects/index.html +++ /dev/null @@ -1,923 +0,0 @@ ---- -title: Predefined Core Objects -slug: Web/JavaScript/Guide/Predefined_Core_Objects -translation_of: Web/JavaScript/Guide -translation_of_original: Web/JavaScript/Guide/Predefined_Core_Objects ---- -

Эта глава описывает предопределённые объекты в стандартном JavaScript: Array, Boolean, Date, Function, Math, Number, RegExp, и String.

- -

Объект Array

- -

В JavaScript массив как тип данных отсутствует. Тем не менее, вы можете использовать предопределённый объект Array и его методы, чтобы работать с массивами в ваших приложениях. Объект Array содержит различные методы для манипуляций с массивами, такими как объединение, обращение и сортировка. У него есть свойство для определения длины массива и другие свойства для работы с регулярными выражениями.

- -

Массив - это упорядоченный набор значений, обращаться к которым можно с помощью имени и индекса. Например, можно создать массив emp, который содержит имена сотрудников фирмы, проиндексированные номерами. Тогда emp[1] будет соответствовать сотруднику номер один, emp[2] сотруднику номер два и так далее.

- -

Создание объекта Array

- -

Следующие инструкции создают эквивалентные массивы:

- -
-
var arr = new Array(element0, element1, ..., elementN);
-var arr = Array(element0, element1, ..., elementN);
-var arr = [element0, element1, ..., elementN];
-
-
- -

element0, element1, ..., elementN это список значений во вновь создаваемом массиве. Когда эти значения заданы, массив инициализирует ими свои эелементы. Длина массива определяется по числу аргументов и сохраняется в свойстве length (длина).

- -

Синтаксис с квадратными скобками называется "литералом массива" (array literal) или "инициализатором массива" (array initializer). Такая запись короче других и используется чаще. Подробности смотрите в Array Literals.

- -

Создать массив ненулевой длины, но без элементов, можно одним из следующих способов:

- -
var arr = new Array(arrayLength);
-var arr = Array(arrayLength);
-
-// This has exactly the same effect
-var arr = [];
-arr.length = arrayLength;
-
- -

Обратите внимание: в приведённом выше коде arrayLength должен быть значением типа Number, то есть числом, иначе будет создан массив с одним элементом (переданным конструктору значением). Вызов arr.length возвратит arrayLength, хотя на самом деле элемент содержит пустые (неопределённые, undefined) элементы. Итерация по массиву циклом for...in не возвратит никаких элементов.

- -

Массивы можно не только определить как и переменные, но и присвоить существующему объекту как свойство:

- -
var obj = {};
-// ...
-obj.prop = [element0, element1, ..., elementN];
-
-// OR
-var obj = {prop: [element0, element1, ...., elementN]}
-
- -

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

- -
var arr = [42];
-var arr = Array(42); // Creates an array with no element, but with arr.length set to 42
-
-// The above code is equivalent to
-var arr = [];
-arr.length = 42;
-
-
- -

Вызов Array(N) приводит к RangeError, если N не является целым числом, чья дробная часть не равна нулю. Следующий пример иллюстрирует это поведение.

- -
var arr = Array(9.3);  // RangeError: Invalid array length
-
- -

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

- -

Заполнение массива

- -

You can populate an array by assigning values to its elements. For example,

- -
var emp = [];
-emp[0] = "Casey Jones";
-emp[1] = "Phil Lesh";
-emp[2] = "August West";
-
- -

Note: if you supply a non-integer value to the array operator in the code above, a property will be created in the object representing the array, instead of an array element.

- -
 var arr = [];
-arr[3.4] = "Oranges";
-console.log(arr.length);                // 0
-console.log(arr.hasOwnProperty(3.4));   // true
-
- -

You can also populate an array when you create it:

- -
var myArray = new Array("Hello", myVar, 3.14159);
-var myArray = ["Mango", "Apple", "Orange"]
-
- -

Referring to Array Elements

- -

You refer to an array's elements by using the element's ordinal number. For example, suppose you define the following array:

- -
var myArray = ["Wind", "Rain", "Fire"];
-
- -

You then refer to the first element of the array as myArray[0] and the second element of the array as myArray[1]. The index of the elements begins with zero.

- -

Note: the array operator (square brackets) is also used for accessing the array's properties (arrays are also objects in JavaScript). For example,

- -
 var arr = ["one", "two", "three"];
-arr[2];  // three
-arr["length"];  // 3
-
- -

Understanding length

- -

At the implementation level, JavaScript's arrays actually store their elements as standard object properties, using the array index as the property name. The length property is special; it always returns the index of the last element plus one (in following example Dusty is indexed at 30 so cats.length returns 30 + 1). Remember, Javascript Array indexes are 0-based: they start at 0, not 1. This means that the length property will be one more than the highest index stored in the array:

- -
var cats = [];
-cats[30] = ['Dusty'];
-print(cats.length); // 31
-
- -

You can also assign to the length property. Writing a value that is shorter than the number of stored items truncates the array; writing 0 empties it entirely:

- -
var cats = ['Dusty', 'Misty', 'Twiggy'];
-console.log(cats.length); // 3
-
-cats.length = 2;
-console.log(cats); // prints "Dusty,Misty" - Twiggy has been removed
-
-cats.length = 0;
-console.log(cats); // prints nothing; the cats array is empty
-
-cats.length = 3;
-console.log(cats); // [undefined, undefined, undefined]
-
- -

Iterating over arrays

- -

A common operation is to iterate over the values of an array, processing each one in some way. The simplest way to do this is as follows:

- -
var colors = ['red', 'green', 'blue'];
-for (var i = 0; i < colors.length; i++) {
-  console.log(colors[i]);
-}
-
- -

If you know that none of the elements in your array evaluate to false in a boolean context — if your array consists only of DOM nodes, for example, you can use a more efficient idiom:

- -
var divs = document.getElementsByTagName('div');
-for (var i = 0, div; div = divs[i]; i++) {
-  /* Process div in some way */
-}
-
- -

This avoids the overhead of checking the length of the array, and ensures that the div variable is reassigned to the current item each time around the loop for added convenience.

- -

The forEach() method, introduced in JavaScript 1.6, provides another way of iterating over an array:

- -
var colors = ['red', 'green', 'blue'];
-colors.forEach(function(color) {
-  console.log(color);
-});
-
- -

The function passed to forEach is executed once for every item in the array, with the array item passed as the argument to the function. Unassigned values are not iterated in a forEach loop.

- -

Note that the elements of array omitted when the array is defined are not listed when iterating by forEach, but are listed when undefined has been manually assigned to the element:

- -
var array = ['first', 'second', , 'fourth'];
-
-// returns ['first', 'second', 'fourth'];
-array.forEach(function(element) {
-  console.log(element);
-})
-
-if(array[2] === undefined) { console.log('array[2] is undefined'); } // true
-
-var array = ['first', 'second', undefined, 'fourth'];
-
-// returns ['first', 'second', undefined, 'fourth'];
-array.forEach(function(element) {
-  console.log(element);
-})
- -

Since JavaScript elements are saved as standard object properties, it is not advisable to iterate through JavaScript arrays using for...in loops because normal elements and all enumerable properties will be listed.

- -

Array Methods

- -

The Array object has the following methods:

- - - -

Compatibility code for older browsers can be found for each of these functions on the individual pages. Native browser support for these features in various browsers can be found here.

- - - -

The methods above that take a callback are known as iterative methods, because they iterate over the entire array in some fashion. Each one takes an optional second argument called thisObject. If provided, thisObject becomes the value of the this keyword inside the body of the callback function. If not provided, as with other cases where a function is invoked outside of an explicit object context, this will refer to the global object (window).

- -

The callback function is actually called with three arguments. The first is the value of the current item, the second is its array index, and the third is a reference to the array itself. JavaScript functions ignore any arguments that are not named in the parameter list so it is safe to provide a callback function that only takes a single argument, such as alert.

- - - -

reduce and reduceRight are the least obvious of the iterative array methods. They should be used for algorithms that combine two values recursively in order to reduce a sequence down to a single value.

- -

Multi-Dimensional Arrays

- -

Arrays can be nested, meaning that an array can contain another array as an element. Using this characteristic of JavaScript arrays, multi-dimensional arrays can be created.

- -

The following code creates a two-dimensional array.

- -
var a = new Array(4);
-for (i = 0; i < 4; i++) {
-  a[i] = new Array(4);
-  for (j = 0; j < 4; j++) {
-    a[i][j] = "[" + i + "," + j + "]";
-  }
-}
-
- -

This example creates an array with the following rows:

- -
Row 0: [0,0] [0,1] [0,2] [0,3]
-Row 1: [1,0] [1,1] [1,2] [1,3]
-Row 2: [2,0] [2,1] [2,2] [2,3]
-Row 3: [3,0] [3,1] [3,2] [3,3]
-
- -

Arrays and Regular Expressions

- -

When an array is the result of a match between a regular expression and a string, the array returns properties and elements that provide information about the match. An array is the return value of RegExp.exec(), String.match(), and String.split(). For information on using arrays with regular expressions, see Regular Expressions.

- -

Working with Array-like objects

- -

Some JavaScript objects, such as the NodeList returned by document.getElementsByTagName() or the arguments object made available within the body of a function, look and behave like arrays on the surface but do not share all of their methods. The arguments object provides a length attribute but does not implement the forEach() method, for example.

- -

Array generics, introduced in JavaScript 1.6, provide a way of running Array methods against other array-like objects. Each standard array method has a corresponding method on the Array object itself; for example:

- -
 function alertArguments() {
-   Array.forEach(arguments, function(item) {
-     alert(item);
-   });
- }
-
- -

These generic methods can be emulated more verbosely in older versions of JavaScript using the call method provided by JavaScript function objects:

- -
 Array.prototype.forEach.call(arguments, function(item) {
-   alert(item);
- });
-
- -

Array generic methods can be used on strings as well, since they provide sequential access to their characters in a similar way to arrays:

- -
Array.forEach("a string", function(chr) {
-   alert(chr);
-});
- -

Here are some further examples of applying array methods to strings, also taking advantage of JavaScript 1.8 expression closures:

- -
var str = 'abcdef';
-var consonantsOnlyStr = Array.filter(str, function (c) !(/[aeiou]/i).test(c)).join(''); // 'bcdf'
-var vowelsPresent = Array.some(str, function (c) (/[aeiou]/i).test(c)); // true
-var allVowels = Array.every(str, function (c) (/[aeiou]/i).test(c)); // false
-var interpolatedZeros = Array.map(str, function (c) c+'0').join(''); // 'a0b0c0d0e0f0'
-var numerologicalValue = Array.reduce(str, function (c, c2) c+c2.toLowerCase().charCodeAt()-96, 0);
-// 21 (reduce() since JS v1.8)
-
- -

Note that filter and map do not automatically return the characters back into being members of a string in the return result; an array is returned, so we must use join to return back to a string.

- -

Array comprehensions

- -

Introduced in JavaScript 1.7, array comprehensions provide a useful shortcut for constructing a new array based on the contents of another. Comprehensions can often be used in place of calls to map() and filter(), or as a way of combining the two.

- -

The following comprehension takes an array of numbers and creates a new array of the double of each of those numbers.

- -
var numbers = [1, 2, 3, 4];
-var doubled = [i * 2 for (i of numbers)];
-alert(doubled); // Alerts 2,4,6,8
-
- -

This is equivalent to the following map() operation:

- -
var doubled = numbers.map(function(i){return i * 2;});
-
- -

Comprehensions can also be used to select items that match a particular expression. Here is a comprehension which selects only even numbers:

- -
var numbers = [1, 2, 3, 21, 22, 30];
-var evens = [i for (i of numbers) if (i % 2 === 0)];
-alert(evens); // Alerts 2,22,30
-
- -

filter() can be used for the same purpose:

- -
var evens = numbers.filter(function(i){return i % 2 === 0;});
-
- -

map() and filter() style operations can be combined into a single array comprehension. Here is one that filters just the even numbers, then creates an array containing their doubles:

- -
var numbers = [1, 2, 3, 21, 22, 30];
-var doubledEvens = [i * 2 for (i of numbers) if (i % 2 === 0)];
-alert(doubledEvens); // Alerts 4,44,60
-
- -

The square brackets of an array comprehension introduce an implicit block for scoping purposes. New variables (such as i in the example) are treated as if they had been declared using let. This means that they will not be available outside of the comprehension.

- -

The input to an array comprehension does not itself need to be an array; iterators and generators can also be used.

- -

Even strings may be used as input; to achieve the filter and map actions (under Array-like objects) above:

- -
var str = 'abcdef';
-var consonantsOnlyStr = [c for (c of str) if (!(/[aeiouAEIOU]/).test(c))  ].join(''); // 'bcdf'
-var interpolatedZeros = [c+'0' for (c of str) ].join(''); // 'a0b0c0d0e0f0'
-
- -

Again, the input form is not preserved, so we have to use join() to revert back to a string.

- -

Boolean Object

- -

The Boolean object is a wrapper around the primitive Boolean data type. Use the following syntax to create a Boolean object:

- -
var booleanObjectName = new Boolean(value);
-
- -

Do not confuse the primitive Boolean values true and false with the true and false values of the Boolean object. Any object whose value is not undefined , null, 0, NaN, or the empty string, including a Boolean object whose value is false, evaluates to true when passed to a conditional statement. See if...else Statement for more information.

- -

Date Object

- -

JavaScript does not have a date data type. However, you can use the Date object and its methods to work with dates and times in your applications. The Date object has a large number of methods for setting, getting, and manipulating dates. It does not have any properties.

- -

JavaScript handles dates similarly to Java. The two languages have many of the same date methods, and both languages store dates as the number of milliseconds since January 1, 1970, 00:00:00.

- -

The Date object range is -100,000,000 days to 100,000,000 days relative to 01 January, 1970 UTC.

- -

To create a Date object:

- -
var dateObjectName = new Date([parameters]);
-
- -

where dateObjectName is the name of the Date object being created; it can be a new object or a property of an existing object.

- -

Calling Date without the new keyword simply converts the provided date to a string representation.

- -

The parameters in the preceding syntax can be any of the following:

- - - -

JavaScript 1.2 and earlier
- The Date object behaves as follows:

- - - -

Methods of the Date Object

- -

The Date object methods for handling dates and times fall into these broad categories:

- - - -

With the "get" and "set" methods you can get and set seconds, minutes, hours, day of the month, day of the week, months, and years separately. There is a getDay method that returns the day of the week, but no corresponding setDay method, because the day of the week is set automatically. These methods use integers to represent these values as follows:

- - - -

For example, suppose you define the following date:

- -
var Xmas95 = new Date("December 25, 1995");
-
- -

Then Xmas95.getMonth() returns 11, and Xmas95.getFullYear() returns 1995.

- -

The getTime and setTime methods are useful for comparing dates. The getTime method returns the number of milliseconds since January 1, 1970, 00:00:00 for a Date object.

- -

For example, the following code displays the number of days left in the current year:

- -
var today = new Date();
-var endYear = new Date(1995, 11, 31, 23, 59, 59, 999); // Set day and month
-endYear.setFullYear(today.getFullYear()); // Set year to this year
-var msPerDay = 24 * 60 * 60 * 1000; // Number of milliseconds per day
-var daysLeft = (endYear.getTime() - today.getTime()) / msPerDay;
-var daysLeft = Math.round(daysLeft); //returns days left in the year
-
- -

This example creates a Date object named today that contains today's date. It then creates a Date object named endYear and sets the year to the current year. Then, using the number of milliseconds per day, it computes the number of days between today and endYear, using getTime and rounding to a whole number of days.

- -

The parse method is useful for assigning values from date strings to existing Date objects. For example, the following code uses parse and setTime to assign a date value to the IPOdate object:

- -
var IPOdate = new Date();
-IPOdate.setTime(Date.parse("Aug 9, 1995"));
-
- -

Using the Date Object: an Example

- -

In the following example, the function JSClock() returns the time in the format of a digital clock.

- -
function JSClock() {
-  var time = new Date();
-  var hour = time.getHours();
-  var minute = time.getMinutes();
-  var second = time.getSeconds();
-  var temp = "" + ((hour > 12) ? hour - 12 : hour);
-  if (hour == 0)
-    temp = "12";
-  temp += ((minute < 10) ? ":0" : ":") + minute;
-  temp += ((second < 10) ? ":0" : ":") + second;
-  temp += (hour >= 12) ? " P.M." : " A.M.";
-  return temp;
-}
-
- -

The JSClock function first creates a new Date object called time; since no arguments are given, time is created with the current date and time. Then calls to the getHours, getMinutes, and getSeconds methods assign the value of the current hour, minute, and second to hour, minute, and second.

- -

The next four statements build a string value based on the time. The first statement creates a variable temp, assigning it a value using a conditional expression; if hour is greater than 12, (hour - 12), otherwise simply hour, unless hour is 0, in which case it becomes 12.

- -

The next statement appends a minute value to temp. If the value of minute is less than 10, the conditional expression adds a string with a preceding zero; otherwise it adds a string with a demarcating colon. Then a statement appends a seconds value to temp in the same way.

- -

Finally, a conditional expression appends "P.M." to temp if hour is 12 or greater; otherwise, it appends "A.M." to temp.

- -

Function Object

- -

The predefined Function object specifies a string of JavaScript code to be compiled as a function.

- -

To create a Function object:

- -
var functionObjectName = new Function ([arg1, arg2, ... argn], functionBody);
-
- -

functionObjectName is the name of a variable or a property of an existing object. It can also be an object followed by a lowercase event handler name, such as window.onerror.

- -

arg1, arg2, ... argn are arguments to be used by the function as formal argument names. Each must be a string that corresponds to a valid JavaScript identifier; for example "x" or "theForm".

- -

functionBody is a string specifying the JavaScript code to be compiled as the function body.

- -

Function objects are evaluated each time they are used. This is less efficient than declaring a function and calling it within your code, because declared functions are compiled.

- -

In addition to defining functions as described here, you can also use the function statement and the function expression. See the JavaScript Reference for more information.

- -

The following code assigns a function to the variable setBGColor. This function sets the current document's background color.

- -
var setBGColor = new Function("document.bgColor = 'antiquewhite'");
-
- -

To call the Function object, you can specify the variable name as if it were a function. The following code executes the function specified by the setBGColor variable:

- -
var colorChoice="antiquewhite";
-if (colorChoice=="antiquewhite") {setBGColor()}
-
- -

You can assign the function to an event handler in either of the following ways:

- -
    -
  1. - 
    document.form1.colorButton.onclick = setBGColor;
-
    -
    2. -
  2. - 
    <INPUT NAME="colorButton" TYPE="button"
-  VALUE="Change background color"
-  onClick="setBGColor()">
-
    -
    3. -
- -

Creating the variable setBGColor shown above is similar to declaring the following function:

- -
function setBGColor() {
-  document.bgColor = 'antiquewhite';
-}
-
- -

Assigning a function to a variable is similar to declaring a function, but there are differences:

- - - -

You can nest a function within a function. The nested (inner) function is private to its containing (outer) function:

- - - -

Math Object

- -

The predefined Math object has properties and methods for mathematical constants and functions. For example, the Math object's PI property has the value of pi (3.141...), which you would use in an application as

- -
Math.PI
-
- -

Similarly, standard mathematical functions are methods of Math. These include trigonometric, logarithmic, exponential, and other functions. For example, if you want to use the trigonometric function sine, you would write

- -
Math.sin(1.56)
-
- -

Note that all trigonometric methods of Math take arguments in radians.

- -

The following table summarizes the Math object's methods.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Table 7.1 Methods of Math
MethodDescription
absAbsolute value
sin, cos, tanStandard trigonometric functions; argument in radians
acos, asin, atan, atan2Inverse trigonometric functions; return values in radians
exp, logExponential and natural logarithm, base e
ceilReturns least integer greater than or equal to argument
floorReturns greatest integer less than or equal to argument
min, maxReturns greater or lesser (respectively) of two arguments
powExponential; first argument is base, second is exponent
randomReturns a random number between 0 and 1.
roundRounds argument to nearest integer
sqrtSquare root
- -

Unlike many other objects, you never create a Math object of your own. You always use the predefined Math object.

- -

Number Object

- -

The Number object has properties for numerical constants, such as maximum value, not-a-number, and infinity. You cannot change the values of these properties and you use them as follows:

- -
var biggestNum = Number.MAX_VALUE;
-var smallestNum = Number.MIN_VALUE;
-var infiniteNum = Number.POSITIVE_INFINITY;
-var negInfiniteNum = Number.NEGATIVE_INFINITY;
-var notANum = Number.NaN;
-
- -

You always refer to a property of the predefined Number object as shown above, and not as a property of a Number object you create yourself.

- -

The following table summarizes the Number object's properties.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Table 7.2 Properties of Number
PropertyDescription
MAX_VALUEThe largest representable number
MIN_VALUEThe smallest representable number
NaNSpecial "not a number" value
NEGATIVE_INFINITYSpecial negative infinite value; returned on overflow
POSITIVE_INFINITYSpecial positive infinite value; returned on overflow
- -

The Number prototype provides methods for retrieving information from Number objects in various formats. The following table summarizes the methods of Number.prototype.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Table 7.3 Methods of Number.prototype
MethodDescription
toExponentialReturns a string representing the number in exponential notation.
toFixedReturns a string representing the number in fixed-point notation.
toPrecisionReturns a string representing the number to a specified precision in fixed-point notation.
toSourceReturns an object literal representing the specified Number object; you can use this value to create a new object. Overrides the Object.toSource method.
toStringReturns a string representing the specified object. Overrides the Object.toString method.
valueOfReturns the primitive value of the specified object. Overrides the Object.valueOf method.
- -

RegExp Object

- -

The RegExp object lets you work with regular expressions. It is described in Regular Expressions.

- -

String Object

- -

The String object is a wrapper around the string primitive data type. Do not confuse a string literal with the String object. For example, the following code creates the string literal s1 and also the String object s2:

- -
var s1 = "foo"; //creates a string literal value
-var s2 = new String("foo"); //creates a String object
-
- -

You can call any of the methods of the String object on a string literal value—JavaScript automatically converts the string literal to a temporary String object, calls the method, then discards the temporary String object. You can also use the String.length property with a string literal.

- -

You should use string literals unless you specifically need to use a String object, because String objects can have counterintuitive behavior. For example:

- -
var s1 = "2 + 2"; //creates a string literal value
-var s2 = new String("2 + 2"); //creates a String object
-eval(s1); //returns the number 4
-eval(s2); //returns the string "2 + 2"
- -

A String object has one property, length, that indicates the number of characters in the string. For example, the following code assigns x the value 13, because "Hello, World!" has 13 characters:

- -
var mystring = "Hello, World!";
-var x = mystring.length;
-
- -

A String object has two types of methods: those that return a variation on the string itself, such as substring and toUpperCase, and those that return an HTML-formatted version of the string, such as bold and link.

- -

For example, using the previous example, both mystring.toUpperCase() and "hello, world!".toUpperCase() return the string "HELLO, WORLD!"

- -

The substring method takes two arguments and returns a subset of the string between the two arguments. Using the previous example, mystring.substring(4, 9) returns the string "o, Wo". See the substring method of the String object in the JavaScript Reference for more information.

- -

The String object also has a number of methods for automatic HTML formatting, such as bold to create boldface text and link to create a hyperlink. For example, you could create a hyperlink to a hypothetical URL with the link method as follows:

- -
mystring.link("http://www.helloworld.com")
-
- -

The following table summarizes the methods of String objects.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Table 7.4 Methods of String Instances
MethodDescription
anchorCreates HTML named anchor.
big, blink, bold, fixed, italics, small, strike, sub, supCreate HTML formatted string.
charAt, charCodeAtReturn the character or character code at the specified position in string.
indexOf, lastIndexOfReturn the position of specified substring in the string or last position of specified substring, respectively.
linkCreates HTML hyperlink.
concatCombines the text of two strings and returns a new string.
fromCharCodeConstructs a string from the specified sequence of Unicode values. This is a method of the String class, not a String instance.
splitSplits a String object into an array of strings by separating the string into substrings.
sliceExtracts a section of an string and returns a new string.
substring, substrReturn the specified subset of the string, either by specifying the start and end indexes or the start index and a length.
match, replace, searchWork with regular expressions.
toLowerCase, toUpperCase -

Return the string in all lowercase or all uppercase, respectively.

-
- -

autoPreviousNext("JSGChapters")

diff --git a/files/ru/web/javascript/guide/using_promises/index.html b/files/ru/web/javascript/guide/using_promises/index.html new file mode 100644 index 0000000000..a910dfca09 --- /dev/null +++ b/files/ru/web/javascript/guide/using_promises/index.html @@ -0,0 +1,321 @@ +--- +title: Использование промисов +slug: Web/JavaScript/Guide/Ispolzovanie_promisov +tags: + - JavaScript + - Асинхронность + - Гайд + - промис +translation_of: Web/JavaScript/Guide/Using_promises +--- +
+

{{jsSidebar("Руководство по JavaScript")}}{{PreviousNext("Web/JavaScript/Guide/Details_of_the_Object_Model", "Web/JavaScript/Guide/Iterators_and_Generators")}}

+
+ +

{{jsxref("Promise")}} (промис, англ. "обещание") - это объект, представляющий результат успешного или неудачного завершения асинхронной операции. Так как большинство людей пользуются уже созданными промисами, это руководство начнем с объяснения использования вернувшихся промисов до объяснения принципов создания. 

+ +

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

+ +

Например, вместо старомодной функции, которая принимает два коллбэка и вызывает один из них в зависимости от успешного или неудачного завершения операции:

+ +
function doSomethingOldStyle(successCallback, failureCallback) {
+  console.log("Готово.");
+  // Успех в половине случаев.
+  if (Math.random() > .5) {
+    successCallback("Успех")
+  } else {
+    failureCallback("Ошибка")
+  }
+}
+
+function successCallback(result) {
+  console.log("Успешно завершено с результатом " + result);
+}
+
+function failureCallback(error) {
+  console.log("Завершено с ошибкой " + error);
+}
+
+doSomethingOldStyle(successCallback, failureCallback);
+
+ +

…современные функции возвращают промис, в который вы записываете ваши коллбэки:

+ +
function doSomething() {
+  return new Promise((resolve, reject) => {
+    console.log("Готово.");
+    // Успех в половине случаев.
+    if (Math.random() > .5) {
+      resolve("Успех")
+    } else {
+      reject("Ошибка")
+    }
+  })
+}
+
+const promise = doSomething();
+promise.then(successCallback, failureCallback);
+ +

…или просто:

+ +
doSomething().then(successCallback, failureCallback);
+ +

Мы называем это асинхронным вызовом функции. У этого соглашения есть несколько преимуществ. Давайте рассмотрим их.

+ +

Гарантии

+ +

В отличие от старомодных переданных коллбэков промис дает некоторые гарантии:

+ + + +

Но наиболее непосредственная польза от промисов - цепочка вызовов (chaining).

+ +

Цепочка вызовов

+ +

Общая нужда - выполнять две или более асинхронных операции одна за другой, причём каждая следующая начинается при успешном завершении предыдущей и использует результат её выполнения. Мы реализуем это, создавая цепочку вызовов промисов (promise chain).

+ +

Вот в чём магия: функция then возвращает новый промис, отличающийся от первоначального:

+ +
let promise = doSomething();
+let promise2 = promise.then(successCallback, failureCallback);
+
+ +

или

+ +
let promise2 = doSomething().then(successCallback, failureCallback);
+
+ +

Второй промис представляет завершение не только doSomething(), но и функций successCallback или failureCallback, переданных Вами, а они тоже могут быть асинхронными функциями, возвращающими промис. В этом случае все коллбэки, добавленные к promise2 будут поставлены в очередь за промисом, возвращаемым successCallback или failureCallback.

+ +

По сути, каждый вызванный промис означает успешное завершение предыдущих шагов в цепочке.

+ +

Раньше выполнение нескольких асинхронных операций друг за другом приводило к классической "Вавилонской башне" коллбэков:

+ +
doSomething(function(result) {
+  doSomethingElse(result, function(newResult) {
+    doThirdThing(newResult, function(finalResult) {
+      console.log('Итоговый результат: ' + finalResult);
+    }, failureCallback);
+  }, failureCallback);
+}, failureCallback);
+
+ +

В современных функциях мы записываем коллбэки в возвращаемые промисы - формируем цепочку промисов:

+ +
doSomething().then(function(result) {
+  return doSomethingElse(result);
+})
+.then(function(newResult) {
+  return doThirdThing(newResult);
+})
+.then(function(finalResult) {
+  console.log('Итоговый результат: ' + finalResult);
+})
+.catch(failureCallback);
+
+ +

Аргументы then необязательны, а catch(failureCallback) - это сокращение для then(null, failureCallback). Вот как это выражено с помощью стрелочных функций:

+ +
doSomething()
+.then(result => doSomethingElse(result))
+.then(newResult => doThirdThing(newResult))
+.then(finalResult => {
+  console.log(`Итоговый результат: ${finalResult}`);
+})
+.catch(failureCallback);
+
+ +

Важно: Всегда возвращайте промисы в return, иначе коллбэки не будут сцеплены и ошибки могут быть не пойманы (стрелочные функции неявно возвращают результат, если скобки {} вокруг тела функции опущены).

+ +

Цепочка вызовов после catch

+ +

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

+ +
new Promise((resolve, reject) => {
+    console.log('Начало');
+
+    resolve();
+})
+.then(() => {
+    throw new Error('Где-то произошла ошибка');
+
+    console.log('Выведи это');
+})
+.catch(() => {
+    console.log('Выведи то');
+})
+.then(() => {
+    console.log('Выведи это, несмотря ни на что');
+});
+ +

В результате выведется данный текст:

+ +
Начало
+Выведи то
+Выведи это, несмотря ни на что
+ +

Заметьте, что текст "Выведи это" не вывелся, потому что "Где то произошла ошибка" привела к отказу

+ +

Распространение ошибки

+ +

Вы могли ранее заметить, что failureCallback  повторяется три раза  в "pyramid of doom", а в цепочке промисов всего лишь один раз:

+ +
doSomething()
+.then(result => doSomethingElse(result))
+.then(newResult => doThirdThing(newResult))
+.then(finalResult => console.log(`Итоговый результат: ${finalResult}`))
+.catch(failureCallback);
+ +

В основном, цепочка промисов останавливает выполнение кода, если где-либо произошла ошибка, и вместо этого ищет далее по цепочке обработчики ошибок. Это очень похоже на то, как работает синхронный код:

+ +
try {
+  let result = syncDoSomething();
+  let newResult = syncDoSomethingElse(result);
+  let finalResult = syncDoThirdThing(newResult);
+  console.log(`Итоговый результат: ${finalResult}`);
+} catch(error) {
+  failureCallback(error);
+}
+
+ +

Эта симметрия с синхронным кодом лучше всего показывает себя в синтаксическом сахаре async/await в ECMAScript 2017:

+ +
async function foo() {
+  try {
+    let result = await doSomething();
+    let newResult = await doSomethingElse(result);
+    let finalResult = await doThirdThing(newResult);
+    console.log(`Итоговый результат: ${finalResult}`);
+  } catch(error) {
+    failureCallback(error);
+  }
+}
+
+ +

Работа данного кода основана на промисах. Для примера здесь используется функция doSomething(), которая встречалась ранее. Вы можете прочитать больше о синтаксисе здесь

+ +

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

+ +

Создание промиса вокруг старого коллбэка

+ +

{{jsxref("Promise")}} может быть создан с помощью конструктора. Это может понадобится только для старых API.

+ +

В идеале, все асинхронные функции уже должны возвращать промис. Но увы, некоторые APIs до сих пор ожидают успешного или неудачного  коллбека переданных по старинке. Типичный пример: {{domxref("WindowTimers.setTimeout", "setTimeout()")}} функция:

+ +
setTimeout(() => saySomething("10 seconds passed"), 10000);
+ +

Смешивание старого коллбэк-стиля и промисов проблематично. В случае неудачного завершения saySomething или программной ошибки, нельзя обработать ошибку.

+ +

К с частью мы можем обернуть функцию в промис. Хороший тон оборачивать проблематичные функции на самом низком возможном уровне, и больше никогда их не вызывать на прямую:

+ +
const wait = ms => new Promise(resolve => setTimeout(resolve, ms));
+
+wait(10000).then(() => saySomething("10 seconds")).catch(failureCallback);
+ +

В сущности, конструктор промиса становится исполнителем функции, который позволяет нам резолвить или режектить промис вручную. Так как setTimeout всегда успешен, мы опустили reject в этом случае.

+ +

Композиция

+ +

{{jsxref("Promise.resolve()")}} и {{jsxref("Promise.reject()")}} короткий способ создать уже успешные или отклоненные промисы соответственно. Это иногда бывает полезно.

+ +

{{jsxref("Promise.all()")}} и {{jsxref("Promise.race()")}} - два метода запустить асинхронные операции параллельно.

+ +

Последовательное выполнение композиции возможно при помощи хитрости JavaScript:

+ +
[func1, func2].reduce((p, f) => p.then(f), Promise.resolve());
+ +

Фактически, мы превращаем массив асинхронных функций в цепочку промисов равносильно: Promise.resolve().then(func1).then(func2);

+ +

Это также можно сделать, объеденив композицию в функцию, в функциональном стиле программирования:

+ +
const applyAsync = (acc,val) => acc.then(val);
+const composeAsync = (...funcs) => x => funcs.reduce(applyAsync, Promise.resolve(x));
+ +

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

+ +
const transformData = composeAsync(func1, asyncFunc1, asyncFunc2, func2);
+transformData(data);
+ +

В ECMAScript 2017, последовательные композиции могут быть выполненны более простым способом с помощью async/await:

+ +
for (const f of [func1, func2]) {
+  await f();
+}
+ +

Порядок выполнения

+ +

Чтобы избежать сюрпризов, функции, переданные в then никогда не будут вызванны синхронно, даже с уже разрешенным промисом:

+ +
Promise.resolve().then(() => console.log(2));
+console.log(1); // 1, 2
+ +

Вместо немедленного выполнения, переданная функция встанет в очередь микрозадач, а значит выполнится, когда очередь будет пустой  в конце текущего вызова JavaScript цикла событий (event loop), т.е. очень скоро:

+ +
const wait = ms => new Promise(resolve => setTimeout(resolve, ms));
+
+wait().then(() => console.log(4));
+Promise.resolve().then(() => console.log(2)).then(() => console.log(3));
+console.log(1); // 1, 2, 3, 4
+ +

Вложенность

+ +

Простые цепочки promise лучше оставлять без вложений, так как вложеность может быть результатом небрежной структуры. Смотрите распространенные ошибки.

+ +

Вложенность - это управляющая структура, ограничивающая область действия операторов catch. В частности, вложенный catch только перехватывает сбои в своей области и ниже, а не ошибки выше в цепочке за пределами вложенной области. При правильном использовании это дает большую точность в извлечение ошибок:

+ +
doSomethingCritical()
+.then(result => doSomethingOptional()
+  .then(optionalResult => doSomethingExtraNice(optionalResult))
+  .catch(e => {})) // Игнорируется если необязательные параметр не выкинул исключение
+.then(() => moreCriticalStuff())
+.catch(e => console.log("Критическая ошибка: " + e.message));
+ +

Обратите внимание, что необязательный шаги здесь выделены отступом.

+ +

Внутренний оператор catch нейтрализует и перехватывает ошибки только от doSomethingOptional() и doSomethingExtraNice(), после чего код возобновляется с помощью moreCriticalStuff(). Важно, что в случае сбоя doSomethingCritical() его ошибка перехватывается только последним (внешним) catch.

+ +

Частые ошибки

+ +

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

+ +
// Плохой пример! Три ошибки!
+
+doSomething().then(function(result) {
+  doSomethingElse(result) // Забыл вернуть обещание из внутренней цепочки + неуместное влаживание
+  .then(newResult => doThirdThing(newResult));
+}).then(() => doFourthThing());
+// Забыл закончить цепочку методом catch
+ +

Первая ошибка это неправильно сцепить вещи между собой. Такое происходит когда мы создаем промис но забываем вернуть его. Как следствие, цепочка сломана, но правильнее было бы сказать что теперь у нас есть две независимые цепочки, соревнующиеся за право разрешится первой. Это означает doFourthThing() не будет ждать doSomethingElse() или doThirdThing() пока тот закончится, и будет исполнятся параллельно с ними, это ,вероятно, не то что хотел разработчик. Отдельные цепочки также имеют отдельную обработку ошибок, что приводит к необработанным ошибкам.

+ +

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

+ +

Третяя ошибка это забыть закончить цепочку ключевым словом catch. Незаконченные цепочки приводят к необработанным отторжениям обещаний в большинстве браузеров.

+ +

Хорошим примером является всегда либо возвращать либо заканчивать цепочки обещаний, и как только вы получаете новое обещание, возвращайте его сразу же, чтобы не усложнять код излишней вложенностью:

+ +
doSomething()
+.then(function(result) {
+  return doSomethingElse(result);
+})
+.then(newResult => doThirdThing(newResult))
+.then(() => doFourthThing())
+.catch(error => console.log(error));
+ +

Обратите внимание что () => x  это сокращенная форма () => { return x; }.

+ +

Теперь у нас имеется единственная определенная цепочка с правильной обработкой ошибок.

+ +

Использование async/await предотвращает большинство, если не все вышеуказанные ошибки—но взамен появляется другая частая ошибка—забыть ключевое слово await.

+ +

Смотрите также

+ + diff --git "a/files/ru/web/javascript/guide/\320\262\320\262\320\265\320\264\320\265\320\275\320\270\320\265_\320\262_javascript/index.html" "b/files/ru/web/javascript/guide/\320\262\320\262\320\265\320\264\320\265\320\275\320\270\320\265_\320\262_javascript/index.html" deleted file mode 100644 index 1b49c45ddb..0000000000 --- "a/files/ru/web/javascript/guide/\320\262\320\262\320\265\320\264\320\265\320\275\320\270\320\265_\320\262_javascript/index.html" +++ /dev/null @@ -1,159 +0,0 @@ ---- -title: Введение в JavaScript -slug: Web/JavaScript/Guide/Введение_в_JavaScript -tags: - - Beginner - - Guide - - JavaScript -translation_of: Web/JavaScript/Guide/Introduction ---- -

{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Values,_variables,_and_literals")}}

- -
-

Данная глава является введением в JavaScript и рассматривает некоторые его фундаментальные концепции.

-
- -

Что вам уже следует знать?

- -

В данном руководстве предполагается, что вы имеете:

- - - -

Где можно найти информацию о JavaScript?

- -

Документация по JavaScript на MDN включает:

- - - -

Если вы являетесь новичком в JavaScript, то начните с Изучение Web и Руководство по JavaScript. Как только вы освоите фундаментальные концепции, используйте Справочник по JavaScript для того, чтобы получить более подробную информацию о конкретных объектах или операторах.

- -

Что такое JavaScript?

- -

JavaScript — это кросс-платформенный, объектно-ориентированный скриптовый язык, являющийся небольшим и легковесным. Внутри среды исполнения JavaScript может быть связан с объектами данной среды и предоставлять программный контроль над ними.

- -

JavaScript включает стандартную библиотеку объектов, например, Array, Date и Math, а также базовый набор языковых элементов, например, операторы и управляющие конструкции. Ядро JavaScript может быть расширено для различных целей путем добавления в него новых объектов, например:

- - - -

JavaScript и Java

- -

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

- -

В отличие от системы скомпилированных классов Java, построенной на объявлениях, JavaScript поддерживает систему исполнения, основанную на небольшом числе типов данных, представляющих числовые, логические и строковые значения. JavaScript имеет объектную модель на базе прототипов вместо более общей модели на базе классов. Модель объектов на базе прототипов предоставляет динамическое наследование, т.е. то, что наследуется, может отличаться для отдельных объектов. JavaScript также поддерживает функции без каких-либо специальных декларативных требований. Функции могут быть свойствами объектов, выполняться как свободно-типизированные методы.

- -

По сравнению с Java, JavaScript является языком с очень свободной формой. Вам не надо объявлять переменные, классы и методы. Вам не надо беспокоиться о том, являются ли методы публичными (public), приватными (private) или защищенными (protected), а также вам не надо реализовывать интерфейсы. Переменные, параметры и возвращаемые функциями типы не являются явно типизированными.

- -

Java — это язык программирования, основанный на классах и предназначенный для быстрого выполнения и безопасности типов. Безопасность типов означает, например, что вы не можете привести тип integer к типу object reference или получить доступ к приватной памяти, изменяя байт-код Java. Ориентированная на классы модель Java означает, что программы состоят исключительно из классов и их методов. Наследование классов и строгая типизация в Java обычно требуют тесно связанные иерархии объектов. Эти требования делают программирование на Java более комплексным, чем программирование на JavaScript.

- -

По духу JavaScript происходит от небольших, динамически типизированных языков, таких как HyperTalk и dBASE. Эти скриптовые языки предлагают инструменты программирования для гораздо более широкой аудитории благодаря более простому синтаксису, специализированной встроенной функциональности и минимальным требованиям для создания объектов.

- - - - - - - - - - - - - - - - - - - - - - - -
Сравнение JavaScript и Java
JavaScriptJava
Объектно-ориентированный. Нет различий между типами объектов. Наследование реализовано через механизм прототипов, свойства и методы могут быть добавлены в любой объект динамически.На базе классов. Объекты делятся на классы и экземпляры с наследованием через классовую иерархию. Классы и экземпляры не могут иметь динамически добавленные свойства или методы.
Типы данных переменных не объявляются (динамическая типизация).Типы данных переменных должны быть объявлены (статическая типизация).
Не может автоматически записывать на жесткий диск.Может автоматически записывать на жесткий диск.
- -

Для получения дополнительной информации о различиях между JavaScript и Java, прочитайте Details of the object model.

- -

JavaScript и спецификация ECMAScript

- -

JavaScript стандартизирован европейской ассоциацией Ecma International, деятельность которой посвящена стандартизации информационных и коммуникационных систем (изначально ECMA являлся акронимом European Computer Manufacturers Association). Эта стандартизированная версия JavaScript, называемая ECMAScript, работает одинаково во всех приложениях, поддерживающих стандарт. Компании могут использовать открытый стандарт языка, чтобы разработать собственную реализацию JavaScript. Стандарт ECMAScript задокументирован в спецификации ECMA-262. Чтобы узнать больше информации о разных версиях JavaScript и ECMAScript, прочитайте Что нового в JavaScript.

- -

Стандарт ECMA-262 также утвержден ISO (International Organization for Standardization) как ISO-16262. Вы можете найти спецификацию на сайте Ecma International. Спецификация ECMAScript не описывает Document Object Model (DOM), которая стандартизирована World Wide Web Consortium (W3C). DOM определяет способ для доступа к объектам HTML документа из вашего скрипта. Чтобы получить более точное представление о различных технологиях, используемых при программировании на JavaScript, прочитайте Обзор JavaScript.

- -

Документация JavaScript против спецификации ECMAScript

- -

Спецификация ECMAScript — это набор требований, касающихся реализации ECMAScript. Она предназначена для реализации языковых возможностей, соответствующих стандарту, в вашей реализации ECMAScript или движке (например, SpiderMonkey в Firefox или V8 в Google Chrome).

- -

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

- -

Спецификация ECMAScript использует терминологию и синтаксис, которые могут быть незнакомы JavaScript-программистам. Хотя описание языка может отличаться в ECMAScript, но сам язык остается таким же. JavaScript поддерживает всю функциональность, описанную в спецификации ECMAScript.

- -

Документация JavaScript описывает аспекты языка, являющиеся подходящими для JavaScript-программиста.

- -

Начинаем знакомство с JavaScript

- -

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

- -

В Firefox встроены два инструмента, полезных для экспериментирования с JavaScript: Web Console и Scratchpad.

- -

Web Console

- -

Web Console отображает информацию о текущей загруженной веб-странице, а также включает командную строку, которую вы можете использовать, чтобы выполнить выражения JavaScript на текущей странице.

- -

Чтобы открыть Web Console, выберите "Web Console" из меню "Web Developer", которое находится под меню "Tools" в Firefox. Консоль появится в нижней части окна браузера. Вдоль нижней части консоли размещается командная строка, которую вы можете использовать для ввода JavaScript, результат выполнения появится на панели выше:

- -

- - - -
function greetMe(yourName) {
-  alert('Hello ' + yourName);
-}
-console.log(eval('3 + 5'));
- - - -

Scratchpad

- -

Web Console отлично подходит для выполнения одиночных строк JavaScript, но хотя вы можете выполнить и несколько строк, это не очень удобно, к тому же вы не можете сохранить ваш код, используя Web Console. Поэтому для более комплексных примеров Scratchpad является более подходящим инструментом.

- -

Чтобы открыть Scratchpad(Shift+F4), выберите "Scratchpad" из меню "Web Developer", которое находится под меню "Tools" в Firefox. Блокнот будет открыт в отдельном окне, вы можете использовать его для создания и выполнения JavaScript в браузере. Вы также можете сохранять ваши скрипты на жесткий диск, а потом загружать их.

- -

Если вы выберете "Display", то код в вашем блокноте будет выполнен в браузере, а результат вставлен обратно в блокнот как комментарий:

- -

- -

Hello world

- -

Чтобы начать писать JavaScript код откройте Scratchpad и напишите свой первый "Hello World!" код:

- -
(function(){
-  "use strict";
-  /* Start of your code */
-  function greetMe(yourName) {
-    alert('Hello ' + yourName);
-  }
-
-  greetMe('World');
-  /* End of your code */
-})();
- -

Выберите код на панели и зажмите Ctrl + R, чтобы открыть код в браузере! На следующих страницах мы изучим синтаксис  и возможности JS, чтобы вы могли написать сложное более сложное приложение. Не забывайте добавлять перед кодом (function(){"use strict"; и })();  после. вы узнаете, что это означает, а пока считайте, что это —

- -

1.  Значительно улучшает производительность

- -

2.  Предотвращает структуры, которые могут запутать вас на начальном этапе.

- -

3.  Предотвращает взаимодействие фрагментов кода, выполняемых в консоли.

- -

{{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammar_and_types")}}

diff --git "a/files/ru/web/javascript/guide/\320\276\320\261_\321\215\321\202\320\276\320\274_\321\200\321\203\320\272\320\276\320\262\320\276\320\264\321\201\321\202\320\262\320\265/index.html" "b/files/ru/web/javascript/guide/\320\276\320\261_\321\215\321\202\320\276\320\274_\321\200\321\203\320\272\320\276\320\262\320\276\320\264\321\201\321\202\320\262\320\265/index.html" deleted file mode 100644 index 397327911c..0000000000 --- "a/files/ru/web/javascript/guide/\320\276\320\261_\321\215\321\202\320\276\320\274_\321\200\321\203\320\272\320\276\320\262\320\276\320\264\321\201\321\202\320\262\320\265/index.html" +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: Об этом руководстве -slug: Web/JavaScript/Guide/Об_этом_руководстве ---- -

 

-

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

-

Новые возможности в версиях JavaScript

-
/* Note: To add a link to new JavaScript version description
-add version number to versionList variable below. The page linked to
-must reside in /en/JavaScript/New_in_JavaScript/N, where N is version number. */
-
-var versionList = ["1.5", "1.6", "1.7", "1.8", "1.8.1", "1.8.5"];
-var s = "";
-<ul>
-  foreach (var i in versionList){
-    let s = "/en/JavaScript/New_in_JavaScript/" .. i;
-    <li>web.link(s, wiki.getPage(s).title)</li>;
-  }
-</ul>;
-
-

То, что вы должны уже знать

-

This guide assumes you have the following basic background:

- -

Некоторый опыт программирования на языках, таких как C или Visual Basic, полезен, но не обязателен.

-

Версии JavaScript

- -
Таблица №1 версии JavaScript и веб-браузера Navigator
JavaScript version Navigator version
JavaScript 1.0 Navigator 2.0
JavaScript 1.1 Navigator 3.0
JavaScript 1.2 Navigator 4.0-4.05
JavaScript 1.3 Navigator 4.06-4.7x
JavaScript 1.4  
JavaScript 1.5 Navigator 6.0
Mozilla (браузер с открытым исходным кодом)
JavaScript 1.6 Firefox 1.5, other Mozilla 1.8-based products
JavaScript 1.7 Firefox 2, other Mozilla 1.8.1-based products
JavaScript 1.8 Firefox 3, other Gecko 1.9-based products
-

 

-
Каждая версия Netscape Enterprise Server, также поддерживает различные версии JavaScript. Чтобы помочь вам писать сценарии, которые совместимы с несколькими версиями Enterprise Server, это руководство использует аббревиатуру для обозначения версии сервера, в котором каждая функция была реализована.
-
- -
Таблица №2 Аббревиатуры в версиях Netscape Enterprise Server
Аббревиатура Версия Server Enterprise
NES 2.0 Netscape Enterprise Server 2.0
NES 3.0 Netscape Enterprise Server 3.0
-

Где найти информацию о JavaScript

-

JavaScript документация включает в себя следующие книги:

- -

Если вы новичок в JavaScript, начните с руководства JavaScript. Если у вас есть твердое понимание основы, вы можете использовать Справочник по JavaScript чтобы получить более подробную информацию на отдельных объектах и ​​операторах.

-

Советы для изучения JavaScript

-

Начало работы с JavaScript очень просто: все, что вам нужно, это современный веб-браузер. Это руководство включает в себя некоторые функции JavaScript, которые только в настоящее время доступна в последней версии Firefox (и других браузеров с движком Gecko), поэтому рекомендуется использование самых последних версий Firefox.

-

Интерактивный интерпретатор

-

Диалоговый JavaScript незамедлительно - неоценимая помощь изучению языка, так как это предоставляет вам возможность пробовать вещи в интерактивном режиме без необходимости сохранить файл и обновить страницу. Ошибочная Консоль Firefox, доступная через меню Инструменты, обеспечивает простой путь пробовать диалоговый JavaScript: Только вводят линию кода и щелкают кнопку "Evaluate".

-

Image:ErrorConsole.png

-

Firebug

-

Более передовой диалоговый незамедлительно - доступный использующий Firebug, дополнение к Firefox. Выражения, которые вы печатаете, интерпретируются как объекты и связанные с другими частями Firebug. Например, вы можете добавить 5 плюс 5, изменять регистр строки, get a clickable link to the document, or get a link to an element:

-

-

Использование стрелки на правом нижнем углу дает команду редактор для многострочного сценариев.

-

Firebug also provides an advanced DOM inspector, a JavaScript debugger, a profiling tool and various other utilities. JavaScript code running in a Web page can call, console.log(), a function that prints its arguments to the Firebug console.

-

Many of the examples in this guide use alert() to show messages as they execute. If you have Firebug installed you can use console.log() in place of alert() when running these examples.

-

Document conventions

-

JavaScript applications run on many operating systems; the information in this book applies to all versions. File and directory paths are given in Windows format (with backslashes separating directory names). For Unix versions, the directory paths are the same, except that you use slashes instead of backslashes to separate directories.

-

This guide uses uniform resource locators (URLs) of the following form:

-

http://server.domain/path/file.html

-

In these URLs, server represents the name of the server on which you run your application, such as research1 or www; domain represents your Internet domain name, such as netscape.com or uiuc.edu; path represents the directory structure on the server; and file.html represents an individual file name. In general, items in italics in URLs are placeholders and items in normal monospace font are literals. If your server has Secure Sockets Layer (SSL) enabled, you would use https instead of http in the URL.

-

This guide uses the following font conventions:

- -
autoPreviousNext("JSGChapters");
-wiki.languages({
-  "zh-tw": "zh_tw/Core_JavaScript_1.5_教學/關於",
-  "es": "es/Gu\u00eda_JavaScript_1.5/Acerca_de_esta_gu\u00eda",
-  "fr": "fr/Guide_JavaScript_1.5/\u00c0_propos",
-  "ja": "ja/Core_JavaScript_1.5_Guide/About",
-  "ko": "ko/Core_JavaScript_1.5_Guide/About",
-  "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/O_tym_przewodniku",
-  "zh-cn": "cn/Core_JavaScript_1.5_Guide/\u5173\u4e8e"
-})
-
diff --git "a/files/ru/web/javascript/guide/\321\206\320\270\320\272\320\273\321\213_\320\270_\320\270\321\202\320\265\321\200\320\260\321\206\320\270\320\270/index.html" "b/files/ru/web/javascript/guide/\321\206\320\270\320\272\320\273\321\213_\320\270_\320\270\321\202\320\265\321\200\320\260\321\206\320\270\320\270/index.html" deleted file mode 100644 index 231bc70804..0000000000 --- "a/files/ru/web/javascript/guide/\321\206\320\270\320\272\320\273\321\213_\320\270_\320\270\321\202\320\265\321\200\320\260\321\206\320\270\320\270/index.html" +++ /dev/null @@ -1,362 +0,0 @@ ---- -title: Циклы и итерации -slug: Web/JavaScript/Guide/Циклы_и_итерации -tags: - - for - - операторы цикла - - циклы -translation_of: Web/JavaScript/Guide/Loops_and_iteration ---- -
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Control_flow_and_error_handling", "Web/JavaScript/Guide/Functions")}}
- -

Циклы - простой способ сделать какое-то действие несколько раз. Эта глава руководства JavaScript Guide познакомит вас с различными операторами доступными в JavaScript.

- -

Вы можете представить цикл в виде компьютеризированной версии игры, где вы говорите кому-то сделать X шагов в одном направлении, затем Y шагов в другом; для примера, идея игры "Иди 5 шагов на восток" может быть выражена в виде цикла:

- -
var step;
-for (step = 0; step < 5; step++) {
-  // Запускается 5 раз, с шагом от 0 до 4.
-  console.log('Идём 1 шаг на восток');
-}
-
- -

Существует множество различных видов циклов, но все они по сути делают тоже самое: повторяют какое-либо действие несколько раз (не забывайте про нулевой раз повторения, отсчёт в массиве начинается с 0). Различные по строению циклы предлагают разные способы для определения начала и окончания цикла. Для различных задач программирования существуют свои операторы цикла, с помощью которых они решаются намного проще.

- -

Операторы предназначеные для организации циклов в  JavaScript:

- - - -

Цикл for 

- -

Цикл for  повторяет действия, пока не произойдёт какое-либо специальное событие завершения цикла. Оператор for в JavaScript аналогичен оператору for в Java и C. Объявление оператора for выглядит следующим образом:

- -
for ([начало]; [условие]; [шаг]) выражения
-
- -

При его выполнении происходит следущее:

- -
    -
  1. Выполняется выражение начало, если оно указано. Это выражение обычно инициализирует один или несколько счётчиков, но синтаксис позволяет выражению быть любой сложности. Также используется для объявления переменных.
    2. -
  2. Выполняется условие. Если условие истинно, то выполняются выражения. Если оно ложно, цикл for прерывается. Если же условие полностью пропущено, то оно считается истинным.
    3. -
  3. Выполняются выражения. Чтобы выполнить несколько выражений, используются блок-выражение  { ... }  для группировки выражений.
    4. -
  4. Обновляется шаг, если он есть, а затем управление возвращается к шагу 2.
    5. -
- -

Пример

- -

В следующей функции есть цикл for, который считает количество выбранных жанров в списке прокрутки (элемент {{HTMLElement("select")}}, который позволяет выбрать несколько элементов). Цикл for объявляет переменную i и задаёт ей значение 0. Также он проверяет, что i меньше количества элементов в элементе <select>, выполняет оператор if и увеличивает i на один после каждого прохода цикла.

- -
<form name="selectForm">
-  <p>
-    <label for="musicTypes">Выберите некоторые жанры музыки, а затем нажмите на кнопку ниже:</label>
-    <select id="musicTypes" name="musicTypes" multiple="multiple">
-      <option selected="selected">R&B</option>
-      <option>Jazz</option>
-      <option>Blues</option>
-      <option>New Age</option>
-      <option>Classical</option>
-      <option>Opera</option>
-    </select>
-  </p>
-  <p><input id="btn" type="button" value="Как много выбрано?" /></p>
-</form>
-
-<script>
-function howMany(selectObject) {
-  var numberSelected = 0;
-  for (var i = 0; i < selectObject.options.length; i++) {
-    if (selectObject.options[i].selected) {
-      numberSelected++;
-    }
-  }
-  return numberSelected;
-}
-
-var btn = document.getElementById("btn");
-btn.addEventListener("click", function(){
-  alert('Выбрано элементов: ' + howMany(document.selectForm.musicTypes))
-});
-</script>
-
-
- -

Цикл do...while 

- -

Цикл do...while повторяется пока заданное условие истинно. Оператор do...while имеет вид:

- -
do
-  выражения
-while (условие);
-
- -

выражения выполняются пока условие истинно. Чтобы использовать несколько выражений, используйте блок-выражение  { ... }, чтобы сгруппировать их. Если условие истинно, выражения выполнятся снова. В конце каждого прохода условие проверяется. Если условие ложно, выполнение приостанавливается и управление передаётся выражению после do...while.

- -

Пример

- -

В следующем примере, цикл do выполнится минимум 1 раз и запускается снова, пока i меньше 5.

- -
do {
-  i += 1;
-  console.log(i);
-} while (i < 5);
- -

Цикл while

- -

Цикл while выполняет выражения пока условие истинно. Выглядит он так:

- -
while (условие)
-  выражения
-
- -

Если условие становится ложным, выражения в цикле перестают выполняться и управление переходит к выражению после цикла.

- -

Условие проверяется на истинность до того, как выполняются выражения в цикле. Если условие истинно, выполняются выражения, а затем условие проверяется снова. Если условие ложно, выполнение приостанавливается и управление переходит к выражению после while.

- -

Чтобы использовать несколько выражений, используйте блок выражение { ... }, чтобы сгруппировать их.

- -

Пример 1

- -

Следующий цикл while работает, пока n меньше трёх:

- -
var n = 0;
-var x = 0;
-while (n < 3) {
-  n++;
-  x += n;
-}
-
- -

С каждой итерацией, цикл увеличивает n и добавляет это значение к x. Поэтому, x и n получают следующие значения:

- - - -

После третьего прохода, условие n < 3 становится ложным, поэтому цикл прерывается.

- -

Пример 2

- -

Избегайте бесконечных циклов. Убедитесь, что условие цикла в итоге станет ложным; иначе, цикл никогда не прервётся. Выражения в следующем цикле while будут выполняться вечно, т.к. условие никогда не станет ложным:

- -
while (true) {
-  console.log("Hello, world");
-}
- -

Метка (label)

- -

Метка представляет собой оператор с индентификатором, который позволяет вам ссылаться на какое-то место в вашей программе. Например, вы можете использовать метку, чтобы обозначить цикл, а затем использовать операторы break или continue, чтобы указать, должна ли программа прерывать цикл или продолжать его выполнение.

- -

Синтаксис метки следующий:

- -
метка :
-   оператор
-
- -

Значение метки может быть любым корректным JavaScript индентификатором, не являющимся зарезервированным словом. Оператор, указанный вами после метки может быть любым выражением.

- -

Пример

- -

В этом примере, метка markLoop обозначает цикл while.

- -
markLoop:
-while (theMark == true) {
-   doSomething();
-}
- -

break

- -

Используйте оператор break, чтобы прерывать цикл, переключать управление или в сочетании с оператором метка.

- - - -

Синтаксис оператора может быть таким:

- -
    -
  1. break;
    2. -
  2. break Метка;
    3. -
- -

Первая форма синтаксиса прерывает цикл совсем или переключает управление; вторая прерывает специально обозначенное выражение.

- -

Пример 1

- -

Следующий пример проходит по элементам в массиве, пока не найдёт элемент, чьё значение - theValue:

- -
for (i = 0; i < a.length; i++) {
-  if (a[i] == theValue) {
-    break;
-  }
-}
- -

Пример 2: Прерывание метки

- -
var x = 0;
-var z = 0
-labelCancelLoops: while (true) {
-  console.log("Внешний цикл: " + x);
-  x += 1;
-  z = 1;
-  while (true) {
-    console.log("Внутренний цикл: " + z);
-    z += 1;
-    if (z === 10 && x === 10) {
-      break labelCancelLoops;
-    } else if (z === 10) {
-      break;
-    }
-  }
-}
-
- -

continue

- -

Оператор continue используется, чтобы шагнуть на шаг вперёд в циклах while, do-while, for или перейти к метке.

- - - -

Синтаксис continue может выглядеть так:

- -
    -
  1. continue;
    2. -
  2. continue Метка;
    3. -
- -

Пример 1

- -

Следующий пример показывает цикл while с оператором continue, который срабатывает, когда значение i равно 3. Таким образом, n получает значения 1, 3, 7 и 12.

- -
var i = 0;
-var n = 0;
-while (i < 5) {
-  i++;
-  if (i == 3) {
-    continue;
-  }
-  n += i;
-}
-
- -

Пример 2

- -

Выражение, отмеченное checkiandj содержит выражение отмеченное checkj. При встрече с continue, программа прерывает текущую итерацию checkj и начинает следующую итерацию. Каждый раз при встрече с continue, checkj переходит на следующую итерацию, пока условие возвращает false. Когда возвращается false, после вычисления остатка от деления checkiandj, checkiandj переходит на следующую итерацию, пока его условие возвращает false. Когда возвращается false, программа продолжает выполнение с выражения после checkiandj.

- -

Если у continue проставлена метка checkiandj, программа может продолжиться с начала метки checkiandj.

- -
checkiandj:
-  while (i < 4) {
-    console.log(i);
-    i += 1;
-    checkj:
-      while (j > 4) {
-        console.log(j);
-        j -= 1;
-        if ((j % 2) != 0) {
-          continue checkj;
-        }
-        console.log(j + " чётное.");
-      }
-      console.log("i = " + i);
-      console.log("j = " + j);
-  }
- -

for...in 

- -

Оператор for...in проходит по всем перечислимым свойствам объекта. JavaScript выполнит указанные выражения для каждого отдельного свойства. Цикл for...in выглядит так:

- -
for (variable in object) {
-  выражения
-}
-
- -

Пример

- -

Следующая функция берёт своим аргументом объект и его имя. Затем проходит по всем свойствам объекта и возвращает строку, которая содержит имена свойств и их значения.

- -
function dump_props(obj, obj_name) {
-  var result = "";
-  for (var i in obj) {
-    result += obj_name + "." + i + " = " + obj[i] + "<br>";
-  }
-  result += "<hr>";
-  return result;
-}
-
- -

Для объекта car со свойствами make и model, результатом будет:

- -
car.make = Ford
-car.model = Mustang
-
- -

Пример №2

- -

Также, по ключу можно выводить значение:

- -
let obj = {model: 'AUDI A8', year: '2019', color: 'brown'}
-
-for (key in obj) {
-  console.log(`${key} = ${obj[key]}`);
-}
-// model = AUDI A8
-// year = 2019
-// color = brown
- -

Массивы

- -

Хотя, очень заманчиво использовать for...in как способ пройтись по всем элементам {{jsxref("Array")}}, этот оператор возвращает имя свойств определённых пользователем помимо числовых индексов. Таким образом лучше использовать стандартный for для числовых индексов при взаимодействии с массивами, поскольку оператор for...in проходит по определённым пользователем свойствам в дополнение к элементам массива, если вы изменяете массив, например, добавляете свойства и методы.

- -

Пример

- -
let arr = ['AUDI A8', '2019', 'brown'];
-arr.cost = '$100.000';
-
-for (key in arr) {
-  console.log(`${key} = ${arr[key]}`);
-}
-
-// 0 = AUDI A8
-// 1 = 2019
-// 2 = brown
-// cost = $100.000
-
- -

for...of

- -

Оператор for...of создаёт цикл, проходящий по перечислимым объектам (включая {{jsxref("Array")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, объект arguments и так далее), вызывая на каждой итерации функцию с выражениями, которые надо выполнить для получения значения каждого отдельного свойства.

- -
for (variable of object) {
-  выражения
-}
- -

Следующий пример показывает разницу между циклами for...of и for...in. Тогда как for...in проходит по именам свойств, for...of проходит по значениям свойств:

- -
let arr = [3, 5, 7];
-arr.foo = "hello";
-
-for (let i in arr) {
-   console.log(i); // выводит "0", "1", "2", "foo"
-}
-
-for (let i of arr) {
-   console.log(i); // выводит "3", "5", "7"
-}
-
- -

{{PreviousNext("Web/JavaScript/Guide/Control_flow_and_error_handling", "Web/JavaScript/Guide/Functions")}}

-- cgit v1.2.3-54-g00ecf