fix(guide): simplify directory structure

This commit is contained in:
Mrugesh Mohapatra
2018-10-16 21:26:13 +05:30
parent f989c28c52
commit da0df12ab7
35752 changed files with 0 additions and 317652 deletions

View File

@@ -0,0 +1,129 @@
---
title: JavaScript Tutorials and Other Resources
localeTitle: Учебники по JavaScript и другие ресурсы
---
* [JavaScript для кошек](http://jsforcats.com/)
* [Современный учебник по JavaScript](https://javascript.info/)
* [Преимущественное руководство профессора Фрисби по функциональному программированию](https://github.com/DrBoolean/mostly-adequate-guide)
* [Красноречивый Javascript](http://www.eloquentjavascript.net) ( [_аннотированный_](https://watchandcode.com/courses/eloquent-javascript-the-annotated-version) )
* [Говорящий Javascript](http://speakingjs.com/es5/)
* [Изучение ES6](http://exploringjs.com/es6/)
* [Udemy - Javascript Понимание странных частей ( _первые 3,5 часа_ )](https://www.youtube.com/watch?v=Bv_5Zv5c-Ts)
* [Функциональное программирование в JavaScript](https://www.youtube.com/playlist?list=PL0zVEGEvSaeEd9hlmCXrk5yUyqUag-n84)
* [Введение в JavaScript: первые шаги](https://www.educative.io/collection/5679346740101120/5720605454237696?authorName=Arnav%20Aggarwal)
* [Видео Дугласа Крокфорда](https://www.youtube.com/watch?v=v2ifWcnQs6M&index=1&list=PL62E185BB8577B63D)
* [Современный JS Cheatsheet](https://mbeaudru.github.io/modern-js-cheatsheet/)
* [50 лучших веб-сайтов для изучения JavaScript](http://www.codeconquest.com/blog/top-50-websites-to-learn-javascript/)
* [Учебник по Codementor JavaScript](https://www.codementor.io/community/topic/javascript)
* [Вам не нужно jQuery](http://youmightnotneedjquery.com/)
## Рекомендации
* [DevDocs](http://devdocs.io)
* [Скриншот OverAPI JavaScript](http://overapi.com/javascript)
* [ECMA-262](http://www.ecma-international.org/publications/standards/Ecma-262.htm)
* [Сеть разработчиков Mozilla (MDN)](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
Найти библиотеки javascript на [странице http://jster.net](http://jster.net)
## Быстрый JavaScript
* [REPL](https://repl.it/languages/Javascript) ( [_узел_](https://repl.it/languages/iojs/) )
* [JSBin](http://jsbin.com)
* [JSFiddle](https://jsfiddle.net)
* [CodePen](http://codepen.io)
* [CoderPad ( _парное программирование_ )](http://coderpad.io)
* [C9 ( _IDE_ , _парное программирование_ )](http://c9.io)
* [Объектная игровая площадка ( _визуализация объектов_ )](http://www.objectplayground.com/)
* [Plunker](http://plnkr.co)
## проблемы
* [Code Wars](http://codewars.com)
* [Рейтинг Хакер](https://hackerrank.com)
* [Кодирование игры](http://codingame.com)
* [CodeFights](https://codefights.com/home)
* [ES6 Katas](http://es6katas.org)
## Учебники
* [Codecademy](https://www.codecademy.com)
* [RithmSchool](https://www.rithmschool.com)
## упражнения
* [Codility](https://codility.com/programmers/lessons/)
* [Coderbyte](http://coderbyte.com)
* [Exercism](http://exercism.io)
* [JavaScript30](https://javascript30.com/)
* [Javascript.com (Pluralsight)](https://www.javascript.com/)
## редакторы
* [Код Visual Studio](https://code.visualstudio.com/)
Код Visual Studio включает встроенную поддержку для завершения кода IntelliSense, понимание и навигацию по богатому семантическому коду и рефакторинг кода. Он поставляется со встроенным отладчиком и поддержкой git и имеет множество расширений.
* [WebStorm](https://www.jetbrains.com/webstorm/)
Полнофункциональная среда IDE для Javascript, включая завершение кода и поддержку живой переливы, контроля версий и тестирования. Сделано Jet Brains и смоделировано после их IntelliJ Java IDE.
* [Скобки](http://brackets.io)
* [Атом](http://atom.io)
Текстовый редактор с открытым исходным кодом, созданный GitHub.
* [Возвышенный текст](https://www.sublimetext.com/)
## Блоги
* [Перфекция убивает](http://perfectionkills.com)
* [2ality](http://www.2ality.com/)
* [Коллекция JS на Medium](https://medium.com/the-javascript-collection)
* [Дэвид Уолш](https://davidwalsh.name/)
* [superheroJS](http://superherojs.com/)
## Подкасты
* [JS Jabber](https://devchat.tv/js-jabber)
## Видеоуроки
* [Дерек Банас учит JS в одном видео](https://www.youtube.com/watch?v=fju9ii8YsGs)
* [Объектно-ориентированный JavaScript Derek Banas](https://www.youtube.com/watch?v=O8wwnhdkPE4)
## книги
* [Секреты JavaScript-ниндзя](https://www.manning.com/books/secrets-of-the-javascript-ninja)
* [Программирование приложений JavaScript](http://pjabook.com/)
* [Доступный JavaScript](http://shop.oreilly.com/product/0636920025245.do)
* [Изучение шаблонов проектирования JavaScript](http://addyosmani.com/resources/essentialjsdesignpatterns/book/)
* [Руководство по стилю JavaScript для Airbnb](https://github.com/airbnb/javascript)
* [JSDoc](http://usejsdoc.org/)
* [Javascript Allonge Six](https://leanpub.com/javascriptallongesix/read)
* [Вы не знаете JS](https://github.com/getify/You-Dont-Know-JS)
6 книг по JavaScript Кайла Симпсона. От новичка до продвинутого.
* [Красноречивый Javascript](http://www.eloquentjavascript.net)
Фантастическое, основательное введение в основы и особенности Javascript, в комплекте с интерактивным кодом в браузере
* [Преимущественное руководство профессора Фрисби по функциональному программированию](https://github.com/DrBoolean/mostly-adequate-guide)
Подробное подробное руководство по функциональному программированию в Javascript
* [Путь JavaScript](https://github.com/bpesquet/thejsway)
* [Функциональный свет JS](https://github.com/getify/Functional-Light-JS)
Эта книга предназначена для того, чтобы быть полезным компаньоном для тех, кто хочет (повторно) обнаружить множество аспектов JavaScript. С самого начала программирования до интерфейсного и внутреннего веб-разработки многие темы охватываются простым и доступным способом. Никаких предварительных знаний не требуется!

View File

@@ -0,0 +1,24 @@
---
title: Advantages and Disadvantages of JavaScript
localeTitle: Преимущества и недостатки JavaScript
---
# Преимущества и недостатки JavaScript
Как и все языки компьютера, JavaScript имеет определенные преимущества и недостатки. Многие из плюсов и минусов связаны с JavaScript, выполняемым часто в браузере клиента, но есть и другие способы использования JavaScript, которые позволяют ему иметь те же преимущества на серверных языках.
## Преимущества JavaScript
* **Скорость** . Клиентский JavaScript очень быстрый, потому что его можно запустить сразу же в клиентском браузере. Если внешние ресурсы не требуются, JavaScript не требует сетевых вызовов на серверный сервер. Он также не нуждается в компиляции на стороне клиента, что дает ему определенные преимущества скорости (предоставляется, добавляя некоторый риск, зависящий от этого качества разработанного кода).
* **Простота** . JavaScript относительно прост в освоении и реализации.
* **Популярность** . JavaScript используется везде в Интернете. Ресурсов для изучения JavaScript много. В StackOverflow и GitHub есть много проектов, которые используют Javascript, и в целом в последние годы язык в целом приобрел большую популярность в отрасли.
* **Взаимодействие** . JavaScript отлично работает с другими языками и может использоваться в самых разных приложениях. В отличие от скриптов PHP или [SSI](https://en.wikipedia.org/wiki/Server_Side_Includes) , JavaScript можно вставлять на любую веб-страницу независимо от расширения файла. JavaScript также можно использовать внутри скриптов, написанных на других языках, таких как Perl и PHP.
* **Загрузка сервера** . Клиентская сторона снижает спрос на сервере веб-сайта.
* **Богатые интерфейсы** . Перетаскивание компонентов или слайдер может дать богатый интерфейс вашему сайту.
* **Расширенная функциональность** . Сторонние дополнения, такие как Greasemonkey, позволяют разработчикам JavaScript писать фрагменты JavaScript, которые могут выполняться на желаемых веб-страницах для расширения его функциональности.
* **Универсальность** . В настоящее время существует множество способов использования JavaScript через серверы Node.js. Если вы загрузили node.js с помощью Express, используйте базу данных документов, такую ​​как mongodb, и используйте JavaScript в интерфейсе для клиентов, вы можете создать приложение JavaScript полностью из одного окна вперед, используя только JavaScript.
* **Обновления** . С момента появления EcmaScript 5 (спецификация скриптов, на которую опирается Javascript), Ecma International ежегодно занимается обновлением JavaScript. До сих пор мы получили поддержку браузера для ES6 в 2017 году и надеемся, что ES7 будет поддерживаться в будущем.
## Недостатки JavaScript
* **Безопасность на стороне клиента** . Поскольку код выполняется на компьютере пользователя, в некоторых случаях он может быть использован для вредоносных целей. Это одна из причин, по которой некоторые люди могут отключить Javascript.
* **Поддержка браузера** . JavaScript иногда интерпретируется по-разному разными браузерами. В то время как серверные сценарии всегда будут производить одинаковый вывод, клиентские скрипты могут быть немного непредсказуемыми. Не будьте слишком обеспокоены этим, хотя - пока вы тестируете свой скрипт во всех основных браузерах, вы должны быть в безопасности. Кроме того, есть службы, которые позволят вам проверить свой код автоматически при проверке обновления, чтобы убедиться, что все браузеры поддерживают ваш код.

View File

@@ -0,0 +1,65 @@
---
title: Angularjs Interview Questions
localeTitle: Вопросы интервью Angularjs
---
# Вопросы интервью Angularjs
Вот список понятий, которые часто задают в интервью Angularjs.
* Что такое AngularJS?
* Что такое контроллер просмотра модели (MVC)?
* Двусторонняя привязка данных
* Что такое инъекция зависимости и как она работает?
* Что такое $ scope в AngularJS?
* Что такое $ rootScope в AngularJS?
* Как реализовать маршрутизацию в угловом?
* Объяснить директивы
* Как мы можем создать настраиваемую директиву в Angular?
* Объясните разницу между обслуживанием и фабрикой
* Объясните услугу $ q, отложенные и обещания
# Примеры вопросов и ответов
Вопрос: Перечислите Директивы в AngularJS? Ответ: ngBind, ngModel, ngClass, ngApp, ngInit, ngRepeat
Вопрос: Что такое $ scope в AngularJS? Ответ: $ scope в AngularJS - это объект, который относится к модели приложения. Это объект, который связывает представление (элемент DOM) с контроллером. В контроллере доступ к данным модели осуществляется через объект $ scope. Как известно, AngularJS поддерживает шаблон MV \*, объект $ scope становится моделью MV \*.
Вопрос: Что такое SPA (одностраничное приложение) в AngularJS? Ответ. Приложения с одной страницей (SPA) - это веб-приложения, которые загружают одну страницу HTML и динамически обновляют эту страницу, когда пользователь взаимодействует с приложением. SPA используют AJAX и HTML для создания гибких и гибких веб-приложений без постоянной перезагрузки страницы. Однако это означает, что большая часть работы происходит на стороне клиента, в JavaScript. Одна страница HTML здесь означает страницу ответа UI с сервера. Источником могут быть ASP, ASP.NET, ASP.NET MVC, JSP и т. Д. Однако одностраничное веб-приложение поставляется в виде одной страницы в браузере и обычно не требует перезагрузки страницы, поскольку пользователь переходит к различным частям приложения. Это обеспечивает более быструю навигацию, более эффективные сетевые передачи и лучшую общую производительность для конечного пользователя.
Вопрос: Что такое маршрутизация в AngularJS? Ответ. Маршрутизация является основной функцией в AngularJS. Эта функция полезна при создании SPA (Single Page Application) с несколькими видами. В приложении SPA все представления представляют собой разные Html-файлы, и мы используем Routing для загрузки различных частей приложения, и полезно разделить приложение логически и сделать его управляемым. Другими словами, Routing помогает нам разделить наше приложение на логические представления и связать их с разными контроллерами.
Вопрос: Объясните директиву ng-repeat. Ответ. Директива ng-repeat является наиболее часто используемой и очень полезной функцией Directular. Он выполняет итерацию по набору элементов и создает элементы DOM. Он постоянно контролирует источник данных для повторной обработки шаблона в ответ на изменение.
Вопрос: В чем разница между ng-If и ng-show / ng-hide. Ответ: директива ng-If отображает только элемент DOM, если условие истинно. где ng-show / ng-hide директива визуализирует элемент DOM, но он изменяет класс ng-hide / ng-show, чтобы сохранить видимость элемента на странице.
Вопрос: Как вы отменяете тайм-аут с помощью AngularJs? Ответ: $ timeout - оболочка AngularJs для window.setTimeout, вы отменяете тайм-аут, применяя функцию:
```
$timeout.cancel(function (){
// write your code.
});
```
Вопрос: Что такое инъекция зависимостей? Ответ: Dependency Injection (DI) - это шаблон разработки программного обеспечения, который касается того, как компоненты получают свои зависимости. Подсистема инжектора AngularJS отвечает за создание компонентов, разрешение их зависимостей и предоставление их другим компонентам по запросу.
Вопрос: Объясните директиву ng-App. Ответ. Директива ng-app запускает приложение AngularJS. Он определяет корневой элемент. Он автоматически инициализирует или загружает приложение, когда загружается веб-страница, содержащая приложение AngularJS. Он также используется для загрузки различных модулей AngularJS в приложении AngularJS.
Вопрос: Объясните директиву ng-init Ответ. Директива ng-init инициализирует данные приложения AngularJS. Он используется, чтобы поместить значения в переменные, которые будут использоваться в приложении. Например: В приведенном ниже примере мы инициализировали массив стран, используя синтаксис JSON для определения массива стран.
```html
<div ng-app = "" ng-init = "countries = [{locale:'en-US',name:'United States'}, {locale:'en-GB',name:'United Kingdom'}, {locale:'en-FR',name:'France'}]">
...
</div>
```
Вопрос: Как вы делитесь данными между контроллерами? Ответ. Создайте службу AngularJS, которая будет хранить данные и вводить их внутри контроллеров. Использование сервиса - самый чистый, быстрый и простой способ тестирования. Однако есть несколько других способов реализации обмена данными между контроллерами, например: - Использование событий - Использование $ parent, nextSibling, controllerAs и т. Д. Для прямого доступа к контроллерам - Использование $ rootScope для добавления данных (не очень хорошая практика)
Вопрос: В чем разница между директивами ng-if и ng-show / hide? Ответ: ng-if будет создавать и отображать элемент DOM, когда его условие истинно, если условие ложно или изменяется на false, оно не создаст или не уничтожит созданный. ng-show / hide всегда будет генерировать элемент DOM, но он применит свойство отображения css, основанное на оценке состояния.
#### Дополнительная информация:
Здесь вы можете найти другие вопросы и ответы:
* [Интервью с AngularJS](https://www.tutorialspoint.com/angularjs/angularjs_interview_questions.htm)
* [10 Интервью с AngularJS](https://www.upwork.com/i/interview-questions/angularjs/)
* [50 самых важных вопросов интервью AngularJS для 100% успеха](http://www.techbeamers.com/latest-angularjs-interview-questions-answers/)

View File

@@ -0,0 +1,79 @@
---
title: Arguments
localeTitle: аргументы
---
Объект arguments - это **объект, подобный массиву** _(в том, что структура объекта аналогична структуре массива, однако он не должен рассматриваться как массив, поскольку он обладает всеми функциональными возможностями объекта), в_ котором хранятся все аргументы, которые вы передается функции и, в частности, принадлежит этой функции. Если вы должны были передать 3 аргумента функции, скажем, `storeNames()` , эти 3 аргумента будут храниться внутри объекта с **аргументами,** и это будет выглядеть так, когда мы передадим аргументы `storeNames("Mulder", "Scully", "Alex Krycek")` к нашей функции:
* Сначала мы объявляем функцию и возвращаем объект arguments.
\`\` \`Javascript
function storeNames () {return arguments; }
```
* Then, when we execute that function with **n arguments**, 3 in this case, it will return the object to us and it will **look like** an array. We can convert it to an array, but more on that later...
```
Javascript // Если мы выполним следующую строку в консоли: storeNames («Малдер», «Скалли», «Алекс Крайчек»); // Выход будет {'0': 'Mulder', '1': 'Scully', '2': 'Alex Kryceck'}
```
If you want to know more about this, such as converting it to an array or the optimization problem that comes with using the _slice(_) method and how to solve it, click on **read more** (Gitter Chat Only).
## Treat it as an array
You can invoke arguments by using `arguments[n]` (where _n_ is the index of the argument in the array-like object) but if you want to use it as an array for iteration purposes or applying array methods to it, you need to _convert it to an array_ by declaring a variable and using the Array.prototype.slice.call method (because _arguments_ is not an array):
```
Javascript var args = Array.prototype.slice.call (аргументы);
// или способ es6: var args = Array.from (аргументы)
```
Since **slice()** has two (the parameter **end** is optional) parameters, you can grab a certain portion of the arguments by specifying (using the _slice.call()_ method renders these two parameters optional, not just _end_) the beginning and the ending of your portion; check out the following code:
```
Javascript функция getGrades () { var args = Array.prototype.slice.call (аргументы, 1, 3); return args; }
// Давайте выводим это! console.log (getGrades (90, 100, 75, 40, 89, 95));
// ВЫХОД ДОЛЖЕН БЫТЬ: // // \[100, 75\] <- Почему? Поскольку он начинался с индекса 1 и останавливался при индексе 3 // поэтому индекс 3 (40) не был учтен. // // Если мы удалим параметр «3», оставив только (аргументы, 1), мы получим // каждый аргумент из индекса 1: \[100, 75, 40, 89, 95\].
```
### Optimization issues with Array.slice()
There is a little problem, it's not recommended to use slice in the arguments object (optimization reasons)...
> **Important**: You should not slice on arguments because it prevents optimizations in JavaScript engines (V8 for example). Instead, try constructing a new array by iterating through the arguments object.
>
> _by_ **_Mozilla Developer Network_** <a href='https://developer.mozilla.org/ca/docs/Web/JavaScript/Reference/Functions/arguments' target='_blank' rel='nofollow'>(reference)<a>
So, what other method is available to convert _arguments_ to an array? I recommend the for-loop (not the for-in loop), you can do it like this:
```
Javascript var args = \[\]; // Пустой массив, сначала. for (var i = 0; i <arguments.length; i ++) { args.push (аргументы \[I\]) } // Теперь «args» - это массив, содержащий ваши аргументы. \`\` \`
Для получения дополнительной информации по вопросам оптимизации:
Убийцы оптимизации: [управляющие аргументы](https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments)
### Параметр остатка ES6 как способ обхода объекта аргументов
В ES2015 / ES6 можно использовать параметр rest ( `...` ) вместо объекта arguments в большинстве мест. Скажем, у нас есть следующая функция (не-ES6):
```
function getIntoAnArgument() {
var args = arguments.slice();
args.forEach(function(arg) {
console.log(arg);
});
}
```
Эту функцию можно заменить в ES6:
```
function getIntoAnArgument(...args) {
args.forEach(arg => console.log(arg));
}
```
обратите внимание, что мы также использовали функцию стрелки для сокращения обратного вызова forEach!
Объект arguments недоступен внутри тела функции стрелки.
Параметр rest всегда должен быть последним аргументом в определении вашей функции.
`function getIntoAnArgument(arg1, arg2, arg3, ...restOfArgs /*no more arguments allowed here*/) { //function body }`

View File

@@ -0,0 +1,128 @@
---
title: Arithmetic Operation
localeTitle: Арифметическая операция
---
JavaScript предоставляет пользователю пять арифметических операторов: `+` , `-` , `*` , `/` и `%` . Операторы для сложения, вычитания, умножения, деления и остатка соответственно.
## прибавление
**Синтаксис**
`a + b`
**использование**
```
2 + 3 // returns 5
true + 2 // interprets true as 1 and returns 3
false + 5 // interprets false as 0 and returns 5
true + "bar" // concatenates the boolean value and returns "truebar"
5 + "foo" // concatenates the string and the number and returns "5foo"
"foo" + "bar" // concatenates the strings and returns "foobar"
```
_Подсказка:_ есть удобный [приращение](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Increment_() ), который является отличным ярлыком при добавлении чисел на 1.
## Вычитание
**Синтаксис**
`a - b`
**использование**
```
2 - 3 // returns -1
3 - 2 // returns 1
false - 5 // interprets false as 0 and returns -5
true + 3 // interprets true as 1 and returns 4
5 + "foo" // returns NaN (Not a Number)
```
_Подсказка:_ есть удобный [декремент](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Decrement_(--) ), который является отличным ярлыком, когда вы вычитаете числа на 1.
## умножение
**Синтаксис**
`a * b`
**использование**
```
2 * 3 // returns 6
3 * -2 // returns -6
false * 5 // interprets false as 0 and returns 0
true * 3 // interprets true as 1 and returns 3
5 * "foo" // returns NaN (Not a Number)
Infinity * 0 // returns NaN
Infinity * Infinity // returns Infinity
```
## разделение
**Синтаксис**
`a / b`
**использование**
```
3 / 2 // returns 1.5
3.0 / 2/0 // returns 1.5
3 / 0 // returns Infinity
3.0 / 0.0 // returns Infinity
-3 / 0 // returns -Infinity
false / 5 // interprets false as 0 and returns 0
true / 2 // interprets true a 1 and returns 0.5
5 + "foo" // returns NaN (Not a Number)
Infinity / Infinity // returns NaN
```
## остаток
**Синтаксис**
`a % b`
**использование**
```
3 % 2 // returns 1
true % 5 // interprets true as 1 and returns 1
false % 4 // interprets false as 0 and returns 0
3 % "bar" // returns NaN
```
## инкремент
**Синтаксис**
`a++ or ++a`
**использование**
```
// Postfix
x = 3; // declare a variable
y = x++; // y = 4, x = 3
// Prefix
var a = 2;
b = ++a; // a = 3, b = 3
```
## декремент
**Синтаксис**
`a-- or --a`
**использование**
```
// Postfix
x = 3; // declare a variable
y = x--; // y = 3, x = 3
// Prefix
var a = 2;
b = --a; // a = 1, b = 1
```
_!Важный!_ Как вы можете видеть, вы **не можете** выполнять какие-либо операции с `Infinity` .
Источник: удивительный [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators) .

View File

@@ -0,0 +1,66 @@
---
title: Arrow Functions
localeTitle: Функции стрелки
---
Функции Arrow - новый синтаксис ES6 для написания выражений функций JavaScript. Более короткий синтаксис экономит время, а также упрощает область действия.
## Что такое функции стрелок?
Выражение функции стрелки является более кратким синтаксисом для написания выражений функции с использованием токена «стрелка жира» ( `=>` ).
### Основной синтаксис
Ниже приведен базовый пример функции стрелки:
```javascript
// ES5 syntax
var multiply = function(x, y) {
return x * y;
};
// ES6 arrow function
var multiply = (x, y) => { return x * y; };
// Or even simpler
var multiply = (x, y) => x * y;
```
Вам больше не нужны `function` и `return` ключевые слова, или даже фигурные скобки.
### Упрощение `this`
Перед функциями стрелок, новые функции , определенные их собственное `this` значение. Чтобы использовать `this` в традиционном выражении функции, мы должны написать обходное решение так:
```javascript
// ES5 syntax
function Person() {
// we assign `this` to `self` so we can use it later
var self = this;
self.age = 0;
setInterval(function growUp() {
// `self` refers to the expected object
self.age++;
}, 1000);
}
```
Функция стрелка не определяет его владелец `this` значения, то он наследует `this` от функции ограждающей:
```javascript
// ES6 syntax
function Person(){
this.age = 0;
setInterval(() => {
// `this` now refers to the Person object, brilliant!
this.age++;
}, 1000);
}
var p = new Person();
```
#### Дальнейшее чтение
[Ссылка MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions)

View File

@@ -0,0 +1,65 @@
---
title: Assignment Operators
localeTitle: Операторы присваивания
---
# Операторы присваивания
Операторы присваивания, как следует из названия, присваивают (или повторно назначают) значения переменной. Хотя на операторах присваивания довольно много вариаций, все они строятся из основного оператора присваивания.
## Синтаксис
`x = y;` | Описание | Необходимость : ---------: |: ---------------------: | ---------:
`x` | Переменная | необходимые
`=` | Оператор присваивания | необходимые
`y` | Значение для назначения переменной | необходимые
## Примеры
```
let initialVar = 5; // Variable initialization requires the use of an assignment operator
let newVar = 5;
newVar = 6; // Variable values can be modified using an assignment operator
```
## вариации
Другие операторы присваивания являются сокращением для выполнения некоторой операции с использованием переменной (обозначенной выше x) и значением (указано выше y), а затем присваиванием результата самой переменной.
Например, ниже приведен синтаксис для оператора присваивания:
```
x += y;
```
Это то же самое, что и применение оператора сложения и переназначение суммы в исходную переменную (т. Е. X), которая может быть выражена следующим кодом:
```
x = x + y;
```
Чтобы проиллюстрировать это с использованием фактических значений, вот еще один пример использования оператора присваивания:
```
let myVar = 5; // value of myVar: 5
myVar += 7; // value of myVar: 12 = 5 + 7
```
## Полный список операторов присваивания Javascript
Оператор | Синтаксис | Длинная версия
\------------------------------- | --------- | -------------
Назначение | x = y | x = y
Назначение добавления | x + = y | x = x + y
Вычисление вычитания | x - = y | x = x - y
Назначение умножения | x \* = y | x = x \* y
Подразделение | x / = y | x = x / y
Назначение останков | x% = y | x = x% y
Назначение возведения в степень | x \*\* = y | x = x \*\* y
Назначение левого сдвига | x << = y | x = x << y Назначение правого сдвига | x >> = y | x = x >> y
Беззнаковое присваивание сдвига вправо | x >>> = y | x = x >>> y
Побитовое И назначение | x & = y | x = x & y
Побитовое назначение XOR | x ^ = y | x = x ^ y
Побитовое назначение OR | x | = y | x = x | Y
### Дополнительная информация:
[Ссылка MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Assignment)
[Ссылка MSDN](https://docs.microsoft.com/en-us/scripting/javascript/reference/assignment-operator-decrement-equal-javascript)

View File

@@ -0,0 +1,125 @@
---
title: Async messaging with RabbitMQ and Tortoise
localeTitle: Асинхронные сообщения с помощью RabbitMQ и Tortoise
---
RabbitMQ - это самые простые и эффективные платформы для брокерских сообщений, использующие сегодня протокол AMQ. Использование его в архитектуре микросервиса приводит к увеличению производительности, а также к надежности. В этом руководстве мы рассмотрим основы использования RabbitMQ с Node.js.
## теория
На самом базовом уровне вы идеально должны иметь две разные службы, взаимодействующие друг с другом через Rabbit - _издателя_ и _подписчика_ . Издатель обычно передает сообщения Кролику, и абонент слушает эти сообщения и выполняет код на основе этих сообщений. Обратите внимание, что они могут быть одновременно одновременно - служба может публиковать сообщения в Rabbit и потреблять сообщения одновременно, что позволяет создавать действительно мощные системы.
Теперь издатель обычно публикует сообщения с _ключом маршрутизации_ к тому, что называется _обменом_ . Потребитель слушает _очередь_ на том же обмене, привязанный к ключу маршрутизации. В архитектурном плане ваша платформа будет использовать один обмен кролика, а разные виды заданий / сервисов будут иметь свои собственные ключи и очереди маршрутизации, чтобы pub-sub работал эффективно. Сообщения могут быть строками; они также могут быть родными объектами - клиентские библиотеки AMQP делают тяжелый подъем конвертируемых объектов с одного языка на другой. И да, это означает, что услуги могут быть написаны на разных языках, если они способны понимать AMQP.
## Начиная
Мы собираемся подготовить очень простой пример, когда скрипт издателя публикует сообщение для Rabbit, содержащее URL-адрес, а потребительский скрипт прослушивает Rabbit, выдает опубликованный URL-адрес, вызывает его и отображает результаты. Вы можете найти готовый образец на [Github](https://github.com/rudimk/freecodecamp-guides-rabbitmq-tortoise) .
Сначала давайте инициализируем проект npm:
`$ npm init`
Вы всегда можете просто нажать `Enter` полностью и использовать параметры по умолчанию - или вы можете их заполнить. Теперь давайте установим нужные нам пакеты. Мы будем использовать [Tortoise](https://www.npmjs.com/package/tortoise) , чтобы взаимодействовать с RabbitMQ. Мы также будем использовать [node-cron](https://www.npmjs.com/package/node-cron) , чтобы запланировать фактическую публикацию сообщений.
`$ npm install --save tortoise node-cron`
Теперь ваш `package.json` должен выглядеть так:
```
{
"name": "freecodecamp-guides-rabbitmq-tortoise",
"version": "1.0.0",
"description": "Sample code to accompany the FreeCodeCamp guide on async messaging with RabbitMQ and Tortoise.",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/rudimk/freecodecamp-guides-rabbitmq-tortoise.git"
},
"keywords": [
"rabbitmq",
"tortoise",
"amqp"
],
"author": "Rudraksh MK",
"license": "MIT",
"bugs": {
"url": "https://github.com/rudimk/freecodecamp-guides-rabbitmq-tortoise/issues"
},
"homepage": "https://github.com/rudimk/freecodecamp-guides-rabbitmq-tortoise#readme",
"dependencies": {
"node-cron": "^1.2.1",
"tortoise": "^1.0.1"
}
}
```
Теперь мы все настроены. Давайте сначала создадим издателя.
```javascript
const Tortoise = require('tortoise')
const cron = require('node-cron')
const tortoise = new Tortoise(`amqp://rudimk:YouKnowWhat@$localhost:5672`)
```
После импорта `tortoise` и `node-cron` мы пошли вперед и инициализировали соединение с RabbitMQ. Затем, давайте напишем быструю и грязную функцию, которая публикует сообщение для Rabbit:
```javascript
function scheduleMessage(){
let payload = {url: 'https://randomuser.me/api'}
tortoise
.exchange('random-user-exchange', 'direct', { durable:false })
.publish('random-user-key', payload)
}
```
Это достаточно просто. Мы определили словарь, содержащий URL-адрес для API [RandomUser.me](https://randomuser.me/) , который затем публикуется на `random-user-exchange` на RabbitMQ с помощью `random-user-key` маршрутизации с `random-user-key` [доступом](https://randomuser.me/) . Как упоминалось ранее, ключ маршрутизации определяет, кто получает сообщение. Теперь давайте напишем правило планирования, чтобы опубликовать это сообщение каждые 60 секунд.
```javascript
cron.schedule('60 * * * * *', scheduleMessage)
```
И наш издатель готов! Но действительно бесполезно, если потребитель не потребляет эти сообщения! Но сначала нам нужна библиотека, которая может вызывать URL-адрес в этих сообщениях. Лично я использую `superagent` : `npm install --save superagent` .
Теперь, в `consumer.js` :
```javascript
const Tortoise = require('tortoise')
const superagent = require('superagent')
const tortoise = new Tortoise(`amqp://rudimk:YouKnowWhat@$localhost:5672`)
```
Далее, давайте напишем функцию async, которая вызывает URL-адрес и отображает результат:
```javascript
async function getURL(url){
let response = await superagent.get(url)
return response.body
}
```
Время написания кода для фактического потребления сообщений:
```javascript
tortoise
.queue('random-user-queue', { durable: false })
// Add as many bindings as needed
.exchange('random-user-exchange', 'direct', 'random-user-key', { durable: false })
.prefetch(1)
.subscribe(function(msg, ack, nack) {
// Handle
let payload = JSON.parse(msg)
getURL(payload['url']).then((response) => {
console.log('Job result: ', response)
})
ack() // or nack()
})
```
Здесь мы сказали `tortoise` прослушивать `random-user-queue` , которая привязана к `random-user-key` при `random-user-exchange` . После получения сообщения полезная нагрузка извлекается из `msg` и передается вместе с функцией `getURL` , которая, в свою очередь, возвращает Promise с требуемым ответом JSON от API RandomUser.
## Вывод
Простота, связанная с использованием RabbitMQ для обмена сообщениями, не имеет себе равных, и очень легко придумать действительно сложные микросервисные шаблоны с несколькими строками кода. Лучшая часть заключается в том, что логика обмена сообщениями на самом деле не меняется на разных языках - Crystal или Go или Python или Ruby работают с Rabbit почти так же - это означает, что вы можете иметь услуги, написанные на разных языках, все общающиеся друг с другом без усилий , позволяя вам использовать лучший язык для работы.

View File

@@ -0,0 +1,92 @@
---
title: Await Promises
localeTitle: Ожидание обещаний
---
## Ожидание обещаний
В `async` / `await` [операторы](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) облегчают реализацию многого асинхронного Promises. Они также позволяют инженерам писать более четкий, более сжатый, проверяемый код.
Чтобы понять эту тему, вы должны иметь четкое представление о том, как работают [Обещания](https://guide.freecodecamp.org/javascript/promises) .
* * *
## Основной синтаксис
\`\` \`javascript функция медленноResolvedPromiseFunc (строка) { return new Promise (solve => { setTimeout (() => { разрешения (строка); }, 5000); }); }
асинхронная функция doIt () { const myPromise = ждать медленноResolvedPromiseFunc ("foo"); console.log (myPromise); // "foo" }
сделай это();
```
There are a few things to note:
* The function that encompasses the `await` declaration must include the `async` operator. This will tell the JS interpreter that it must wait until the Promise is resolved or rejected.
* The `await` operator must be inline, during the const declaration.
* This works for `reject` as well as `resolve`.
---
## Nested Promises vs. `Async` / `Await`
Implementing a single Promise is pretty straightforward. In contrast, Chained Promises or the creation of a dependency pattern may produce "spaghetti code".
The following examples assume that the <a href='https://github.com/request/request-promise' target='_blank' rel='nofollow'>`request-promise`</a> library is available as `rp`.
### Chained/Nested Promises
```
Javascript // Первое обещание const fooPromise = rp ("http://domain.com/foo");
fooPromise.then (resultFoo => { // Должен дождаться "foo", чтобы разрешить console.log (resultFoo);
```
const barPromise = rp("http://domain.com/bar");
const bazPromise = rp("http://domain.com/baz");
return Promise.all([barPromise, bazPromise]);
```
}), затем (resultArr => { // Обрабатываем разрешения «bar» и «baz» здесь console.log (resultArr \[0\]); console.log (resultArr \[1\]); });
```
### `async` and `await` Promises
```
Javascript // Оберните все в асинхронной функции асинхронная функция doItAll () { // Получить данные из конечной точки «foo», но дождаться разрешения console.log (ожидание rp ("http://domain.com/foo"));
```
// Concurrently kick off the next two async calls,
// don't wait for "bar" to kick off "baz"
const barPromise = rp("http://domain.com/bar");
const bazPromise = rp("http://domain.com/baz");
// After both are concurrently kicked off, wait for both
const barResponse = await barPromise;
const bazResponse = await bazPromise;
console.log(barResponse);
console.log(bazResponse);
```
}
// Наконец, вызовите функцию async doItAll (). then (() => console.log ('Done!'));
```
The advantages of using `async` and `await` should be clear. This code is more readable, modular, and testable.
It's fair to note that even though there is an added sense of concurrency, the underlying computational process is the same as the previous example.
---
## Handling Errors / Rejection
A basic try-catch block handles a rejected Promise.
```
Javascript async function errorExample () { пытаться { const rejectPromise = ждать Promise.reject («О-о!»); } catch (ошибка) { console.log (ошибка); // «О-о!» } }
errorExample (); \`\` \`
* * *
#### Дополнительная информация:
* `await` Операторы [MDN Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await)
* `async` Оператор функций [MDN Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/async_function)

View File

@@ -0,0 +1,102 @@
---
title: Boolean
localeTitle: логический
---
## логический
Булевы - это примитивный тип данных, обычно используемый в компьютерных языках программирования. По определению логическое имеет два возможных значения: `true` или `false` .
В Javascript часто подразумевается принудительное принуждение типа к логическому. Если, например, у вас есть оператор if, который проверяет определенное выражение, это выражение будет принудительно выполнено с помощью логического выражения:
```javascript
var a = 'a string';
if (a) {
console.log(a); // logs 'a string'
}
```
Есть только несколько значений, которые будут принудительно применены к false:
* false (на самом деле не принудительно, поскольку оно уже неверно)
* ноль
* не определено
* NaN
* 0
* '' (пустой строки)
Все остальные значения будут привязаны к true. Когда значение принуждается к логическому, мы также называем это «ложным» или «правдивым».
Одним из способов использования этого типа является использование операторов или ( `||` ) и ( `&&` ):
```javascript
var a = 'word';
var b = false;
var c = true;
var d = 0
var e = 1
var f = 2
var g = null
console.log(a || b); // 'word'
console.log(c || a); // true
console.log(b || a); // 'word'
console.log(e || f); // 1
console.log(f || e); // 2
console.log(d || g); // null
console.log(g || d); // 0
console.log(a && c); // true
console.log(c && a); // 'word'
```
Как вы можете видеть, оператор _or_ проверяет первый операнд. Если это верно или правдиво, оно немедленно возвращает его (именно поэтому мы получаем слово в первом случае & true во втором случае). Если это неверно или правдиво, он возвращает второй операнд (именно поэтому мы получаем «слово» в третьем случае).
С оператором и он работает аналогичным образом, но для «и», чтобы быть правдой, оба операнда должны быть правдивыми. Поэтому он всегда будет возвращать второй операнд, если оба они истинны / правдивы, иначе он вернет false. Вот почему в четвертом случае мы получаем истину, а в последнем случае получаем слово.
## Булевский объект
Существует также собственный JavaScript-объект, который обтекает значение. Значение, переданное как первый параметр, при необходимости преобразуется в булево значение. Если значение опущено, 0, -0, null, false, NaN, undefined или пустая строка (""), объект имеет начальное значение false. Все остальные значения, включая любой объект или строку «false», создают объект с начальным значением true.
Не путайте примитивные логические значения true и false с истинными и ложными значениями объекта Boolean.
## Подробнее
Любой объект, значение которого не является неопределенным или null, включая логический объект, значение которого является ложным, оценивается как true при передаче в условный оператор. Если true, это приведет к выполнению функции. Например, условие в следующем выражении if равно true:
```javascript
var x = new Boolean(false);
if (x) {
// this code is executed
}
```
Это поведение не относится к булевым примитивам. Например, условие в следующем выражении if равно false:
```javascript
var x = false;
if (x) {
// this code is not executed
}
```
Не используйте объект Boolean для преобразования небулевого значения в логическое значение. Вместо этого используйте Boolean как функцию для выполнения этой задачи:
```javascript
var x = Boolean(expression); // preferred
var x = new Boolean(expression); // don't use
```
Если вы укажете любой объект, включая логический объект, значение которого является ложным, в качестве начального значения булева объекта, новый объект Boolean имеет значение true.
```javascript
var myFalse = new Boolean(false); // initial value of false
var g = new Boolean(myFalse); // initial value of true
var myString = new String('Hello'); // string object
var s = new Boolean(myString); // initial value of true
```
Не используйте Boolean-объект вместо булевского примитива.
### Ресурсы
* [Логический объект](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean)
* [Логический объект](https://docs.oracle.com/javase/7/docs/api/java/lang/Boolean.html)

View File

@@ -0,0 +1,80 @@
---
title: Callback Functions
localeTitle: Функции обратного вызова
---
В этой статье дается краткое введение в концепцию и использование функций обратного вызова на языке программирования Javascript.
## Функции - это объекты
Первое, что нам нужно знать, это то, что в Javascript функции являются первоклассными объектами. Таким образом, мы можем работать с ними так же, как мы работаем с другими объектами, например, назначая их переменным и передавая их в качестве аргументов в другие функции. Это важно, потому что это последний метод, который позволяет нам расширять функциональность в наших приложениях.
## Функции обратного вызова
Функция **обратного вызова** - это функция, которая передается _как аргумент_ другой функции, которая будет «возвращена» позже. Функция , которая принимает другие функции в качестве аргументов называется **функция высшего порядка,** которая содержит логику , _когда_ функция обратного вызова запускается на выполнение. Это сочетание этих двух, которые позволяют нам расширить нашу функциональность.
Чтобы проиллюстрировать обратные вызовы, давайте начнем с простого примера:
```javascript
function createQuote(quote, callback){
var myQuote = "Like I always say, " + quote;
callback(myQuote); // 2
}
function logQuote(quote){
console.log(quote);
}
createQuote("eat your vegetables!", logQuote); // 1
// Result in console:
// Like I always say, eat your vegetables!
```
В приведенном выше примере `createQuote` - это функция более высокого порядка, которая принимает два аргумента, вторая - обратный вызов. Функция `logQuote` используется для передачи в качестве нашей функции обратного вызова. Когда мы выполняем функцию `createQuote` _(1)_ , обратите внимание, что мы _не_ `logQuote` круглые скобки к `logQuote` когда передаем его в качестве аргумента. Это связано с тем, что мы не хотим сразу же выполнить функцию обратного вызова, мы просто хотим передать определение функции вместе с функцией более высокого порядка, чтобы она могла быть выполнена позже.
Кроме того, нам нужно убедиться, что если функция обратного вызова, которую мы передаем, ожидает аргументы, мы предоставляем эти аргументы при выполнении обратного вызова _(2)_ . В приведенном выше примере это будет `callback(myQuote);` , так как мы знаем, что `logQuote` ожидает, что котировка будет передана.
Кроме того, мы можем передавать анонимные функции как обратные вызовы. Следующий вызов `createQuote` будет иметь тот же результат, что и вышеприведенный пример:
```javascript
createQuote("eat your vegetables!", function(quote){
console.log(quote);
});
```
Кстати, вам не _нужно_ использовать слово «обратный вызов» в качестве имени вашего аргумента, Javascript просто должен знать, что это правильное имя аргумента. Исходя из приведенного выше примера, приведенная ниже функция будет вести себя точно так же.
```javascript
function createQuote(quote, functionToCall) {
var myQuote = "Like I always say, " + quote;
functionToCall(myQuote);
}
```
## Зачем использовать обратные вызовы?
Большую часть времени мы создаем программы и приложения, которые работают **синхронно** . Другими словами, некоторые из наших операций запускаются только после завершения предыдущих. Часто, когда мы запрашиваем данные из других источников, таких как внешний API, мы не всегда знаем, _когда_ будут возвращены наши данные. В этих случаях мы хотим дождаться ответа, но мы не всегда хотим, чтобы наше приложение полностью остановилось, пока наши данные извлекаются. В таких ситуациях функции обратного вызова пригождаются.
Давайте рассмотрим пример, который имитирует запрос на сервер:
```javascript
function serverRequest(query, callback){
setTimeout(function(){
var response = query + "full!";
callback(response);
},5000);
}
function getResults(results){
console.log("Response from the server: " + results);
}
serverRequest("The glass is half ", getResults);
// Result in console after 5 second delay:
// Response from the server: The glass is half full!
```
В приведенном выше примере мы делаем mock-запрос на сервер. По истечении 5 секунд ответ будет изменен, а затем будет выполнена функция обратного вызова `getResults` . Чтобы увидеть это в действии, вы можете скопировать / вставить вышеуказанный код в инструмент разработчика вашего браузера и выполнить его.
Кроме того, если вы уже знакомы с `setTimeout` , то вы все время используете функции обратного вызова. Анонимный аргумент функции, переданный в приведенный выше пример вызова функции `setTimeout` , также является обратным вызовом! Таким образом, исходный обратный вызов примера фактически выполняется другим обратным вызовом. Будьте осторожны, чтобы не вставлять слишком много обратных вызовов, если вы можете помочь, так как это может привести к чему-то, называемому «callback hell»! Как следует из названия, это не радость.

View File

@@ -0,0 +1,174 @@
---
title: Classes
localeTitle: Классы
---
## Классы
JavaScript не имеет понятия классов по своей сути.
Но мы могли бы имитировать функциональность класса, используя прототипный характер JavaScript.
В этой статье предполагается, что у вас есть базовое понимание [прототипов](/src/pages/javascript/prototypes/index.md) .
Для ясности предположим, что мы хотим создать класс, который может сделать следующее
```javascript
var p = new Person('James','Bond'); // create a new instance of Person class
p.log() // Output: 'I am James Bond' // Accessing a function in the class
// Using setters and getters
p.profession = 'spy'
p.profession // output: James bond is a spy
```
### Использование ключевого слова class
Как и на любом другом языке программирования, теперь вы можете использовать ключевое слово `class` для создания класса.
Это не поддерживается в старых браузерах и было представлено в ECMAScript 2015.
```javascript
class Person {
constructor(firstName, lastName) {
this._firstName = firstName;
this._lastName = lastName;
}
log() {
console.log('I am', this._firstName, this._lastName);
}
// setters
set profession(val) {
this._profession = val;
}
// getters
get profession() {
console.log(this._firstName, this._lastName, 'is a', this._profession);
}
}
```
`class` - это просто синтаксический сахар над существующей моделью наследования на основе прототипов JavaScript.
В общем, программисты используют следующие способы создания класса в JavaScript.
### Использование методов, добавленных в прототипы:
Здесь все методы добавляются к прототипу
```javascript
function Person(firstName, lastName) {
this._firstName = firstName;
this._lastName = lastName;
}
Person.prototype.log = function() {
console.log('I am', this._firstName, this._lastName);
}
// This line adds getters and setters for the profession object. Note that in general you could just write your own get and set functions like the 'log' method above.
// Since in this example we are trying the mimic the class above, we try to use the getters and setters property provided by JavaScript
Object.defineProperty(Person.prototype, 'profession', {
set: function(val) {
this._profession = val;
},
get: function() {
console.log(this._firstName, this._lastName, 'is a', this._profession);
}
})
```
Вы также можете написать прототипы для функции `Person` как `Person` ниже
```javascript
Person.prototype = {
log: function() {
console.log('I am ', this._firstName, this._lastName);
}
set profession(val) {
this._profession = val;
}
get profession() {
console.log(this._firstName, this._lastName, 'is a', this._profession);
}
}
```
### Использование встроенных методов
Здесь методы добавляются внутренне вместо прототипа
```javascript
function Person(firstName, lastName) {
this._firstName = firstName;
this._lastName = lastName;
this.log = function() {
console.log('I am ', this._firstName, this._lastName);
}
Object.defineProperty(this, 'profession', {
set: function(val) {
this._profession = val;
},
get: function() {
console.log(this._firstName, this._lastName, 'is a', this._profession);
}
})
}
```
### Скрытие деталей в классах с символами
Чаще всего некоторые свойства и методы должны быть скрыты для предотвращения доступа извне функции. С помощью классов, чтобы получить эту функциональность, один из способов сделать это - использовать символы. Символ - это новый встроенный тип JavaScript, который можно вызвать, чтобы дать новое значение символа. Каждый символ уникален и может использоваться как ключ на объекте. Таким образом, один случай использования символов состоит в том, что вы можете добавить что-то к объекту, который у вас может не быть, и вы можете не захотеть столкнуться с любыми другими ключами объекта, поэтому создание нового и добавление как свойство этого объекта с использованием символа является самым безопасным , Кроме того, когда значение символа добавляется к объекту; никто другой не узнает, как это получить.
```javascript
class Person {
constructor(firstName, lastName) {
this._firstName = firstName;
this._lastName = lastName;
}
log() {
console.log('I am', this._firstName, this._lastName);
}
// setters
set profession(val) {
this._profession = val;
}
// getters
get profession() {
console.log(this._firstName, this._lastName, 'is a', this._profession);
}
// With the above code, even though we can access the properties outside the function to change their content what if we don't want that.
// Symbols come to rescue.
let s_firstname = new Symbol();
class Person {
constructor(firstName, lastName) {
this[s_firstName] = firstName;
this._lastName = lastName;
}
log() {
console.log('I am', this._firstName, this._lastName);
}
// setters
set profession(val) {
this._profession = val;
}
// getters
get profession() {
console.log(this[s_firstName], this._lastName, 'is a', this._profession);
}
```
#### Дополнительная информация:

View File

@@ -0,0 +1,177 @@
---
title: Closures
localeTitle: Затворы
---
# Затворы
Закрытие представляет собой комбинацию функции и лексической среды (области), в которой была объявлена ​​эта функция. Закрытие - это фундаментальное и мощное свойство Javascript. В этой статье обсуждаются «как» и «почему» о закрытии:
### пример
```js
//we have an outer function named walk and an inner function named fly
function walk (){
var dist = '1780 feet';
function fly(){
console.log('At '+dist);
}
return fly;
}
var flyFunc = walk(); //calling walk returns the fly function which is being assigned to flyFunc
//you would expect that once the walk function above is run
//you would think that JavaScript has gotten rid of the 'dist' var
flyFunc(); //Logs out 'At 1780 feet'
//but you still can use the function as above
//this is the power of closures
```
### Другой пример
```js
function by(propName) {
return function(a, b) {
return a[propName] - b[propName];
}
}
const person1 = {name: 'joe', height: 72};
const person2 = {name: 'rob', height: 70};
const person3 = {name: 'nicholas', height: 66};
const arr_ = [person1, person2, person3];
const arr_sorted = arr_.sort(by('height')); // [ { name: 'nicholas', height: 66 }, { name: 'rob', height: 70 },{ name: 'joe', height: 72 } ]
```
Закрытие «запоминает» среду, в которой она была создана. Эта среда состоит из любых локальных переменных, которые были в области видимости на момент создания закрытия.
```js
function outside(num) {
var rememberedVar = num; // In this example, rememberedVar is the lexical environment that the closure 'remembers'
return function inside() { // This is the function which the closure 'remembers'
console.log(rememberedVar)
}
}
var remember1 = outside(7); // remember1 is now a closure which contains rememberedVar = 7 in its lexical environment, and //the function 'inside'
var remember2 = outside(9); // remember2 is now a closure which contains rememberedVar = 9 in its lexical environment, and //the function 'inside'
remember1(); // This now executes the function 'inside' which console.logs(rememberedVar) => 7
remember2(); // This now executes the function 'inside' which console.logs(rememberedVar) => 9
```
Закрытие полезно, потому что они позволяют вам «запоминать» данные, а затем позволяют работать с этими данными через возвращаемые функции. Это позволяет javascript эмулировать частные методы, которые находятся на других языках программирования. Частные методы полезны для ограничения доступа к коду, а также для управления глобальным пространством имен.
### Частные переменные и методы
Закрытие также может использоваться для инкапсуляции частных данных / методов. Взгляните на этот пример:
```javascript
const bankAccount = (initialBalance) => {
const balance = initialBalance;
return {
getBalance: function() {
return balance;
},
deposit: function(amount) {
balance += amount;
return balance;
},
};
};
const account = bankAccount(100);
account.getBalance(); // 100
account.deposit(10); // 110
```
В этом примере мы не сможем получить доступ к `balance` из любой точки вне функции `bankAccount` , а это значит, что мы только что создали приватную переменную. Где закрытие? Ну, подумайте о том, что `bankAccount()` . Он фактически возвращает объект с кучей функций внутри него, и все же, когда мы вызываем `account.getBalance()` , функция может «запомнить» свою начальную ссылку на `balance` . Это сила закрытия, когда функция «запоминает» ее лексическую область (область времени компиляции), даже если функция выполняется вне этой лексической области.
**Эмуляция переменных с блочной областью.**
В Javascript не было понятия переменных с блочным диапазоном. Это означает, что при определении переменной внутри forloop, например, эта переменная видима также снаружи forloop. Итак, как могут закрытия помочь нам решить эту проблему? Давайте взглянем.
```javascript
var funcs = [];
for(var i = 0; i < 3; i++){
funcs[i] = function(){
console.log('My value is ' + i); //creating three different functions with different param values.
}
}
for(var j = 0; j < 3; j++){
funcs[j](); // My value is 3
// My value is 3
// My value is 3
}
```
Поскольку переменная i не имеет блочной области, ее значение во всех трех функциях обновлялось с помощью счетчика циклов и создавало вредоносные значения. Закрытие может помочь нам решить эту проблему, создав снимок среды, в которой была функция, когда она была создана, сохраняя ее состояние.
```javascript
var funcs = [];
var createFunction = function(val){
return function() {console.log("My value: " + val);};
}
for (var i = 0; i < 3; i++) {
funcs[i] = createFunction(i);
}
for (var j = 0; j < 3; j++) {
funcs[j](); // My value is 0
// My value is 1
// My value is 2
}
```
В поздних версиях javascript es6 + есть новое ключевое слово, называемое let, которое может использоваться для присвоения переменной blockscope. Существует также множество функций (forEach) и целых библиотек (lodash.js), предназначенных для решения таких проблем, как те, которые были описаны выше. Они, безусловно, могут повысить вашу производительность, однако крайне важно иметь знания обо всех этих проблемах при попытке создать что-то большое.
Закрытие имеет множество специальных приложений, которые полезны при создании больших javascript-программ.
1. Эмуляция частных переменных или инкапсуляция
2. Выполнение асинхронных вызовов на стороне сервера
3. Создание переменной с блочным диапазоном.
**Эмулирование частных переменных.**
В отличие от многих других языков, Javascript не имеет механизма, который позволяет создавать инкапсулированные переменные экземпляра внутри объекта. Наличие переменных публичного экземпляра может вызвать множество проблем при построении средних и больших программ. Однако с закрытием эта проблема может быть смягчена.
Как и в предыдущем примере, вы можете создавать функции, которые возвращают литералы объектов с методами, которые имеют доступ к локальным переменным объекта, не подвергая их воздействию. Таким образом, они становятся частными.
Закрытие также может помочь вам управлять глобальным пространством имен, чтобы избежать столкновений с глобально разделяемыми данными. Обычно все глобальные переменные распределяются между всеми сценариями в вашем проекте, что определенно даст вам много проблем при создании средних и больших программ. Вот почему библиотеки и авторы модулей используют закрытие, чтобы скрыть методы и данные всего модуля. Это называется шаблоном модуля, он использует выражение, вызываемое непосредственно вызываемым, которое экспортирует только определенные функции во внешний мир, что значительно сокращает количество глобальных ссылок.
Вот краткий образец скелета модуля.
```javascript
var myModule = (function() = {
let privateVariable = 'I am a private variable';
let method1 = function(){ console.log('I am method 1'); };
let method2 = function(){ console.log('I am method 2, ', privateVariable); };
return {
method1: method1,
method2: method2
}
}());
myModule.method1(); // I am method 1
myModule.method2(); // I am method 2, I am a private variable
```
Закрытие полезно для захвата новых экземпляров частных переменных, содержащихся в «запоминаемой» среде, и к этим переменным можно получить доступ только через возвращаемую функцию или методы.
### Дополнительная информация:
[MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures)
[Закрытие Javascript](https://medium.freecodecamp.org/lets-learn-javascript-closures-66feb44f6a44)

View File

@@ -0,0 +1,35 @@
---
title: Code Block
localeTitle: Блок кода
---
## Введение
В компьютерном программировании, **блок** - **блок** или код раздел кода , который сгруппированы вместе. Блоки состоят из одной или нескольких деклараций и утверждений. Язык программирования, который позволяет создавать блоки, включая блоки, вложенные в другие блоки, называется блочно-структурированным языком программирования. JavaScript - один из таких языков программирования.
Оператор **блока** в JavaScript используется для группировки нулевых или более операторов. Блок разделен на пару фигурных скобок.
```
{
statement_1;
statement_2;
...
statement_n;
}
```
[Ссылка MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/block)
## Примеры
Оператор **блока** обычно используется с операторами потока управления (например, `if...else` , `for` , `while` ) и функциями.
```
while (x < 10) {
x++;
}
function addnums(num1, num2) {
var sum = 0;
sum = num1 + num2;
return sum;
}
```

View File

@@ -0,0 +1,25 @@
---
title: Code Linting
localeTitle: Листинг кода
---
Linting - это процесс запуска программы, которая анализирует ваш код для программных и стилистических ошибок. Инструмент linting или linter маркирует или помещает любые потенциальные ошибки в вашем коде, такие как синтаксические ошибки или неправильные имена переменных. Это может сэкономить время и помочь вам написать лучший код.
Linters можно установить с помощью `npm` или другого менеджера пакетов. Linters можно использовать из командной строки, передавая файлы. Linters также доступны в виде плагинов для инструментов, а иногда они напрямую интегрируются в редакторы.
Вот некоторые популярные Javascript Linters:
[JSLint](http://www.javascriptlint.com/online_lint.php)
[JSHint](http://jshint.com)
[ОНК](http://jscs.info)
[ESLint](http://eslint.org)
#### Linters для редакторов:
* Visual Code: Чтобы установить расширение eslint, откройте командную палитру (View -> Command Palette .. или cmd + shift + p) и выполните команду: ext install eslint
#### Инструменты и плагины
[Красивее](https://prettier.io)

View File

@@ -0,0 +1,87 @@
---
title: Comments
localeTitle: Комментарии
---
## Комментарии
Программисты используют комментарии для добавления в исходный код подсказок, заметок, предложений или предупреждений; они не влияют на фактический вывод кода. Комментарии могут быть очень полезными для объяснения цели вашего кода или того, что он должен делать.
Это всегда лучшая практика, когда вы начинаете комментировать чаще, чем нет, поскольку это может помочь тем, кто читает ваш код, понять, что именно ваш код намеревается сделать.
JavaScript имеет два способа присвоения комментариев в коде.
Первый способ - `//` комментарий; весь текст, следующий за `//` в одной строке, в комментарий. Например:
```javascript
function hello() {
// This is a one line JavaScript comment
console.log("Hello world!");
}
hello();
```
Второй способ - это `/* */` comment, который может использоваться как для однострочных, так и для многострочных комментариев. Например:
```javascript
function hello() {
/* This is a one line JavaScript comment */
console.log("Hello world!");
}
hello();
```
```javascript
function hello() {
/* This comment spans multiple lines. Notice
that we don't need to end the comment until we're done. */
console.log("Hello world!");
}
hello();
```
Вы также можете предотвратить выполнение кода Javascript, просто введя в действие коды кода следующим образом:
```javascript
function hello() {
/*console.log("Hello world!");*/
}
hello();
```
#### Дополнительная информация:
[Как писать комментарии в JavaScript](https://www.digitalocean.com/community/tutorials/how-to-write-comments-in-javascript)
### Многие IDE поставляются с комбинацией клавиш, чтобы прокомментировать строки.
1. Выделите текст для комментариев
2. Mac: Push Command (Apple Key) и "/"
3. Windows: Push Control & "/"
4. Вы также можете раскомментировать код, выполнив те же действия
Ярлык, чтобы прокомментировать раздел javascript во многих редакторах кода, состоит в том, чтобы выделить строки кода, который вы хотите прокомментировать, затем нажмите `Cmd/Ctrl + /` .
Комментарии также очень полезны для тестирования кода, поскольку вы можете предотвратить запуск определенной строки кода / блока
```javascript
function hello() {
// The statement below is not going to get executed
// console.log('hi')
}
hello();
```
```
function hello() {
// The statements below are not going to get executed
/*
console.log('hi');
console.log('code-test');
*/
}
hello();
```
#### Дополнительная информация:
* [Как писать комментарии в JavaScript](https://www.digitalocean.com/community/tutorials/how-to-write-comments-in-javascript)

View File

@@ -0,0 +1,195 @@
---
title: Comparison Operators
localeTitle: Операторы сравнения
---
JavaScript имеет как **строгие, так** и **типовые преобразования** .
* Строгое сравнение (например, ===) справедливо только в том случае, если операнды одного типа.
* Более часто используемое абстрактное сравнение (например, ==) преобразует операнды в один и тот же тип перед проведением сравнения.
* Для реляционных абстрактных сравнений (например, <=) операнды сначала преобразуются в примитивы, а затем к тому же типу перед сравнением.
* Строки сравниваются на основе стандартного лексикографического упорядочения, используя значения Unicode.
## Особенности сравнения:
* Две строки строго равны, если они имеют одну и ту же последовательность символов, одну и ту же длину и одинаковые символы в соответствующих позициях.
* Два числа строго равны, если они численно равны (имеют одинаковое числовое значение). NaN не равно никому, включая NaN. Положительные и отрицательные нули равны друг другу.
* Два булевых операнда строго равны, если оба они истинны или оба ложны.
* Два разных объекта никогда не равны ни для строгих, ни для абстрактных сравнений.
* Выражение, сравнивающее объекты, истинно, только если операнды ссылаются на один и тот же объект.
* Null и Undefined Types строго равны себе и абстрактно равны друг другу.
## Операторы равенства
### Равенство (==)
Оператор равенства преобразует операнды, если они **не одного типа** , а затем применяет строгое сравнение. Если **оба операнда являются объектами** , тогда JavaScript сравнивает внутренние ссылки, равные, когда операнды относятся к одному и тому же объекту в памяти.
#### Синтаксис
```
x == y
```
#### Примеры
```
1 == 1 // true
"1" == 1 // true
1 == '1' // true
0 == false // true
0 == null // false
0 == undefined // false
null == undefined // true
```
### Неравенство (! =)
Оператор неравенства возвращает true, если операнды не равны. Если два операнда **не одного типа** , JavaScript пытается преобразовать операнды в соответствующий тип для сравнения. Если **оба операнда являются объектами** , тогда JavaScript сравнивает внутренние ссылки, которые не равны, когда операнды относятся к различным объектам в памяти.
#### Синтаксис
```
x != y
```
#### Примеры
```
1 != 2 // true
1 != "1" // false
1 != '1' // false
1 != true // false
0 != false // false
```
### Идентичность / строгое равенство (===)
Оператор identity возвращает true, если операнды строго равны **без преобразования типа** .
#### Синтаксис
```
x === y
```
#### Примеры
```
3 === 3 // true
3 === '3' // false
```
### Нетождественное / строгое неравенство (! ==)
Оператор, не являющийся идентификатором, возвращает true, если операнды **не равны и / или не того же типа** .
#### Синтаксис
```
x !== y
```
#### Примеры
```
3 !== '3' // true
4 !== 3 // true
```
## Операторы отношения
### Больше, чем оператор (>)
Оператор больше, чем оператор, возвращает true, если левый операнд больше, чем правый операнд.
#### Синтаксис
```
x > y
```
#### Примеры
```
4 > 3 // true
```
### Оператор больше или равно (> =)
Оператор большего или равного возвращает true, если левый операнд больше или равен правильному операнду.
#### Синтаксис
```
x >= y
```
#### Примеры
```
4 >= 3 // true
3 >= 3 // true
```
### Меньше оператора (<)
Оператор меньше, чем оператор, возвращает true, если левый операнд меньше, чем правый операнд.
#### Синтаксис
```
x < y
```
#### Примеры
```
3 < 4 // true
```
### Меньший или равный оператор (<=)
Оператор меньше или равно возвращает true, если левый операнд меньше или равен правильному операнду.
#### Синтаксис
```
x <= y
```
#### Примеры
```
3 <= 4 // true
```
ополнительную информацию вы можете найти в [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators) ._
## Сравнение нулевых и неопределенных
Когда мы сравниваем null и undefined, мы видим другое поведение. Позволяет проверять различные сценарии с помощью примеров
#### Пример - строгая проверка равенства (===)
console.log (null === undefined); // O / P - false
Otuput является ложным, и это правильно, потому что мы знаем, что «null» и «undefined» - разные типы.
#### Пример - проверка не строгого равенства (==)
console.log (null == undefined); // O / P: - true
Как? Это связано с тем, что существует специальное правило для «null» и «undefined». В связи с этим они равны в случае нестрогой проверки (==), но не равны никакому другому значению.
Если мы используем операторы сравнения, такие как <,>, <=,> = и т. Д., «Null» и «undefined» преобразуются в число, и в таких случаях «null» станет 0, а «undefined» будет NaN. Давайте рассмотрим некоторые из этих примеров.
#### Пример - сравните значение null с 0 (ноль)
console.log (null> 0); // O / P - false console.log (null> = 0); // O / P - true console.log (null == 0); // O / P - false
Странный? В соответствии с первым утверждением null не больше 0, а из второго оператора null является либо большим, либо равным 0. Таким образом, если мы математически мыслим и сравниваем оба утверждения, то получится, что значение null равно 0. Но , согласно третьему утверждению это неверно. Зачем?
Причина в том, что «сравнение» и «проверка равенства» работают по-разному. Для сравнения, «null / undefined» сначала преобразуется в число, поэтому в первых двух случаях «null» становится 0 и, следовательно, case1) (null> 0) -> false и case2) (null> = 0) -> true. Но при проверке равенства (==) «null / undefined» работает без какого-либо преобразования и, как объяснялось выше (специальное правило), проверка равенства «null / undefined» равна только друг другу и не равна никому другому. Следовательно (null == 0) -> false.
#### Пример - сравнение undefined с 0 (ноль)
console.log (undefined> 0); // O / P - false console.log (undefined> = 0); // O / P - false console.log (undefined == 0); // O / P - false
Здесь мы тестируем те же случаи, что и мы, для null, но результат опять же отличается. Зачем?
Причины следующие. В первых двух случаях мы сравниваем undefined с 0 и, как упоминалось выше, в сравнении undefined преобразуется в NaN. NaN - особое значение, которое всегда возвращает false по сравнению с любым числом, и поэтому мы получили false как результат в первых двух случаях. Для третьего утверждения причина та же, что и для «null». В проверке равенства «null / undefined» равны только друг другу и не равны ни одному другому. Следовательно (undefined == 0) -> false.

View File

@@ -0,0 +1,66 @@
---
title: Concurrency Model and Event Loop
localeTitle: Модель параллелизма и цикл событий
---
## Модель параллелизма и цикл событий
Время выполнения Javascript однопоточное, что означает, что он может выполнять один фрагмент кода за раз. Чтобы понять модель параллелизма и цикл событий в Javascript, мы должны сначала ознакомиться с некоторыми общими терминами, которые связаны с ним. Сначала давайте узнаем, что такое стек вызовов.
Стек вызовов представляет собой простую структуру данных, которая записывает, где в коде мы в настоящее время. Поэтому, если мы входим в функцию, которая является вызовом функции, она помещается в стек вызовов, и когда мы возвращаемся из функции, она выплывает из стека.
Давайте рассмотрим пример кода, чтобы понять стек вызовов,
```javascript
function multiply(x,y) {
return x * y;
}
function squared(n) {
return multiply(n,n)
}
function printSquare(n) {
return squared(n)
}
let numberSquared = printSquare(5);
console.log(numberSquared);
```
Во-первых, когда код выполняет runtime, он будет считывать каждое из определений функций, но когда он достигнет строки, в которой вызывается первая функция **printSquare (5),** она будет вызывать эту функцию в стек вызовов. Затем эта функция будет выполнена, и перед возвратом она встретит другую **квадрат** функции **(n),** чтобы приостановить ее текущую операцию и нажать эту функцию поверх существующей функции. Он выполняет функцию в этом случае в квадратной функции и, наконец, встречает другую функцию **multiply (n, n),** поэтому он приостанавливает выполнение своих текущих исполнений и толкает эту функцию в стек вызовов. Функция умножается, и возвращается с умноженным значением. Наконец, функция квадратов возвращается и выталкивается из стека, а затем то же самое происходит с printSquare. Конечное квадратное значение присваивается переменной numberSquared. Мы снова сталкиваемся с вызовом функции, в этом случае это оператор console.log (), поэтому среда выполнения выталкивает это в стек, который выполняет его, тем самым печатая квадрат числа на консоли. Следует отметить, что первая функция, которая попадает в стек до того, как выполняется какой-либо из вышеперечисленных программ, является основной функцией, которая в среде выполнения обозначается как «анонимная функция».
Поэтому, чтобы суммировать всякий раз, когда вызывается функция, она помещается в стек вызовов, где она выполняется. Наконец, когда функция выполняется с ее выполнением и возвращается либо неявно, либо явно, она будет удалена из стека. Стек вызовов просто записывает в какой момент времени исполняемый функционал. Он отслеживает, какая функция в данный момент выполняется.
Теперь мы знаем, что Javascript может выполнять одну вещь одновременно, но это не так с браузером. У браузера есть собственный набор API, таких как setTimeout, XMLHttpRequests, которые не указаны в среде выполнения Javascript. На самом деле, если вы посмотрите исходный код V8, популярную среду исполнения Javascript, которая поддерживает браузеры, такие как Google Chrome, вы не найдете никаких определений. Это связано с тем, что эти специальные веб-API существуют в среде браузера, а не в среде javascript, и вы можете сказать, что эти apis вводят параллелизм в микс. Давайте посмотрим на диаграмму, чтобы понять всю картину.
![Модель параллелизма и события](https://i.imgur.com/rnQEY7o.png)
Введены еще несколько терминов
**Куча** - это в основном место, где выделяются объекты.
**Callback Queue** - это структура данных, в которой хранятся все обратные вызовы. Так как это очередь, поэтому элементы обрабатываются на основе FIFO, который является первым в First Out.
**Event Loop** - это то, где все эти вещи объединяются. То, что цикл событий просто делает, это проверять стеки вызовов, и если он пуст, что означает, что в стеке нет функций, он принимает самый старый обратный вызов из очередь обратного вызова и толкает ее в стек вызовов, который в конечном итоге выполняет обратный вызов.
Давайте разобраться с примером кода -
```javascript
console.log('hi');
setTimeout(function() {
console.log('freecodeCamp')
},5000);
console.log('JS')
```
Когда выполняется первая строка, это console.log (), который является вызовом функции, что означает, что эта функция помещается в стек вызовов, где она выполняет печать «привет» на консоль и, наконец, возвращается и выталкивается из стека. Затем, когда среда выполнения запускает setTimeout (), она знает, что это веб-API, и, следовательно, он отдает браузеру его выполнение. Браузер запускает таймер, а затем среда выполнения JS выталкивает setTimeout () из стека. Он встречает другой вызов console.log (), и поэтому он толкает его в стек вызовов, сообщение «JS» записывается в консоль, а затем оно наконец возвращается, и поэтому последний console.log () удаляется из стека. Теперь стек вызовов пуст. Между тем, пока все это продолжалось, таймер заканчивается, когда прошло 5 секунд, браузер идет вперед и толкает функцию обратного вызова в очередь обратного вызова. Далее цикл событий проверяет, свободен ли стек вызовов или нет. Поскольку он свободен, он выполняет функцию обратного вызова и снова возвращает его в стек вызовов, который выполняет внутри него код. Снова внутри кода есть вызов console.log (), поэтому эта функция переходит в верхнюю часть стека, которая записывает «freecodecamp» в консоль, и, наконец, возвращает, что означает, что она удаляется из стека, и, наконец, обратный вызов всплывает и мы закончили.
Чтобы визуализировать это, лучше попробуйте этот инструмент с помощью Phillip Roberts-Loupe [Event Loop Visualizer](http://latentflip.com/loupe/?code=!!!PGJ1dHRvbj5DbGljayBtZSE8L2J1dHRvbj4%3D)
#### Дополнительная информация:
[Филипп Робертс: Какая черта - цикл событий? | ОАО «Союз 2014»](https://www.youtube.com/watch?v=8aGhZQkoFbQ)
[Модель параллелизма и Event Loop MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop)

View File

@@ -0,0 +1,37 @@
---
title: Conditional Ternary Operators
localeTitle: Условные тернарные операторы
---
## Условные тернарные операторы
### Основное использование
Тернарный оператор - это компактный способ записи if-else внутри выражения.
```js
const thing = (condition) ? <if true> : <if false>;
```
Например
```js
const cappedInput = input > 50 ? 50 : input // this will cap the input at 50
```
### Еще раз, если
Вы также можете связать троичные операторы, таким образом вы будете иметь поведение if-else if-else
```js
<first condition> ? <value if first true>
: <second condition> ? <value if second is true>
: <fallback value>
```
> **Pro tip** : Как вы видите, вы можете разделить тернарный оператор на несколько строк Например
```
const wealth = housesOwned > 3 ? "rich"
: housesOwned > 1 ? "nothing to complain"
: "poor"
```

View File

@@ -0,0 +1,99 @@
---
title: Converting Strings to Numbers
localeTitle: Преобразование строк в числа
---
## Преобразование строк в числа
Функция `parseInt()` анализирует строковый аргумент и возвращает целое число указанного основани (основание в математических числовых системах).
```js
parseInt(string, radix);
```
### параметры
```
string
```
Значение для синтаксического анализа. Если `string` аргумент не является строкой, он преобразуется в строку (используя абстрактную операцию `ToString` ). Ведущие пробелы в строковом аргументе игнорируются. '= основание системы счисления Целое число от 2 до 36, которое представляет собой основание (основание в математических числовых системах) вышеупомянутой строки. Укажите `10` для десятичной цифровой системы, обычно используемой людьми. Всегда указывайте этот параметр, чтобы устранить недоразумение читателя и гарантировать предсказуемое поведение. Различные реализации приводят к разным результатам, когда редикс не указан, обычно по умолчанию значение равно 10. Возвращаемое значение Целочисленное число обрабатывается из данной строки. Если первый символ не может быть преобразован в число, возвращается `NaN` .
### Описание
Функция `parseInt` преобразует свой первый аргумент в строку, анализирует его и возвращает целое число или `NaN` . Если не `NaN` , возвращаемое значение будет целым числом, которое является первым аргументом, принятым как число в указанном базисе (base). Например, радиус 10 указывает на преобразование из десятичного числа, 8 восьмеричных, 16 шестнадцатеричных и т. Д. Для радиусов выше `10` буквы алфавита указывают цифры больше 9. Например, для шестнадцатеричных чисел (основание 16) используется от `A` до `F`
Если `parseInt` встречает символ, который не является цифрой в указанном радиусе, он игнорирует его и все последующие символы и возвращает целочисленное значение, обработанное до этой точки. `parseInt` усекает числа до целых значений. Допускаются ведущие и конечные пробелы.
Поскольку некоторые числа включают символ `e` в их `6.022e23` представлении (например, `6.022e23` ), использование `parseInt` для усечения числовых значений приведет к неожиданным результатам при использовании на очень больших или очень малых числах. `parseInt` не должен использоваться в качестве замены для `Math.floor()` .
Если radix `undefined` или 0 (или отсутствует), JavaScript предполагает следующее:
* Если начальная `string` начинается с «0x» или «0X», radix равен 16 (шестнадцатеричный), а оставшаяся часть строки анализируется.
* Если входная `string` начинается с «0», то радиус равен восьми (восьмеричный) или 10 (десятичный). Именно тот, который выбран радик, зависит от реализации. ECMAScript 5 указывает, что используется 10 (десятичное), но не все браузеры поддерживают это. По этой причине всегда указывайте radix при использовании parseInt.
* Если начальная `string` начинается с любого другого значения, то радиус равен 10 (десятичный).
* Если первый символ не может быть преобразован в число, parseInt возвращает NaN.
Для арифметических целей значение NaN не является числом в любом радиусе. Вы можете вызвать функцию isNaN, чтобы определить, является ли результат parseInt NaN. Если NaN передается на арифметические операции, результаты операции также будут NaN.
Чтобы преобразовать число в его строковый литерал в конкретном радиксе, используйте intValue.toString (radix).
### Примеры
Использование `parseInt` Следующие примеры возвращают `15` :
```js
parseInt(' 0xF', 16);
parseInt(' F', 16);
parseInt('17', 8);
parseInt(021, 8);
parseInt('015', 10); // parseInt(015, 10); will return 15
parseInt(15.99, 10);
parseInt('15,123', 10);
parseInt('FXX123', 16);
parseInt('1111', 2);
parseInt('15 * 3', 10);
parseInt('15e2', 10);
parseInt('15px', 10);
parseInt('12', 13);
```
Следующие примеры возвращают `NaN` :
```js
parseInt('Hello', 8); // Not a number at all
parseInt('546', 2); // Digits are not valid for binary representations
```
Следующие примеры возвращают `-15` :
```js
parseInt('-F', 16);
parseInt('-0F', 16);
parseInt('-0XF', 16);
parseInt(-15.1, 10)
parseInt(' -17', 8);
parseInt(' -15', 10);
parseInt('-1111', 2);
parseInt('-15e1', 10);
parseInt('-12', 13);
```
Следующие примеры возвращают `4` :
```js
parseInt(4.7, 10);
parseInt(4.7 * 1e22, 10); // Very large number becomes 4
parseInt(0.00000000000434, 10); // Very small number becomes 4
```
Следующий пример возвращает `224` :
```js
parseInt('0e0', 16);
```
#### Дополнительная информация:
[parseInt на MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators)
* [parseInt ()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt) и [parseFloat ()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseFloat) пытаются, если это возможно, преобразовать строку в число. Например, `var x = parseInt("100"); // x = 100`
* [Number ()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number) преобразуется в число, которое может быть представлено. Это включает даты в миллисекундах с полуночи 1 января 1970 UTC, логические значения до 1 или 0, а значения, которые не могут быть преобразованы в распознаваемое число, станут NaN. Это означает «Не номер», а также технически число!

View File

@@ -0,0 +1,156 @@
---
title: Error Handling and Try Catch Throw
localeTitle: Обработка ошибок и попытка бросить вызов
---
## Обработка ошибок и попытка бросить вызов
`try...catch..finally` оператор маркирует блок операторов, чтобы попробовать, и указывает ответ, если должно быть выбрано исключение. Оператор `try` содержит одно или несколько операторов и по крайней мере одно предложение `catch` или предложение `finally` или оба.
#### `try...catch` :
```javascript
try {
throw new Error('my error');
}
catch (e) {
console.error(e.message);
}
// Output:
// my error
```
#### `try...finally` :
```javascript
try {
throw new Error('my error');
}
finally {
console.error('finally');
}
// Output:
// finally
```
_Примечание:_ когда вы не `catch` ошибку, она фактически не «поймана», даже если блок `finally` выполнен. Это означает, что ошибка будет продолжаться до верхнего блока `try` (или основного блока).
#### `try...catch...finally` :
```javascript
try {
throw new Error('my error');
}
catch (e) {
console.error(e.message);
}
finally {
console.error('finally');
}
// Output:
// my error
// finally
```
Типичное использование:
```javascript
try {
openFile(file);
readFile(file)
}
catch (e) {
console.error(e.message);
}
finally {
closeFile(file);
}
```
#### Вложенная `try...catch` :
Вы также можете:
* Зафиксируйте оператор `try-catch` внутри блока `try` .
* Выбросьте ошибку вверх.
```javascript
try {
try {
throw new Error('my error');
}
catch (e) {
console.error('inner', e.message);
throw e;
}
finally {
console.log('finally');
}
}
catch (e) {
console.error('outer', e.message);
}
// Output:
// inner my error
// finally
// outer my error
```
#### Типы ошибок
##### Исходная ошибка
```javascript
var x;
try {
x = y + 1; // y cannot be referenced (used)
}
catch(err) {
console.log(err.name, err.message);
}
// ReferenceError y is not defined
```
##### Ошибка синтаксиса
```javascript
try {
eval("alert('Hello)"); // Missing ' will produce an error
}
catch(err) {
console.log(err.name,err.message);
}
// SyntaxError Invalid or unexpected token
```
##### Ошибка типа
```javascript
var num = 1;
try {
num.toUpperCase(); // You cannot convert a number to upper case
}
catch(err) {
console.log(err.name, err.message);
}
// TypeError num.toUpperCase is not a function
```
##### Ошибка URI
```javascript
try {
decodeURI("%%%"); // You cannot URI decode these percent signs
}
catch(err) {
console.log(err.name, err.message);
}
// URIError URI malformed
```
#### Дополнительная информация:
[MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/try…catch) [W3S](https://www.w3schools.com/js/js_errors.asp)

View File

@@ -0,0 +1,61 @@
---
title: Arrow Functions
localeTitle: Функции стрелки
---
## Функции стрелок
Функции в ES6 немного изменились. Я имею в виду синтаксис.
```javascript
// Old Syntax
function oldOne() {
console.log("Hello World..!");
}
// New Syntax
var newOne = () => {
console.log("Hello World..!");
}
```
Новый синтаксис может немного запутать. Но я попытаюсь объяснить синтаксис. Есть две части синтаксиса.
1. var newOne = ()
2. \=> {}
Первая часть просто объявляет переменную и присваивает ей функцию (т.е.) (). Он просто говорит, что переменная на самом деле является функцией.
Затем вторая часть объявляет часть тела функции. Часть стрелки с фигурными скобками определяет часть тела.
Другой пример с параметрами:
```javascript
let NewOneWithParameters = (a, b) => {
console.log(a+b); // 30
}
NewOneWithParameters(10, 20);
```
Скобки необязательны, если есть только одно имя параметра:
```javascript
let newOneWithOneParam = a => {
console.log(a);
}
```
Невероятным преимуществом функции стрелок является то, что вы не можете восстановить функцию стрелки. Он всегда будет вызываться с контекстом, в котором он был определен. Просто используйте обычную функцию.
```javascript
// Old Syntax
axios.get(url).then(function(response) {
this.data = response.data;
}).bind(this);
// New Syntax
axios.get(url).then(response => {
this.data = response.data;
});
```
Я не думаю, что мне нужно объяснить это. Это просто.

View File

@@ -0,0 +1,45 @@
---
title: Default Parameters
localeTitle: Параметры по умолчанию
---
## Параметры по умолчанию
Если вы знакомы с другими языками программирования, такими как Ruby, Python, то параметры по умолчанию для вас не новы.
Параметры по умолчанию - это параметры, которые задаются по умолчанию при объявлении функции. Но это значение может быть изменено при вызове функции.
пример
```
let Func = (a, b = 10) => {
return a + b;
}
Func(20); // 20 + 10 = 30
```
В приведенном выше примере мы передаем только один параметр. Функция использует параметр по умолчанию и выполняет функцию.
Рассмотрим другой пример:
```
Func(20, 50); // 20 + 50 = 70
```
В приведенном выше примере функция принимает два параметра, а второй параметр заменяет параметр по умолчанию.
Рассмотрим другой пример:
```
let NotWorkingFunction = (a = 10, b) => {
return a + b;
}
NotWorkingFunction(20); // NAN. Not gonna work.
```
Когда вы вызываете функцию с параметрами, они назначаются в порядке. (т.е.) первое значение присваивается первому параметру, а второе значение присваивается второму параметру и т. д.
В приведенном выше примере значение 20 присваивается параметру «a», а «b» не имеет значения. Таким образом, мы не получаем никакой информации.
Но,
```
NotWorkingFunction(20, 30); // 50;
```
Работает отлично.

View File

@@ -0,0 +1,65 @@
---
title: Destructuring Assignment
localeTitle: Назначение деструктуризации
---
## Назначение деструктуризации
Синтаксис присваивания Destructuring - это выражение Javascript, которое позволяет распаковывать значения или свойства из массивов или объектов.
Допустим, у вас есть массив, который содержит имя и фамилию, поскольку это два значения, но вы хотите переназначить эти значения на что-то более описательное. Для этого вы можете использовать Destructuring.
**ES5 Destructuring**
```js
var fullName = ["John", "Smith"];
var firstName = fullName[0];
var lastName = fullName[1];
console.log(firstName, lastName); // John Smith
```
**ES6 Destructuring**
```js
const fullName = ["John", "Smith"];
const [firstName, lastName] = fullName;
console.log(firstName, lastName); // John Smith
```
Приведенные выше примеры показывают преимущество использования назначения ES6 Destructuring Assignment.
Вы также можете использовать Destructuring для объектов с использованием аналогичного синтаксиса
```js
const fullName = { first: "John", last: "Smith"};
const {first, last} = fullName;
console.log(first, last); // John Smith
```
Object Destructuring Assignment немного отличается, потому что объект должен иметь свойства с именами, которые вы назначаете. Поэтому приведенный ниже код не будет работать так, как предполагалось.
```js
const fullName = { first: "John", last: "Smith"};
const {firstName, lastName} = fullName;
console.log(firstName, lastName); // undefined undefined
```
Вы все равно можете достичь желаемого результата, используя следующий синтаксис.
```js
const obj = {propertyName: value}
{propertyName: desiredVariableName} = obj
```
Наш предыдущий пример был бы переписан следующим образом:
```js
const fullName = { first: "John", last: "Smith"};
const {first: firstName, last: lastName} = fullName;
console.log(firstName, lastName); // John Smith
```

View File

@@ -0,0 +1,99 @@
---
title: for-of loop
localeTitle: for-of loop
---
## for-of Loop
for-of loop может использоваться для итерации по вещам, которые не являются массивами, но являются итерабельными, как коллекция DOM, строка, множество, аргументы или карта.
```javascript
const fruits = ['Orange','Apple','Grapes','Banana'];
for (const fruit of fruits)
{
console.log(fruit);
}
```
Вышеприведенный фрагмент вернет нам элементы в массиве выше.
## for-of loop в знании индекса
Что делать, если мы хотим знать индекс каждого элемента тоже. В этом случае мы можем перебирать fruit.entries (), который дает нам ArrayIterator.
```javascript
for (const fruit of fruits.entries())
{
console.log(fruit);
}
```
В приведенном выше фрагменте фрукты будут массивом с двумя предметами. 0-й элемент будет содержать индекс, а первый элемент будет содержать фактическое имя фрукта. Выход будет выглядеть так:
```
[0, "Orange"]
[1, "Apple"]
[2, "Grapes"]
[3, "Banana"]
```
Мы можем еще больше разрушить плоды, как показано ниже:
```javascript
for (const [index,fruit] of fruits.entries())
{
console.log(index,fruit);
}
```
## for-of loop в итерации по неизвестному числу аргументов
for-of loop очень полезен при итерации по неизвестному числу аргументов функции.
Предположим, мы хотим добавить числа, которые передаются функции, а количество аргументов не фиксировано.
«arguments» - это специальное ключевое слово в javascript, которое дает нам массив Array-ish (not array) и дает нам все аргументы.
```javascript
function addNumbers()
{
let sum = 0;
for (const num of arguments)
sum+=num;
return sum;
}
addNumbers(1, 2, 3, 4, 5); // 15
```
Здесь аргументы не являются истинным массивом, но мы можем перебирать его с помощью цикла for-of.
## for-of loop для итерации по строке
Мы можем использовать for-of loop для итерации по строке, чтобы дать нам символ по характеру строки.
```javascript
const name = 'John Doe';
for (const char of name)
console.log(char);
```
что приводит к следующему результату: символы 'J', 'o', 'h', 'n', '', 'D', 'o', 'e'
## for-of loop для итерации по набору DOM
Коллекции DOM не являются истинным типом массива. Они обычно являются NodeList для большинства браузеров. Если мы создадим несколько абзацев и хотим перебрать их, чтобы назначить какое-либо событие на каждом из абзацев, мы можем использовать цикл for-of.
```javascript
const paragraphs = document.querySelectorAll('p');
```
Здесь абзацы - это NodeList, который может быть повторен с использованием цикла for-of.
```javascript
for (const para of paragraphs)
{
console.log(para);
// We can add event listeners to each para here
}

View File

@@ -0,0 +1,58 @@
---
title: ES6
localeTitle: ES6
---
## ES6
6-е издание ECMAScript называется ES6.
Он также известен как ES2015.
Изменения добавляют много синтаксического сахара, которые позволяют разработчикам создавать приложения в объектно-ориентированном стиле.
> Пример ES5:
```javascript
var User = function () {
function User(name) {
this._name = name;
}
User.prototype.getName = function getName(x) {
return 'Mr./Mrs. ' + this._name;
};
return User;
}();
```
> Пример ES6:
```javascript
class User {
constructor(name) {
this._name = name
}
getName() {
return `Mr./Mrs. ${this._name}`
}
}
```
Было введено множество новых синтаксических функций, включая:
* классы,
* модули,
* шаблонный,
* для / из петель,
* генераторные выражения,
* стрелки,
* коллекции,
* обещания.
В настоящее время большинство функций доступны во всех популярных браузерах. Таблица [совместимости](https://kangax.github.io/compat-table/es6/) содержит всю информацию о доступности функций всех современных браузеров.
Часто появляются новые функции, которые являются частью преемника ES7. Обычный способ - перевести современный JavaScript (ES6, ES7 и другие экспериментальные предложения) на ES5. Это гарантирует, что и старые браузеры могут выполнять код. Существуют такие инструменты, как [Babel,](https://babeljs.io/) который преобразует новый JavaScript в ES5.
Помимо синтаксического сахара, поступающего из стандартов ECMAScript, существуют функции, требующие [Polyfill](https://babeljs.io/docs/usage/polyfill) . Обычно они необходимы, потому что к стандарту добавлены целые реализации класса / метода.

View File

@@ -0,0 +1,52 @@
---
title: Let and Const
localeTitle: Let и Const
---
## Позволять
пусть аналогичен var, но пусть имеет область видимости. let доступен только на уровне блока, он определен.
```
if (true) {
let a = 40;
console.log(a); //40
}
console.log(a); // undefined
```
В приведенном выше примере переменная 'a' определена внутри оператора If и поэтому недоступна вне функции.
Другой пример:
```
let a = 50;
let b = 100;
if (true) {
let a = 60;
var c = 10;
console.log(a/c); // 6
console.log(b/c); // 10
}
console.log(c); // 10
console.log(a); // 50
```
## Const
Константа используется для назначения постоянной переменной переменной. И значение не может быть изменено. Это фиксированная.
```
const a = 50;
a = 60; // shows error. You cannot change the value of const.
const b = "Constant variable";
b = "Assigning new value"; // shows error.
```
Рассмотрим другой пример.
```
const LANGUAGES = ['Js', 'Ruby', 'Python', 'Go'];
LANGUAGES = "Javascript"; // shows error.
LANGUAGES.push('Java'); // Works fine.
console.log(LANGUAGES); // ['Js', 'Ruby', 'Python', 'Go', 'Java']
```
Это может быть немного запутанным.
Рассмотрим таким образом. Всякий раз, когда вы определяете константную переменную, Javascript ссылается на адрес значения переменной. В нашем примере переменная 'LANGUAGES' фактически ссылается на память, выделенную для массива. Поэтому вы не можете изменить эту переменную, чтобы позже ссылаться на другую ячейку памяти. Всюду по программе он ссылается только на массив.

View File

@@ -0,0 +1,25 @@
---
title: Map Function
localeTitle: Функция карты
---
## Функция карты
Функция `map()` используется для создания нового массива из существующего, применяя функцию к каждому из элементов первого массива.
Исходный синтаксис функции карты:
```javascript
let new_arr = arr.map(function callback(currentValue, index, array) {
// Do some stuff with currentValue (index and array are optionals)
})
```
### Пример (ES6):
```javascript
const myArray_1 = [1, 2, 3, 4];
const myArray_2 = myArray_1.map(el => el * 2);
```
`myArray_2` будет содержать элементы: `[2, 4, 6, 8]`

View File

@@ -0,0 +1,62 @@
---
title: New String Functions
localeTitle: Новые строковые функции
---
## Новые строковые функции
Следующие четыре функции добавляются к строкам в ES6.
* начинается с
* EndsWith
* включает
* повторение
## начинается с:
Это чувствительная к регистру функция, которая помогает нам определить, начинается ли конкретная строка с некоторой подстроки.
startsWith принимает второй необязательный аргумент, называемый положением, который мы можем использовать в случае, когда мы хотим пропустить определенное число символов из начала строки перед поиском.
```javascript
const str ='Rachna';
str.startsWith('Rad') //false
str.startsWith('ra') //false as it is case sensitive
str.startsWith('Ra') //true
str.startsWith('ch',2) //true as we are searching from the second position
str.startsWith('ch',3) //false
```
## EndsWith
Это чувствительная к регистру функция, которая помогает нам определить, заканчивается ли конкретная строка некоторой подстрокой.
endsWith принимает второй необязательный аргумент endPosition, который мы можем использовать для включения количества символов перед поиском.
```javascript
const city= 'Delhi';
city.endsWith('Hi'); //false as it is case sensitive
city.endsWith('hi');//true
city.endsWith('l',3);//true - include only first three characters before searching
city.endsWith('l',4);//false
```
## включает
функция включает также функцию, чувствительную к регистру, которая проверяет, присутствует ли searchString в любом месте строки.
```javascript
const name='John Doe';
name.includes('do'); //false
name.includes('D'); //true
name.includes('Do'); //true
```
## повторение
repeat позволяет нам взять строку и повторить ее несколько раз.
```javascript
const str = 'This is repeated';
str.repeat(3); //"This is repeatedThis is repeatedThis is repeated"
```

View File

@@ -0,0 +1,25 @@
---
title: Some Function
localeTitle: Некоторая функция
---
## Некоторая функция
Функция `some()` используется для проверки того, удовлетворяет ли хотя бы одному элементу массива заданное условие. Функция возвращает `true` если условие выполняется одним элементом, а false, если какой-либо из элементов удовлетворяет условию
Исходный синтаксис некоторой функции:
```javascript
arr.some(function callback(currentValue, index, array) {
// Do some stuff with currentValue (index and array are optionals)
}, [thisArg]);
```
### Пример (ES6):
```javascript
const arr = [1, 4, 5, 11];
if (arr.some(el => el % 2 == 0)) {
console.log("There's at least one even number");
}
```

View File

@@ -0,0 +1,23 @@
---
title: Spread Operator
localeTitle: Оператор распространения
---
## Оператор распространения
Оператор распространения ( `...` ) позволяет получить элементы коллекции.
Одним из наиболее используемых комм является использование объектов `Node` при использовании селекторов запросов в браузере, чтобы сделать их итерабельными объектами массива:
```javascript
const paragraphs = document.querySelectorAll('p.paragraph');
const arr = [...paragraphs];
```
Другое использование оператора спредов для конкатенации массива:
```javascript
const arr_1 = [1, 2, 3, 4]
const arr_2 = [5, 6, 7, 8]
const arr_final = [...arr_1, ...arr_2]
// arr_final = [1, 2, 3, 4, 5, 6, 7, 8]

View File

@@ -0,0 +1,76 @@
---
title: Template Literals
localeTitle: Литералы шаблонов
---
## Литералы шаблонов
## Введение:
Когда мы хотим использовать переменную для создания строки, она становится очень болезненной, поскольку мы должны использовать знак + для конкатенации и отслеживания кавычек.
Теперь с ES6 мы можем сделать строку с использованием обратных ссылок и с помощью заполнителей, которые обозначены знаком доллара и фигурными фигурными скобками, например $ {expression}.
```javascript
const name='John';
const city='London';
Older Style:
const sentence ='My name is '+ name +'. I live in '+city.
ES6 way:
const sentence = `My name is ${name}. I live in ${city}`;
Here ${name} and ${city}are going to be interpolated by the variable name and city respectively.
```
## Строки MultiLine:
Пожилой стиль:
Когда мы хотели разбить нашу строку на несколько строк, нам пришлось использовать обратную косую черту.
```javascript
const multipleLineString= "We have \
multiple lines \
here";
```
Теперь, когда мы хотим создать mutiline строку, мы можем использовать строки шаблонов. Мы можем окружить нашу строку обратными окнами. Этот подход чрезвычайно полезен, когда мы хотим создать динамическую разметку html.
```javascript
const htmlMarkup = `
<html>
<head></head>
<title>Template string</title>
<body>Hello World</body>
</html>`;
```
## Вложение шаблонных строк:
Мы можем вложить их друг в друга.
```javascript
const cities =[
{name:'Delhi', year: 2010},
{name:'Mumbai', year: 2015},
{name:'Kolkata', year: 2017}];
const markup = `
<ul>
${cities.map(city=>`<li>I lived in ${city.name} in the year ${city.year}</li>`).join('')}
</ul>`;
```
Здесь оператор объединения после функции карты удаляет дополнительные запятые, которые добавляются после каждого li.
## Если утверждения и функции
Мы также можем использовать операторы If внутри строк шаблона.
```javascript
const data = {name: 'John', city: 'London', birthyear: 1900};
const markup = `<div>${data.name} lives in ${data.city}. ${data.birthyear ? `<div>He was born in the year ${data.birthyear}</div>`:''}</div>`;
```
В приведенном выше примере, если определен рождаемость, тогда создается div с содержимым «Он родился в году», иначе не было бы никакого div.

View File

@@ -0,0 +1,74 @@
---
title: Falsy Values
localeTitle: Фальшивые ценности
---
## Описание
Значение фальши - это значение, которое оценивается как ЛОЖЬ, например, при проверке переменной. В JavaScript всего шесть значений false: `undefined` , `null` , `NaN` , `0` , `""` (пустая строка) и `false` конечно.
## Проверка значений фальши на переменные
Можно проверить значение фальши в переменной с простым условным:
```javascript
if (!variable) {
// When the variable has a falsy value the condition is true.
}
```
## Общие примеры
```javascript
var string = ""; // <-- falsy
var filledString = "some string in here"; // <-- truthy
var zero = 0; // <-- falsy
var numberGreaterThanZero // <-- truthy
var emptyArray = []; // <-- truthy, we'll explore more about this next
var emptyObject = {}; // <-- truthy
```
## Развлечения с массивами
```javascript
if ([] == false) // <-- truthy, will run code in if-block
if ([]) // <-- truthy, will also run code in if-block
if ([] == true) // <-- falsy, will NOT run code in if-block
if (![]) // <-- falsy, will also NOT run code in if-block
```
## Предостережение
Помните о типе данных при оценке значения в булевом контексте. Если тип данных значения означает _число_ , оценка правдоподобия / ложности может привести к неожиданному результату:
```javascript
const match = { teamA: 0, teamB: 1 }
if (match.teamA)
// The following won't run due to the falsy evaluation
console.log('Team A: ' + match.teamA);
}
```
Альтернативой приведенному выше `typeof` использования является оценка значения с использованием `typeof` :
```javascript
const match = { teamA: 0, teamB: 1 }
if (typeof match.teamA === 'number')
console.log('Team A: ' + match.teamA);
}
```
## Больше информации
* **правдивый** | [Сообщение блога - Truthy & Falsey](http://james.padolsey.com/javascript/truthy-falsey/)
* [Фальши | Глоссарий | MDN](https://developer.mozilla.org/en-US/docs/Glossary/Falsy)
* [Truthy and Falsy: когда все не равно в JavaScript](https://www.sitepoint.com/javascript-truthy-falsy/)

View File

@@ -0,0 +1,179 @@
---
title: Form Validation
localeTitle: Проверка формы
---
## Проверка формы
Проверка правильности, обычно используемая на сервере, после того, как клиент ввел все необходимые данные, а затем нажал кнопку «Отправить». Если данные введенный клиентом, был неправильным или просто отсутствовал, сервер должен был отправить все данные обратно клиенту и запросить, чтобы форма была повторно отправлен с правильной информацией. Это был действительно длительный процесс, который ставил большую нагрузку на сервер.
JavaScript предоставляет способ проверки данных формы на компьютере клиента перед отправкой на веб-сервер. Проверка формы обычно выполняет два функции:
### Базовая проверка
Прежде всего, форма должна быть проверена, чтобы убедиться, что все обязательные поля заполнены. Для этого требуется всего лишь цикл через каждое поле в форме и проверьте данные.
### Проверка формата данных
Во-вторых, введенные данные должны быть проверены на правильную форму и значение. Ваш код должен содержать соответствующую логику для проверки правильности данных.
#### Пример:
```html
<html>
<head>
<title>Form Validation</title>
<script type="text/javascript">
<!--
// Form validation code will come here.
//-->
</script>
</head>
<body>
<form action="/cgi-bin/test.cgi" name="myForm" onsubmit="return(validate());">
<table cellspacing="2" cellpadding="2" border="1">
<tr>
<td align="right">Name</td>
<td><input type="text" name="Name" /></td>
</tr>
<tr>
<td align="right">EMail</td>
<td><input type="text" name="EMail" /></td>
</tr>
<tr>
<td align="right">Zip Code</td>
<td><input type="text" name="Zip" /></td>
</tr>
<tr>
<td align="right">Country</td>
<td>
<select name="Country">
<option value="-1" selected>[choose yours]</option>
<option value="1">USA</option>
<option value="2">UK</option>
<option value="3">INDIA</option>
</select>
</td>
</tr>
<tr>
<td align="right"></td>
<td><input type="submit" value="Submit" /></td>
</tr>
</table>
</form>
</body>
</html>
```
#### Вывод
Смотри [здесь](https://liveweave.com/LP9eOP)
### Базовая проверка формы
Сначала давайте посмотрим, как выполнить базовую проверку формы. В приведенной выше форме мы вызываем validate () для проверки данных при возникновении события onsubmit. следующий код показывает реализацию этой функции `validate()` .
```html
<script type="text/javascript">
// Form validation code will come here.
function validate()
{
if( document.myForm.Name.value == "" )
{
alert( "Please provide your name!" );
document.myForm.Name.focus() ;
return false;
}
if( document.myForm.EMail.value == "" )
{
alert( "Please provide your Email!" );
document.myForm.EMail.focus() ;
return false;
}
if( document.myForm.Zip.value == "" ||
isNaN( document.myForm.Zip.value ) ||
document.myForm.Zip.value.length != 5 )
{
alert( "Please provide a zip in the format #####." );
document.myForm.Zip.focus() ;
return false;
}
if( document.myForm.Country.value == "-1" )
{
alert( "Please provide your country!" );
return false;
}
return( true );
}
</script>
```
#### Вывод
Смотри [здесь](https://liveweave.com/pCPTnP)
### Проверка формата данных
Теперь мы увидим, как мы можем проверить наши введенные данные формы перед отправкой на веб-сервер.
В следующем примере показано, как проверить введенный адрес электронной почты. Адрес электронной почты должен содержать хотя бы знак «@» и точку (.). Кроме того, '@' должен не должен быть первым символом адреса электронной почты, а последняя точка должна быть по крайней мере одним символом после знака «@».
#### Пример:
```html
<script type="text/javascript">
function validateEmail()
{
var emailID = document.myForm.EMail.value;
atpos = emailID.indexOf("@");
dotpos = emailID.lastIndexOf(".");
if (atpos < 1 || ( dotpos - atpos < 2 ))
{
alert("Please enter correct email ID")
document.myForm.EMail.focus() ;
return false;
}
return( true );
}
</script>
```
#### Вывод
Смотри [здесь](https://liveweave.com/nznVs6)
### Ограничения формы HTML5
Некоторые из обычно используемых ограничений HTML5 для `<input>` - это атрибут `type` (например, `type="password"` ), `maxlength` , `required` и `disabled` . Меньше обычно используемым ограничением является `pattern` attrinute, который принимает регулярное выражение JavaScript.
### Библиотеки проверки
Примеры библиотек проверки включают:
* [Validate.js](http://rickharrison.github.com/validate.js/)
* [Проверка](http://bassistance.de/jquery-plugins/jquery-plugin-validation/)
* [Valid8](http://unwrongest.com/projects/valid8/)
### Больше информации
* [Проверка данных формы | MDN](https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation)
* [Проверка ограничений | MDN](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation)
* [Tutorialspoint](https://www.tutorialspoint.com/javascript/javascript_form_validations.htm)

View File

@@ -0,0 +1,67 @@
---
title: Function Composition
localeTitle: Состав функции
---
## Состав функции
Состав функции - это поточечное применение одной функции к результату другого. Разработчики делают это в ручном режиме каждый день, когда гнездо функционирует:
```javascript
compose = (fn1, fn2) => value => fn2(fn1(value))
```
Но это трудно читать. Существует лучший способ использования композиции функций. Вместо того, чтобы читать их изнутри:
```javascript
add2AndSquare = (n) => square(add2(n))
```
Мы можем использовать функцию более высокого порядка, чтобы упорядочить их упорядоченно.
```javascript
add2AndSquare = compose( add2, square)
```
Простая реализация компоновки будет заключаться в следующем:
```javascript
compose = (f1, f2) => value => f2( f1(value) );
```
Чтобы получить еще большую гибкость, мы можем использовать функцию reduceRight:
```javascript
compose = (...fns) => (initialVal) => fns.reduceRight((val, fn) => fn(val), initialVal);
```
Чтение композиции слева направо позволяет четко связывать функции более высокого порядка. В реальных примерах мира добавляются аутентификации, журналирование и свойства контекста. Это метод, который позволяет повторно использовать на самом высоком уровне. Вот несколько примеров использования:
```javascript
// example
const add2 = (n) => n + 2;
const times2 = (n) => n * 2;
const times2add2 = compose(add2, times2);
const add6 = compose(add2, add2, add2);
times2add2(2); // 6
add2tiems2(2); // 8
add6(2); // 8
```
Вы можете подумать, что это расширенное функциональное программирование, и это не относится к программированию интерфейса. Но это также полезно в приложениях с одной страницей. Например, вы можете добавить поведение к компоненту React, используя компоненты более высокого порядка:
```javascript
function logProps(InputComponent) {
InputComponent.prototype.componentWillReceiveProps = function(nextProps) {
console.log('Current props: ', this.props);
console.log('Next props: ', nextProps);
};
return InputComponent;
}
// EnhancedComponent will log whenever props are received
const EnhancedComponent = logProps(InputComponent);
```
В заключение функциональный состав обеспечивает возможность повторного использования функциональности на очень высоком уровне. Если функции хорошо структурированы, это позволяет разработчикам создавать новое поведение на основе существующего поведения.

View File

@@ -0,0 +1,71 @@
---
title: Function Invocation
localeTitle: Вызов функции
---
## Вызов функции
Код внутри функции выполняется при вызове функции. Обычно используется термин «вызов функции» вместо «вызывать функцию».
Функции должны быть в области действия, когда они вызываются. Объем функции - это функция, в которой она объявлена, или вся программа, если она объявлена ​​на верхнем уровне.
```javascript
function myFunction(a, b) {
return a * b;
}
myFunction(10, 2); // Function invocation, will return 20
//optional parameters (es6 only)
//allow to set optional parameters
function myFunction(a, b = 10) {
return a * b;
}
myFunction(1); // Function invocation, will return 10
myFunction(1,5); // Function invocation, will return 5
```
В примере кода a и b являются параметрами функции, которые содержат значения 10 и 2, которые являются аргументами, используемыми в вызове функции.
### Вызов функции как метода
В JavaScript вы можете определять функции как методы объекта.
В следующем примере создается объект ( `myObject` ) с двумя свойствами ( `firstName` и `lastName` ) и методом ( `fullName` ):
```javascript
var myObject = {
firstName:"John",
lastName: "Doe",
fullName: function () {
return this.firstName + " " + this.lastName;
}
}
myObject.fullName(); // Function invoked as a method, will return "John Doe"
```
### Функции стрелки
В новейшей версии Javascript вы также можете сократить синтаксис с помощью функций стрелок. На следующем рисунке показаны две функции. Один из них написан в стандартной форме, один написан как функция стрелки. Имейте в виду, что функции стрелок не имеют собственных, аргументов, супер или new.target.
```javascript
//regular function
function addStuff(args) {
return args + 2;
}
addStuff(2);
//returns 4
//arrow function
var addStuff = (args) => args + 2;
addStuff(2);
//returns 4
```
Эта сокращенная версия функции стрелки имеет неявный возврат, поэтому вы не указываете оператор return.
### Дополнительная информация:
* Документация по функциям: [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions)

View File

@@ -0,0 +1,61 @@
---
title: Functions List
localeTitle: Список функций
---
![Неофициальный логотип JS](//discourse-user-assets.s3.amazonaws.com/original/2X/0/0584980f425bfbbe1e14001557ff4f5bab8f61ec.jpg)
JavaScript (JS) - легкий, интерпретируемый, язык программирования с первоклассными функциями. Наиболее известный как язык сценариев для веб-страниц, многие не-браузерные среды также используют его, такие как [node.js](https://nodejs.org) и [Apache CouchDB](http://couchdb.apache.org/) . JS - это прототип, мультипарадигма, динамический язык сценариев, поддерживающий объектно-ориентированные, императивные и декларативные (например, функциональное программирование) стили.
JavaScript работает на клиентской стороне Интернета, который может использоваться для разработки / программирования того, как веб-страницы ведут себя при возникновении события. JavaScript - это простой в освоении, а также мощный язык сценариев, широко используемый для управления поведением веб-страниц.
[Осмотр документов MDN в JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript) , они являются отличным преимуществом в обучении.
У нас также есть отличные статьи на нашей вики:
* [Преимущества и недостатки JavaScript](http://forum.freecodecamp.com/t/advantages-and-disadvantages-of-javascript/14280)
* **Типы данных JavaScript:**
* [Булевы](http://forum.freecodecamp.com/t/javascript-boolean/14311)
* **Строки JavaScript:**
* [String.prototype.charAt ()](http://forum.freecodecamp.com/t/javascript-string-prototype-charat/15932)
* [String.prototype.charCodeAt ()](http://forum.freecodecamp.com/t/javascript-string-prototype-charcodeat/15933)
* [String.prototype.concat ()](http://forum.freecodecamp.com/t/javascript-string-prototype-concat/15935)
* [String.prototype.indexOf ()](https://forum.freecodecamp.org/t/javascript-string-prototype-indexof/15936)
* [String.prototype.lastIndexOf ()](http://forum.freecodecamp.com/t/string-prototype-lastindexof/15939)
* [String.prototype.match ()](http://forum.freecodecamp.com/t/javascript-string-prototype-match/15941)
* [String.prototype.replace ()](http://forum.freecodecamp.com/t/javascript-string-prototype-replace/15942)
* [String.prototype.slice ()](http://forum.freecodecamp.com/t/javascript-string-prototype-slice/15943)
* [String.prototype.split ()](http://forum.freecodecamp.com/t/javascript-string-prototype-split/15944)
* [String.prototype.substr ()](http://forum.freecodecamp.com/t/javascript-string-prototype-substr/15945)
* [String.prototype.substring ()](http://forum.freecodecamp.com/t/javascript-string-prototype-substring/15947)
* [String.prototype.toLowerCase ()](http://forum.freecodecamp.com/t/javascript-string-prototype-tolowercase/15948)
* [String.prototype.toUpperCase ()](http://forum.freecodecamp.com/t/javascript-string-prototype-touppercase/15950)
* **Массивы JavaScript:**
* [Array.isArray ()](http://forum.freecodecamp.com/t/javascript-array-isarray/14284)
* [Array.prototype.concat ()](http://forum.freecodecamp.com/t/javascript-array-prototype-concat/14286)
* [Array.prototype.every ()](http://forum.freecodecamp.com/t/javascript-array-prototype-every/14287)
* [Array.prototype.filter ()](http://forum.freecodecamp.com/t/javascript-array-prototype-filter/14289)
* [Array.prototype.forEach ()](http://forum.freecodecamp.com/t/javascript-array-prototype-foreach/14290)
* [Array.prototype.indexOf ()](http://forum.freecodecamp.com/t/javascript-array-prototype-indexof/14291)
* [Array.prototype.join ()](http://forum.freecodecamp.com/t/javascript-array-prototype-join/14292)
* [Array.prototype.lastIndexOf ()](http://forum.freecodecamp.com/t/javascript-array-prototype-lastindexof/14293)
* [Array.prototype.map ()](http://forum.freecodecamp.com/t/javascript-array-prototype-map/14294)
* [Array.prototype.pop ()](http://forum.freecodecamp.com/t/javascript-array-prototype-pop/14296)
* [Array.prototype.push ()](http://forum.freecodecamp.com/t/javascript-array-prototype-push/14298)
* [Array.prototype.reduce ()](http://forum.freecodecamp.com/t/javascript-array-prototype-reduce/14299)
* [Array.prototype.reverse ()](http://forum.freecodecamp.com/t/javascript-array-prototype-reverse/14300)
* [Array.prototype.shift ()](http://forum.freecodecamp.com/t/javascript-array-prototype-shift/14301)
* [Array.prototype.slice ()](http://forum.freecodecamp.com/t/javascript-array-prototype-slice/14302)
* [Array.prototype.some ()](http://forum.freecodecamp.com/t/javascript-array-prototype-some/14304)
* [Array.prototype.sort](http://forum.freecodecamp.com/t/javascript-array-prototype-sort/14306) , [()](http://forum.freecodecamp.com/t/javascript-array-prototype-sort/14306)
* [Array.prototype.splice ()](http://forum.freecodecamp.com/t/javascript-array-prototype-splice/14307)
* [Array.prototype.toString ()](http://forum.freecodecamp.com/t/javascript-array-prototype-tostring/14308)
* [Array.prototype.unshift ()](http://forum.freecodecamp.com/t/javascript-array-prototype-unshift/14309)
* **Петли JavaScript:**
* [Loops](http://forum.freecodecamp.com/t/javascript-loops/14681)
* [Пока цикл](http://forum.freecodecamp.com/t/javascript-while-loop/14668)
* [Do While Loop](http://forum.freecodecamp.com/t/javascript-do-while-loop/14662)
* [Для цикла](http://forum.freecodecamp.com/t/javascript-for-loop/14666)
* [Для In Loop](http://forum.freecodecamp.com/t/javascript-for-in-loop/14665)
* [Для цикла](http://forum.freecodecamp.com/t/javascript-for-of-loop/14671)
Ознакомьтесь с нашими другими статьями по JavaScript: [https://www.freecodecamp.com/wiki](https://www.freecodecamp.com/wiki) .

View File

@@ -0,0 +1,9 @@
---
title: Get Timestamp
localeTitle: Получить отметку времени
---
Вы можете использовать `Date.now()` чтобы получить текущую `Date.now()` метку в миллисекундах.
Вы можете легко преобразовать метку времени в такие секунды: `Math.floor(Date.now() / 1000)`
Если ваш браузер не поддерживает `Date.now()` , вы можете использовать `new Date().getTime()` чтобы получить метку времени в миллисекундах.

View File

@@ -0,0 +1,43 @@
---
title: Global Object
localeTitle: Глобальный объект
---
Глобальный объект - это объект, который инициализируется интерпретатором JavaScript перед выполнением кода. Все переменные, объявленные в глобальной области (см.: [Области](http://forum.freecodecamp.com/t/scopes-in-javascript/14696) ), хранятся в глобальном объекте как свойства.
В среде Node.js к глобальному объекту можно получить доступ к `global` ключевому слову, тогда как в окне браузера к нему можно получить доступ с помощью ключевого слова `window` . `this` ключевое слово также ссылается на глобальный объект при использовании в глобальном масштабе. Обратите внимание, что использование `this` в глобальной области действия будет возвращено `undefined` если включен `strict mode` .
Например:
```javascript
// global scope
var foo = "bar";
console.log(global.foo); // bar (in a Node environment)
console.log(window.foo); // bar (in a browser window)
console.log(this.foo); // bar (if strict mode is disabled)
```
Здесь важна различие между локальными областями функций и глобальной областью: глобальный объект содержит только переменные, объявленные в глобальной области действия, а не локальные области функций.
Глобальный объект также содержит свойства `NaN` , `undefined` и `Infinity` и следующие функции:
1. `decodeURI()`
2. `decodeURIComponent()`
3. `encodeURI()`
4. `encodeURIComponent()`
5. `escape()`
6. `eval()`
7. `GetObject()`
8. `isFinite()`
9. `isNaN()`
10. `parseFloat()`
11. `parseInt()`
12. `ScriptEngine()`
13. `ScriptEngineBuildVersion()`
14. `ScriptEngineMajorVersion()`
15. `ScriptEngineMinorVersion()`
16. `unescape()`
# Рекомендации
1. MSDN: [глобальный объект (Javascript)](https://msdn.microsoft.com/en-us/library/52f50e9t)

View File

@@ -0,0 +1,67 @@
---
title: Global Variables
localeTitle: Глобальные переменные
---
Глобальные переменные объявляются вне функции для доступности всей программы, в то время как локальные переменные хранятся в функции , используя `var` для использования только в пределах этой функции в [объеме](https://developer.mozilla.org/en-US/docs/Glossary/Scope) . Если вы объявите переменную без использования `var` , даже если она находится внутри функции, она будет по-прежнему рассматриваться как глобальная:
```javascript
var x = 5; //global
function someThing(y) {
var z = x + y;
console.log(z);
}
function someThing(y) {
x = 5; //still global!
var z = x + y;
console.log(z);
}
function someThing(y) {
var x = 5; //local
var z = x + y;
console.log(z);
}
```
Глобальная переменная также является объектом текущей области, такой как окно браузера:
```javascript
var dog = Fluffy;
console.log(dog); //Fluffy;
var dog = Fluffy;
console.log(window.dog); //Fluffy
```
Рекомендуется минимизировать глобальные переменные. Поскольку переменную можно получить в любом месте программы, они могут вызвать странное поведение.
Рекомендации:
* [var -Javascript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var)
* [Вы не знаете JavaScript: области и закрытие](https://github.com/getify/You-Dont-Know-JS/tree/master/scope%20%26%20closures)
Дополнительная информация:
* [Рекомендации по использованию JavaScript: избегайте глобальных](http://www.w3.org/wiki/JavaScript_best_practices#Avoid_globals)
## \* В [чем разница между глобальным var и window.variable в javascript?](https://stackoverflow.com/questions/6349232/whats-the-difference-between-a-global-var-and-a-window-variable-in-javascript)
Объем переменных JavaScript является глобальным или локальным. Глобальные переменные объявляются НАРУЖНОЙ функцией, и ее значение доступно / изменено в течение всей программы.
Вы должны ВСЕГДА использовать **var,** чтобы объявить свои переменные (сделать локально), иначе он установит GLOBALY
Будьте осторожны с глобальными переменными, потому что они рискованны. Большую часть времени вы должны использовать закрытие для объявления переменных. Пример:
```javascript
(function(){
var myVar = true;
})();
```
#### Дополнительная информация:
* [Рекомендации по использованию JavaScript: избегайте глобальных](http://www.w3.org/wiki/JavaScript_best_practices#Avoid_globals)
* [Глобальные переменные плохи](http://c2.com/cgi/wiki?GlobalVariablesAreBad)
* [MDN - глобальные переменные](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var)

View File

@@ -0,0 +1,41 @@
---
title: Higher Order Functions
localeTitle: Функции более высокого порядка
---
## Функции более высокого порядка
Функция высшего порядка - это любая функция, которая возвращает функцию при выполнении, принимает функцию как один или несколько своих аргументов или и то, и другое. Если вы использовали какой-либо из методов `Array` например `map` или `filter` , или передали функцию обратного вызова в `$.get` jQuery, вы уже работали с функциями более `$.get` порядка.
Когда вы используете `Array.map` , вы предоставляете функцию как единственный аргумент, который применяется к каждому элементу, содержащемуся в массиве.
```javascript
var arr = [ 1, 2, 3 ];
var arrDoubled = arr.map(function(num) {
return num * 2;
});
console.log(arrDoubled); // [ 2, 4, 6 ]
```
Функции более высокого порядка также могут возвращать функцию. Например, вы можете сделать функцию `multiplyBy` которая принимает число и возвращает функцию, которая умножает другое число, которое вы предоставляете первым предоставленным номером. Вы можете использовать этот подход для создания функции `multiplyByTwo` для перехода к `Array.map` . Это даст вам тот же результат, который вы видели выше.
```javascript
function multiplyBy(num1) {
return function(num2) {
return num1 * num2;
}
}
var multiplyByTwo = multiplyBy(2);
var arr = [ 1, 2, 3 ];
var arrDoubled = arr.map(multiplyByTwo);
console.log(arrDoubled); // [ 2, 4, 6 ]
```
См. Руководство по [закрытию](https://guide.freecodecamp.org/javascript/closures) для получения дополнительной информации о том, как `multiplyByTwo` сохраняет ссылку на `num1` в приведенном выше примере.
[Дополнительная информация о Closures](https://eloquentjavascript.net/05_higher_order.html)

View File

@@ -0,0 +1,40 @@
---
title: HTML DOM getElementById Method
localeTitle: Метод HTML DOM getElementById
---
Метод `getElementById()` возвращает элемент с атрибутом id с указанным значением. Он принимает один аргумент, который представляет собой чувствительную к регистру строку идентификатора для нужного элемента.
Этот метод является одним из наиболее распространенных методов в HTML DOM и используется почти каждый раз, когда вы хотите манипулировать или получать информацию от элемента в вашем документе. Вот простой пример синтаксиса:
**Содержание HTML:**
```html
<div id="demo"></div>
```
**Содержание JavaScript:**
```javascript
document.getElementById("demo"); // Returns the element with id "demo"
```
Если у вас более одного элемента с одинаковым значением `id` (неверная практика!), `getElementById` вернет первый найденный элемент:
```html
<div id="demo">First</div>
<div id="demo">Second</div>
```
```javascript
document.getElementById("demo"); // Returns the element with id "demo" containing 'First'
```
#### Дополнительная информация:
[document.getElementById ()](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById)
#### Альтернативные решения:
Обычно используемая альтернатива `document.getElementById` использует селектор jQuery, который вы читаете [здесь](https://github.com/freeCodeCamp/guides/tree/master/src/pages/jquery) .

View File

@@ -0,0 +1,60 @@
---
title: HTML Dom Innerhtml Property
localeTitle: Свойство HTML Dom Innerhtml
---
## Свойство HTML Dom Innerhtml
Внутренняя поддержка `innerHTML` возвращает содержимое HTML внутри выбранного элемента, а также позволяет вам определять новый HTML-контент.
**_СОДЕРЖАНИЕ_**
```html
<div id="demo">
<p>Demo</p>
</div>
```
```javascript
var element = document.getElementById("demo");
console.log(element.innerHTML) //logs <p>Demo</p>
```
**_СОДЕРЖАНИЕ ЭЛЕМЕНТА_**
```html
<div id="demo"></div>
```
```javascript
var element = document.getElementById("demo");
element.innerHTML = "<div>Demo</div>";
```
HTML теперь будет как
```html
<div id="demo">
<div>Demo</div>
</div>
```
**_ОБСУЖДЕНИЕ БЕЗОПАСНОСТИ_**
Значение, установленное для `innerHTML` должно поступать из надежных источников, поскольку Javascript будет помещать что-либо внутри этого элемента, и он будет запущен как простой HTML.
Пример:
Установка значения « `<script>alert();</script>` » приведет к запуску функции «alert ()» Javascript:
```javascript
var element = document.getElementById("demo");
element.innerHTML = "<script>alert();</script>";
```
Этот тип атаки называется [Cross Site Scripting, или XSS для краткости](https://en.wikipedia.org/wiki/Cross-site_scripting) .
Это один из наиболее распространенных способов совершения атаки XSS. Если вы хотите узнать немного больше и научиться защищаться от него, [ознакомьтесь с этим ресурсом](https://xss-game.appspot.com/)

View File

@@ -0,0 +1,38 @@
---
title: HTML DOM querySelector()
localeTitle: HTML DOM querySelector ()
---
Метод метода `querySelector()` возвращает `first` элемент в документе, который соответствует указанному селектору или группе селекторов. Если совпадений не найдено, возвращается null.
**Содержание HTML:**
```html
<div id="id-example"></div>
<div class="class-example"></div>
<a>element-example</a>
```
**Содержание JavaScript:**
```javascript
document.querySelector("#id-example"); // Returns the element with id "id-example"
document.querySelector(".class-example"); // Returns the element with class "class-example"
document.querySelector("a"); // Returns the "a" element
```
Примечание `querySelector()` возвращает первый соответствующий элемент, чтобы вернуть все совпадения, вместо этого используйте метод querySelectorAll ().
```html
<div id="example">First</div>
<div id="example">Second</div>
```
```javascript
document.querySelector("#example"); // Returns only the element containing 'First'
```
#### Дополнительная информация:
[MDN - document.querySelector ()](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector)

View File

@@ -0,0 +1,44 @@
---
title: HTML Dom
localeTitle: HTML Dom
---
## HTML Dom
С HTML DOM JavaScript может получить доступ и изменить все элементы HTML-документа.
Когда веб-страница загружается, браузер создает **D** ocument **O** bject **M** odel на странице.
Модель HTML DOM построена как дерево объектов:
Каждый элемент в DOM также называется узлом.
```html
<html>
<head>
<title> My title </title>
</head>
<body>
<a href="#">My Link</a>
<h1> My header </h1>
</body>
</html>
```
DOM для вышеуказанного HTML выглядит следующим образом:
![Дерево DOM](https://www.w3schools.com/js/pic_htmltree.gif)
С объектной моделью JavaScript получает все необходимое для создания динамического HTML:
* JavaScript может изменять все элементы HTML на странице
* JavaScript может изменить все атрибуты HTML на странице
* JavaScript может изменять все стили CSS на странице
* JavaScript может удалить существующие элементы и атрибуты HTML
* JavaScript может добавлять новые HTML-элементы и атрибуты
* JavaScript может реагировать на все существующие HTML-события на странице
* JavaScript может создавать новые HTML-события на странице
#### Дополнительная информация:
[W3C - HTML DOM](https://www.w3schools.com/js/js_htmldom.asp)

View File

@@ -0,0 +1,73 @@
---
title: If-Else Statement
localeTitle: If-Else Statement
---
## Введение
Оператор `if` выполняет оператор, если указанное условие `true` . Если условие `false` , другой оператор может быть выполнен с использованием инструкции `else` .
**Примечание.** Оператор `else` является необязательным.
```javascript
if (condition)
/* do something */
else
/* do something else */
```
Несколько команд `if...else` могут быть привязаны для создания предложения `else if` . Это указывает новое условие для проверки и может быть повторено для проверки нескольких условий, проверяя, пока не будет представлен действительный оператор.
```javascript
if (condition1)
/* do something */
else if (condition2)
/* do something else */
else if (condition3)
/* do something else */
else
/* final statement */
```
**Примечание.** Если вы хотите выполнить более одного оператора в части `if` , `else` или `else if` , требуются фигурные скобки вокруг операторов:
```javascript
if (condition) {
/* do */
/* something */
/* with multiple statements */
} else {
/* do something */
/* else */
}
```
[Ссылка MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if…else) | [Ссылка MSDN](https://msdn.microsoft.com/en-us/library/85yyde5c.aspx)
## Примеры
**Использование** `if...else` :
```javascript
// If x=5 z=7 and q=42. If x is not 5 then z=19.
if (x == 5) {
z = 7;
q = 42
else
z = 19;
```
**Использование** `else if` :
```javascript
if (x < 10)
return "Small number";
else if (x < 50)
return "Medium number";
else if (x < 100)
return "Large number";
else {
flag = 1;
return "Invalid number";
}
```

View File

@@ -0,0 +1,60 @@
---
title: Immediately Invoked Functions Expressions(IIFEs)
localeTitle: Выражения мгновенно выработанных функций (IIFE)
---
## Заявление о функции
Функция, созданная с объявлением функции, является объектом Function и имеет все свойства, методы и поведение объектов Function. Пример:
```javascript
function statement(item){
console.log('Function statement example '+ item);
}
```
## Выражение функции
Выражение функции аналогично выражению функции, за исключением того, что имя функции может быть опущено для создания анонимных функций. Пример:
```javascript
var expression = function (item){
console.log('Function expression example '+ item);
}
```
## Выражения мгновенно выработанных функций
В скором времени, когда функция создается, она вызывает сам вызов явно не требуется. В приведенном ниже примере переменная iife будет хранить строку, возвращаемую выполнением функции.
```javascript
var iife = function (){
return 'Immediately Invoked Function Expressions(IIFEs) example ';
}();
console.log(iife); // 'Immediately Invoked Function Expressions(IIFEs) example '
```
Заявление перед IIFE должно всегда заканчиваться a; или он выдаст ошибку.
**Плохой пример** :
```javascript
var x = 2 //no semicolon, will throw error
(function(y){
return x;
})(x); //Uncaught TypeError: 2 is not a function
```
## Зачем использовать выраженные выражения с выраженным выражением?
```javascript
(function(value){
var greet = 'Hello';
console.log(greet+ ' ' + value);
})('IIFEs');
```
В приведенном выше примере, когда javascript engine выполняет над кодом, он создаст глобальный контекст выполнения, когда увидит код и создаст объект функции в памяти для IIFE. И когда он достигает строки `46` из-за которой вызывается функция, новый «контекст выполнения» создается «на лету», поэтому переменная приветствия переходит в контекст выполнения функции не в глобальную, и это делает ее уникальной. `This ensures that code inside IIFE does not interfere with other code or be interfered by another code` поэтому код безопасен.
#### Больше информации
[Немедленное выражение функции в Википедии](https://en.wikipedia.org/wiki/Immediately-invoked_function_expression) [Что делает ведущая точка с запятой в библиотеках JavaScript?](https://stackoverflow.com/questions/1873983/what-does-the-leading-semicolon-in-javascript-libraries-do)

View File

@@ -0,0 +1,21 @@
---
title: Immutable Types
localeTitle: Неизменяемые типы
---
> Неизменяемые средства неизменяемы, т. Е. Вы не можете изменить.
Javascript имеет множество неизменных типов, например, примитивный тип `string` . Попробуйте это в консоли.
```
s = "red";
console.log(s[1]); //→ "e"
s[1] = "x";
console.log(s) //→ "red"
```
`s` не изменилось! WAT !
## Детали
Некоторые строковые методы, такие как `String.replace` возвращают новую строку.
JavaScript имеет один сложный тип данных, тип данных объекта и имеет пять простых типов данных: Number, String, Boolean, Undefined и Null. Эти простые (примитивные) типы данных неизменяемы (не могут быть изменены), в то время как объекты изменяемы (могут быть изменены).

View File

@@ -0,0 +1,35 @@
---
title: JavaScript
localeTitle: JavaScript
---
## JavaScript
JavaScript является наиболее широко используемым языком сценариев на Земле. И он имеет самую большую библиотечную экосистему любого языка программирования.
JavaScript является основным языком Интернета и единственным языком программирования, который может работать во всех основных веб-браузерах.
Примечательно, что JavaScript не имеет никакого отношения к Java. [JavaScript: самый неправильный язык программирования в мире](http://www.crockford.com/javascript/javascript.html)
Официальное название JavaScript - ECMAScript, определенный в стандарте [ECMA-262](https://www.ecma-international.org/publications/standards/Ecma-262.htm)
Если вы хотите больше узнать о языке JavaScript и почему он так широко используется, прочитайте статью Куинси Ларсона - [Какой язык программирования я должен изучить в первую очередь?](https://medium.freecodecamp.org/what-programming-language-should-i-learn-first-%CA%87d%C4%B1%C9%B9%C9%94s%C9%90%CA%8C%C9%90%C9%BE-%C9%B9%C7%9D%CA%8Dsu%C9%90-19a33b0a467d) - или смотреть это [вдохновляющее видео от Preethi Kasireddy](https://www.youtube.com/watch?v=VqiEhZYmvKk) .
## Автономные движки JavaScript
Mozilla's SpiderMonkey, первый в мире движок JavaScript, который в настоящее время используется в Mozilla Firefox. V8, механизм JavaScript Google, используемый в Google Chrome.
Скрипт Google Apps, интерпретатор на основе облачных / серверных сторон, который обеспечивает программный «макроподобный» контроль над службами и документами Google Apps.
Node.js, построенный на вершине V8, платформа, которая позволяет приложениям на стороне сервера писать в JavaScript.
Windows включает JScript, вариант JavaScript в Windows Script Host.
Чакра, вилка Jscript, разработана Microsoft и используется в браузере Edge.
Mozilla также предлагает Rhino, реализацию JavaScript, встроенную в Java, как правило, встроенную в Java-приложения для предоставления сценариев конечным пользователям.
WebKit (кроме проекта Chromium) реализует механизм JavaScriptCore.
## Рамки JavaScript
Наиболее часто используемые рамки JavaScript - это React JS, Angular JS, Create JS, jQuery, nodeJS и т. Д. Подробнее см. По этой [ссылке](https://javascriptreport.com/the-ultimate-guide-to-javascript-frameworks/) .

View File

@@ -0,0 +1,63 @@
---
title: Location Object
localeTitle: Объект местоположения
---
## Объект местоположения
Объект «Местоположение» предоставляет API (интерфейс прикладного программирования), который позволяет извлекать URL-адрес, настройку URL-адреса или доступ к частям URL-адреса. Он уже реализован для вас по умолчанию для объектов Window и Document. Примечание. Для объекта местоположения нет общедоступного стандарта, но все основные браузеры поддерживают его.
### Свойства объекта местоположения
| Недвижимость | Описание | | ---------- | -------------------------------------- ------------------- | | хэш | Устанавливает или возвращает опорную часть (#) URL-адреса | | хост | Устанавливает или возвращает имя хоста и номер порта URL | | имя хоста | Устанавливает или возвращает имя хоста URL-адреса | | href | Устанавливает или возвращает весь URL | | происхождение | Возвращает протокол, имя хоста и номер порта URL | | путь | Устанавливает или возвращает путь к URL-адресу | | порт | Устанавливает или возвращает номер порта URL-адреса | | протокол | Задает или возвращает протокол URL-адреса | | Поиск | Задает или возвращает часть запроса URL-адреса |
### Методы определения местоположения
| Метод | Описание | | ----------- | ------------------------------------- --------- | | assign () | Загружает новый документ | | reload () | Перезагружает текущий документ | | replace () | Заменяет текущий документ новым |
### Примеры
Объекты местоположения доступны:
```javascript
console.log(window.location);
// > https://guide.freecodecamp.org/javascript/location-object
console.log(document.location);
// > https://guide.freecodecamp.org/javascript/location-object
```
Вы также можете программно создать объект Location элемента HTML `<a>` или элемент HTML `<area>` с помощью JavaScript.
```javascript
var anchor = document.createElement('a');
anchor.url = "https://guide.freecodecamp.org/javascript/location-object";
```
После того, как у вас есть объект с набором URL (включая окно), API-интерфейс Location позволяет вам получить доступ к частям URL-адреса.
```javascript
console.log(anchor.protocol);
// > https:
console.log(anchor.host);
// > guide.freecodecamp.org (includes port number if applicable. Example: guide.freecodecamp.org:8080)
```
Другие свойства «Местоположение», к которым вы можете получить доступ:
* `anchor.hostname` - _guide.freecodecamp.org_
* `anchor.port` - _8080_
* `anchor.pathname` - _/ javascript / location-object_
* `anchor.origin` - _https://developer.mozilla.org_
Если ваш URL-адрес содержит параметры или хэши, вы можете обращаться к ним следующим образом:
```javascript
// If your URL is https://guide.freecodecamp.org/javascript?param=location#other-properties
console.log(window.location.search);
// > "?param=location"
console.log(document.location.hash);
// > "#other-properties"
```
#### Дополнительная информация:
[W3C - Объект местоположения](https://www.w3schools.com/jsref/obj_location.asp) [Место нахождения](https://developer.mozilla.org/en-US/docs/Web/API/Location)

View File

@@ -0,0 +1,64 @@
---
title: Location Reload Method
localeTitle: Способ обновления местоположения
---
## Способ обновления местоположения
Метод JavaScript `Location.reload()` предоставляет средства для перезагрузки страницы по текущему URL-адресу.
Синтаксис следующий:
`object.reload(forcedReload);` , где `forceReload` является необязательным параметром.
Чтобы просто перезагрузить страницу, вы можете ввести `window.location` как объект.
Необязательные параметры `force reload` - это логическое значение, которое, если установлено:
* `True` перезагружает страницу с сервера (например, не сохраняет данные, кэшированные браузером):
```
window.location.reload(true);
```
* `False` перезагружает страницу, используя версию страницы, кэшированную браузером.
```
window.location.reload(false);
```
`False` - это параметр по умолчанию, поэтому, если он оставлен пустым, `object.reload()` перезагружает страницу с помощью кэшированных данных `object.reload(false)` , то есть идентичен методу как `object.reload(false)` .
Чтобы создать эффект предоставляемого браузером «Обновить», вы можете создать HTML-кнопку и выполнить одно из следующих действий:
* attach `Location.reload()` в HTML-разметку HTML, например:
```
<input type="button" value="Refresh Button" onClick="window.location.reload()">
```
* назначьте нажатие кнопки мыши кнопке с функцией, которая использует метод, где кнопка выглядит аналогично
```
<button type="button" onClick="reloadThePage()">Refresh!</button>
```
```
<script>
function reloadThePage(){
window.location.reload();
}
</script>
```
### Пример:
```javascript
// Reload the current resources from the server
window.location.reload(true);
// Reload the current resources from the browser's cache
window.location.reload();
```
Это приведет к перезагрузке страницы по текущему URL-адресу с сервера.
#### Дополнительная информация:
* [MDN](https://developer.mozilla.org/docs/Web/API/Location/reload)
* [W3 Школы](https://www.w3schools.com/jsref/met_loc_reload.asp)

View File

@@ -0,0 +1,96 @@
---
title: Logical Operators
localeTitle: Логические операторы
---
# Логические операторы
Логические операторы сравнивают логические значения и возвращают булевский ответ. Существует два типа логических операторов: логическое И и логическое ИЛИ. Эти операторы часто записываются как && для AND, а || для OR.
#### Логическое И (&&)
Оператор AND сравнивает два выражения. Если первый оценивается как [«правдивый»](https://developer.mozilla.org/en-US/docs/Glossary/Truthy) , оператор возвращает значение второго выражения. Если первый оценивается как [«ложный»](https://developer.mozilla.org/en-US/docs/Glossary/Falsy) , оператор возвращает значение первого выражения.
Если задействовать только логические значения ( `true` или `false` ), он возвращает true, если только если оба выражения истинны. Если одно или оба выражения ложны, весь оператор вернет false.
```js
true && true //returns the second value, true
true && false //returns the second value, false
false && false //returns the first value, false
123 && 'abc' // returns the second value, 'abc'
'abc' && null //returns the second value, null
undefined && 'abc' //returns the first value, undefined
0 && false //returns the first value, 0
```
#### Логическое ИЛИ (||)
Оператор OR сравнивает два выражения. Если первый оценивается как «ложный», оператор возвращает значение второго второго выражения. Если первый оценивается как «правдивый», оператор возвращает значение первого выражения.
Если задействовать только логические значения ( `true` или `false` ), он возвращает true, если любое выражение истинно. Оба выражения могут быть истинными, но для достижения истины необходимо только одно.
```js
true || true //returns the first value, true
true || false //returns the first value, true
false || false //returns the second value, false
123 || 'abc' // returns the first value, 123
'abc' || null //returns the first value, 'abc'
undefined || 'abc' //returns the second value, 'abc'
0 || false //returns the second value, false
```
#### Оценка короткого замыкания
&& и || ведут себя как операторы короткого замыкания.
В случае логического И, если первый операнд возвращает false, второй операнд никогда не оценивается и возвращается первый операнд.
В случае логического ИЛИ, если первое значение возвращает true, второе значение никогда не оценивается и возвращается первый операнд.
#### Логическое НЕ (!)
Оператор NOT не сравнится с операторами AND и OR. Кроме того, он работает только с 1 операндом.
«!» (восклицательный знак) используется для представления оператора NOT.
###### Использование операторов NOT
1. преобразование выражения в булево.
2. возвращает обратное значение булева, полученное на последнем шаге.
```js
var spam = 'rinki'; //spam may be equal to any non empty string
var booSpam = !spam;
/*returns false
since when a non-empty string when converted to boolean returns true
inverse of which is evaluated to false.
*/
var spam2 = ''; //spam2 here is equal to empty string
var booSpam2 = !spam2;
/*returns true
since when a empty string when converted to boolean returns false
inverse of which is evaluated to true.
*/
```
#### Советы:
Оба логических оператора вернут значение последнего оцениваемого выражения. Например:
```js
"cat" && "dog" //returns "dog"
"cat" && false //returns false
0 && "cat" //returns 0 (which is a falsy value)
"cat" || "dog" //returns "cat"
"cat" || false //returns "cat"
0 || "cat" //returns "cat"
```
Обратите внимание: где `&&` возвращает первое значение, `||` возвращает второе значение и наоборот.
#### Дополнительная информация:
* [Таблица истины Javascript](https://guide.freecodecamp.org/javascript/truth-table)
* [MDN](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Logical_Operators)

View File

@@ -0,0 +1,50 @@
---
title: Break Statement
localeTitle: Заявление о нарушении
---
## Введение
Оператор **break** завершает текущий цикл, оператор `switch` или `label` и передает управление программой в оператор после завершающего оператора.
```
break;
```
Если оператор **break** используется в выражении с надписью, синтаксис выглядит следующим образом:
```
break labelName;
```
## Примеры
Следующая функция имеет заявление **разрыва** , который прерывает `while` цикл , когда **я** равен 3, а затем возвращает значение **3 \* х.**
```
function testBreak(x) {
var i = 0;
while (i < 6) {
if (i == 3) {
break;
}
i += 1;
}
return i * x;
}
```
![:rocket:](//forum.freecodecamp.com/images/emoji/emoji_one/rocket.png?v=2 ": Ракета:") [Код запуска](https://repl.it/C7VM/0)
В следующем примере счетчик настроен на количество от 1 до 99; однако оператор **break** завершает цикл после 14 отсчетов.
```
for (var i = 1; i < 100; i++) {
if (i == 15) {
break;
}
}
```
![:rocket:](//forum.freecodecamp.com/images/emoji/emoji_one/rocket.png?v=2 ": Ракета:") [Код запуска](https://repl.it/C7VO/0)
## Другие источники:
[Ссылка MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/break) | [Ссылка MSDN](https://msdn.microsoft.com/en-us/library/3fhdxafb.aspx)

View File

@@ -0,0 +1,58 @@
---
title: Continue Statement
localeTitle: Продолжить заявление
---
## Введение
Оператор **continue** завершает выполнение операторов в текущей итерации текущего или помеченного цикла и продолжает выполнение цикла со следующей итерацией.
```
continue;
```
Если оператор **continue** используется в помеченной инструкции, синтаксис выглядит следующим образом:
```
continue labelName;
```
В отличие от оператора **break** , **continue** не прекращает выполнение цикла полностью; вместо:
* В `while` цикл, он возвращается к условию.
* В цикле `for` он переходит к выражению обновления.
## Примеры
Следующий пример демонстрирует `while` цикл , который имеет по- **прежнему** о том , что выполняется , когда значение **I** равно 3. Таким образом, **п** принимает значения 1, 3, 7 и 12.
```
var i = 0;
var n = 0;
while (i < 5) {
i++;
if (i === 3) {
continue;
}
n += i;
console.log (n);
}
```
![:rocket:](//forum.freecodecamp.com/images/emoji/emoji_one/rocket.png?v=2 ": Ракета:") [Код запуска](https://repl.it/C7hx/0)
В следующем примере цикл повторяется с 1 по 9. Операторы между **продолжением** и концом `for` тела пропускаются из-за использования оператора **continue** вместе с выражением `(i < 5)` .
```
for (var i = 1; i < 10; i++) {
if (i < 5) {
continue;
}
console.log (i);
}
```
![:rocket:](//forum.freecodecamp.com/images/emoji/emoji_one/rocket.png?v=2 ": Ракета:") [Код запуска](https://repl.it/C7hs/0)
## Другие источники
* [Ссылка MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/continue)
* [Ссылка MSDN](https://msdn.microsoft.com/en-us/library/8de3fkc8.aspx)

View File

@@ -0,0 +1,38 @@
---
title: Do...While Loop
localeTitle: Do ... While Loop
---
`do...while` в [`while`](http://forum.freecodecamp.com/t/javascript-while-loop/14668) `do...while` цикл тесно связан с в [`while`](http://forum.freecodecamp.com/t/javascript-while-loop/14668) цикл. В цикле do while условие проверяется в конце цикла.
Вот **синтаксис** `do...while` loop:
## Синтаксис:
```
do {
*Statement(s);*
} while (*condition*);
```
**statement (s):** оператор, который выполняется **хотя бы один раз** до того, как условие или логическое выражение оценивается и повторно выполняется каждый раз, когда условие принимает значение true.
**condition:** Здесь условие является булевым выражением . Если выражение Boolean имеет значение true, оператор выполняется снова. Когда выражение Boolean принимает значение false, циклы заканчиваются.
## Пример:
```
var i = 0;
do {
i = i + 1;
console.log(i);
} while (i < 5);
Output:
1
2
3
4
5
```
источник: [**do ... while**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/do…while)

View File

@@ -0,0 +1,70 @@
---
title: For...In Loop
localeTitle: Для ... В Loop
---
Оператор `for...in` выполняет итерацию по перечислимым свойствам объекта в произвольном порядке. Для каждого отдельного свойства могут выполняться операторы.
```
for (variable in object) {
...
}
```
| Требуется / Дополнительно | Параметр | Описание | | ------------------- | ----------- | ----------------- -------------------------------------------------- --- | | Требуется | Переменная | Другое имя свойства назначается переменной на каждой итерации. | | Дополнительно | Объект | Объект, перечислимые свойства которого повторяются. |
## Примеры
```
// Initialize object.
a = { "a": "Athens", "b": "Belgrade", "c": "Cairo" }
// Iterate over the properties.
var s = ""
for (var key in a) {
s += key + ": " + a[key];
s += "<br />";
}
document.write (s);
// Output:
// a: Athens
// b: Belgrade
// c: Cairo
// Initialize the array.
var arr = new Array("zero", "one", "two");
// Add a few expando properties to the array.
arr["orange"] = "fruit";
arr["carrot"] = "vegetable";
// Iterate over the properties and elements.
var s = "";
for (var key in arr) {
s += key + ": " + arr[key];
s += "<br />";
}
document.write (s);
// Output:
// 0: zero
// 1: one
// 2: two
// orange: fruit
// carrot: vegetable
// Efficient way of getting an object's keys using an expression within the for-in loop's conditions
var myObj = {a: 1, b: 2, c:3}, myKeys = [], i=0;
for (myKeys[i++] in myObj);
document.write(myKeys);
//Output:
// a
// b
// c
```
# Ресурсы Ohter:
* [Ссылка MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for…in)
* [Ссылка MSDN](https://msdn.microsoft.com/library/55wb2d34.aspx)

View File

@@ -0,0 +1,86 @@
---
title: For Loop
localeTitle: Для цикла
---
### Синтаксис
```javascript
for ([initialization]); [condition]; [final-expression]) {
// statement
}
```
Оператор javascript `for` состоит из трех выражений и оператора:
## Описание
* Инициализация - Запуск до первого выполнения цикла. Это выражение обычно используется для создания счетчиков. Переменные, созданные здесь, привязаны к циклу. Как только цикл завершит выполнение, они будут уничтожены.
* condition - выражение, которое проверяется перед выполнением каждой итерации. Если это опущено, это выражение оценивается как true. Если он вычисляет значение true, выполняется оператор цикла. Если он оценивает значение false, цикл останавливается.
* final-expression - выражение, которое запускается после каждой итерации. Обычно используется для увеличения счетчика. Но он также может использоваться для уменьшения счетчика.
* statement - Код, который необходимо повторить в цикле
любое из этих трех выражений или утверждение можно опустить. Для циклов обычно используются для подсчета определенного количества итераций для повторения утверждения. Используйте оператор `break` для выхода из цикла, пока выражение условия не примет значение false.
## Общие проблемы
**Превышение границ массива**
При многократном индексировании по массиву легко превзойти границы массива (например, попытайтесь ссылаться на 4-й элемент массива из 3 элементов).
```javascript
// This will cause an error.
// The bounds of the array will be exceeded.
var arr = [ 1, 2, 3 ];
for (var i = 0; i <= arr.length; i++) {
console.log(arr[i]);
}
output:
1
2
3
undefined
```
Есть два способа исправить этот код. Задайте условие либо `i < arr.length` либо `i <= arr.length - 1`
### Примеры
Итерации через целые числа от 0 до 8
```javascript
for (var i = 0; i < 9; i++) {
console.log(i);
}
output:
0
1
2
3
4
5
6
7
8
```
Вырыв из цикла до выражения условия false
```javascript
for (var elephant = 1; elephant < 10; elephant+=2) {
if (elephant === 7) {
break;
}
console.info('elephant is ' + elephant);
}
output:
elephant is 1
elephant is 3
elephant is 5
```
### Другие источники
* [MDN - для заявлений](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for)

View File

@@ -0,0 +1,88 @@
---
title: For...Of Loop
localeTitle: Для ... цикла
---
Оператор `for...of` создает цикл, повторяющийся по итерируемым объектам (включая объект Array, Map, Set, Arguments и т. Д.), Вызывая пользовательский крючок итерации с операторами, которые будут выполняться для значения каждого отдельного свойства.
```javascript
for (variable of object) {
statement
}
```
| | Описание | | ---------- | ------------------------------------- | | переменная | На каждой итерации переменной присваивается значение другого свойства. | | объект | Объект, перечислимые свойства которого повторяются. |
## Примеры
### массив
```javascript
let arr = [ "fred", "tom", "bob" ];
for (let i of arr) {
console.log(i);
}
// Output:
// fred
// tom
// bob
```
### карта
```javascript
var m = new Map();
m.set(1, "black");
m.set(2, "red");
for (var n of m) {
console.log(n);
}
// Output:
// 1,black
// 2,red
```
### Задавать
```javascript
var s = new Set();
s.add(1);
s.add("red");
for (var n of s) {
console.log(n);
}
// Output:
// 1
// red
```
### Аргумент объекта
```javascript
// your browser must support for..of loop
// and let-scoped variables in for loops
function displayArgumentsObject() {
for (let n of arguments) {
console.log(n);
}
}
displayArgumentsObject(1, 'red');
// Output:
// 1
// red
```
# Другие источники:
* [Ссылка MDN](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/for…of)
* [Ссылка MSDN](https://msdn.microsoft.com/library/dn858238%28v=vs.94%29.aspx?f=255&MSPPError=-2147217396)
* [arguments @@ iterator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments/@@iterator)

View File

@@ -0,0 +1,15 @@
---
title: Loops
localeTitle: Loops
---
Петли используются в JavaScript для выполнения повторяющихся задач на основе условия. Условия обычно возвращают `true` или `false` при анализе. Цикл будет продолжаться до тех пор, пока определенное условие не вернет `false` .
Существует три общих типа циклов:
* [за](http://forum.freecodecamp.com/t/javascript-for-loop/14666)
* [в то время как](http://forum.freecodecamp.com/t/javascript-while-loop/14668)
* [делать пока](http://forum.freecodecamp.com/t/javascript-for-loop/14662)
Вы можете ввести `js for` , `js while` или `js do while` чтобы получить дополнительную информацию об этом.
> Ссылки: [MDN **для цикла**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for)

View File

@@ -0,0 +1,34 @@
---
title: Labeled Statement
localeTitle: Обозначенное заявление
---
## Обозначенное заявление
**Обозначенный** оператор используется с инструкциями `break` и `continue` и служит для определения оператора, к которому применяются заявления `break` и `continue` .
### Синтаксис
\`\` \`javascript Метка\_строки: заявления
```
### Usage
Without the use of a `labeled` statement the `break` statement can only break out of a loop or a `switch` statement. Using a `labeled` statement allows `break` to jump out of any code block.
#### Example
```
Javascript foo: { console.log («This prints:»); break foo; console.log («Это никогда не будет печататься»); } console.log («Потому что выполнение прыгает сюда!») /\* выход Это печатает: Потому что выполнение прыгает сюда! \* /
```
When used with a `continue` statement the `labeled` statement allows you to skip a loop iteration, the advantage comes from being able to jump out from an inner loop to an outer one when you have nested loop statements. Without the use of a `labeled` statement you could only jump out of the existing loop iteration to the `next iteration of the same loop.`
#### Example
```
Javascript // без помеченной инструкции, когда j == i внутренний цикл переходит к следующей итерации function test () { для (var i = 0; i <3; i ++) { console.log ("i =" + i); для (var j = 0; j <3; j ++) { if (j === i) { Продолжать; } console.log ("j =" + j); } } }
/\* выход i = 0 (примечание j = 0 отсутствует) J = 1 J = 2 = 1 j = 0 (примечание j = 1 отсутствует) J = 2 я = 2 J = 0 j = 1 (примечание j = 2 отсутствует) \* /
// используя помеченный оператор, мы можем перейти к внешнему (i) циклу function test () { external: for (var i = 0; i <3; i ++) { console.log ("i =" + i); для (var j = 0; j <3; j ++) { if (j === i) { продолжать внешний; } console.log ("j =" + j); } } }
/ \* i = 0 (j регистрируется только при менее i) = 1 J = 0 я = 2 J = 0 J = 1 \* / \`\` \`
### Дополнительная информация:
[MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/label)

View File

@@ -0,0 +1,45 @@
---
title: While Loop
localeTitle: Пока цикл
---
Цикл while начинается с оценки условия. Если условие истинно, оператор (ы) исполняется /. Если условие ложно, оператор (ы) / не выполняется. После этого, пока цикл заканчивается.
Вот **синтаксис** цикла while:
## Синтаксис:
```
while (condition)
{
statement(s);
}
```
_statement (s):_ оператор, который выполняется до тех пор, пока условие принимает значение true.
_condition:_ Здесь условие является булевым выражением, которое оценивается перед каждым прохождением через цикл. Если это условие имеет значение true, выполняется оператор (ы). Когда условие оценивается как false, выполнение продолжается с помощью инструкции после цикла while.
## Пример:
```
var i = 1;
while (i < 10)
{
console.log(i);
i++; // i=i+1 same thing
}
Output:
1
2
3
4
5
6
7
8
9
```
сточник: [while Loop - MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/while)_

View File

@@ -0,0 +1,29 @@
---
title: Manipulate JavaScript Objects
localeTitle: Манипулирование объектами JavaScript
---
Существует несколько способов манипулирования объектными свойствами, нотной меткой и скобкой.
Добавление свойств к объектам с точечной нотацией:
```
myObject.myProperty = "myValue";
```
Добавление свойств к объектам с использованием скобок:
```javascript
myObject['myProperty'] = "myValue";
```
Используя обозначения в виде скобок, мы можем использовать переменные в качестве имен свойств:
```javascript
var dynamicProperty = "myProperty";
myObject[dynamicProperty] = "myValue";
```
Мы также можем удалить их следующим образом:
```
delete(myObject.myProperty);
```

View File

@@ -0,0 +1,68 @@
---
title: Manipulating Cookies
localeTitle: Управление файлами cookie
---
## Управление файлами cookie
Получение или настройка файлов cookie - это простая операция, которая может быть достигнута путем доступа к свойству cookie в объекте документа браузера.
Вы найдете удивительный и информативный веб-сайт рецептов, чтобы приготовить иностранную еду для своих гостей, но это на иностранном языке, к счастью, вы можете изменить язык на сайте сайта с помощью раскрывающегося списка. Через пару дней вы снова посетите один и тот же сайт, чтобы приготовить блюдо для своей матери, но теперь вы видите веб-сайт на своем родном языке по умолчанию.
_Веб-сайт запоминает выбранный вами язык при последнем посещении и сохраняет его в виде **файла cookie** . Теперь он автоматически выбирает ваш предпочтительный язык, читая этот файл cookie._
`userLanguage:french`
Файлы cookie используются для хранения данных в форме пары `name:value` на стороне клиента. Он позволяет веб-сайту хранить информацию о пользователе в браузере для последующего использования. Запомненная информация может быть `sessionID` , `userCountry` , `visitorLanguage` и т. Д.
Другой способ хранения данных на стороне клиента - `localstorage` .
### Установить Cookie
Файл cookie можно установить с помощью синтаксиса ниже, но библиотека, как и упомянутая в конце, настоятельно рекомендуется сделать процесс разработки более простым для всех. При настройке файла cookie вы также можете установить срок его действия. Если пропущено, cookie удаляется, когда браузер закрыт.
**Имейте в виду, что cookie, заданный определенным доменом, может быть прочитан только этим доменом и только его субдоменами.**
```javascript
// Using vanilla javascript
document.cookie = 'userLanguage=french; expires=Sun, 2 Dec 2017 23:56:11 UTC; path=/';
//Using JS cookie library
Cookies.set('userLanguage', 'french', { expires: 7, path: '/' });
```
_Cookie истекает через 7 дней_
### Получить Cookie
```javascript
// Using vanilla javascript
console.log(document.cookie)
// => "_ga=GA1.2.1266762736.1473341790; userLanguage=french"
// Using JS cookie library
Cookies.get('userLanguage');
// => "french"
```
### Удалить Cookie
Чтобы удалить набор файлов cookie, срок действия истекает в прошлом.
```javascript
// Using vanilla javascript
document.cookie = 'userLanguage; expires=Thu, 01 Jan 1970 00:00:01 GMT; path=/';
//Using JS cookie library
Cookies.remove('userLanguage');
```
_Если вы часто играете с куки-файлами в своем проекте, используйте библиотеку, подобную [JS Cookie,](https://github.com/js-cookie/js-cookie) и сэкономьте себе массу времени._
#### Дополнительная информация:
* [Cookie объяснил](https://www.quirksmode.org/js/cookies.html)
* [MDN Cookie Guide](https://developer.mozilla.org/en-US/docs/Web/API/document/cookie)
* [Видео для Udacity Cookie](https://www.youtube.com/watch?v=xdH9zsW1CK0)
* [Файлы cookie HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies)

View File

@@ -0,0 +1,12 @@
---
title: Multiply Two Numbers with JavaScript
localeTitle: Умножить два числа с помощью JavaScript
---
Использование JavaScript использует символ `*` для умножения.
```
var product = 8 * 10;
```
после этой строки «продукт» будет иметь значение «80».
При выполнении расчетов можно использовать круглые скобки для определения приоритетов, числа которых следует умножать вместе.

View File

@@ -0,0 +1,27 @@
---
title: Naming Convention for JavaScript
localeTitle: Соглашение об именах для JavaScript
---
Здесь вы получите обзор различных широко используемых кодов.
## верблюжьего
В программировании форматирование camelCase для имен переменных выглядит следующим образом:
```
var camelCase = "lower-case first word, capitalize each subsequent word";
```
## PascalCase
PascalCase (или CamelCase) является вариантом camelCase. Он отличается от camelCase, используя каждое слово, _включая_ первое слово:
```
var PascalCase = "upper-case every word";
```
## snake\_case
Другой популярный случай, называемый snake\_case, разделяет каждое слово с подчеркиванием следующим образом:
```
var snake_case = "lower-case everything, but separate words with underscores";
```

View File

@@ -0,0 +1,79 @@
---
title: Numbers
localeTitle: чисел
---
## чисел
Реализация в JavaScript `number` с базируется на `IEEE 754` стандарта, который часто называют «плавающей точкой» .
[Ссылка на Википедию IEEE 754](https://en.wikipedia.org/wiki/IEEE_754) [IEEE 754 Двухточечная визуализация с плавающей точкой](http://bartaz.github.io/ieee754-visualization/)
Числовые литералы выражаются в общем виде десятичными буквами `base-10` .
```javascript
var foo = 47;
var bar = 47.9;
```
Ведущая часть десятичного значения, если `0` , является необязательной:
```javascript
var same = 0.47;
var stillSame = .47;
```
Аналогично, конечная часть (дробная) десятичного значения после `.` , если `0` , является необязательным:
```javascript
var a = 47.0;
var b = 47.;
```
По умолчанию большинство чисел будут выводиться в виде десятичных знаков `base-10` , при этом удаляется дробная `0` с. Так:
```javascript
var foo = 47.300;
var bar = 47.0;
foo; // 47.3
bar; // 47
```
Очень большие или очень маленькие `numbers` могут быть записаны как:
```javascript
var foo = 47e8; // 4700000000
var baz = 47e-8; // 00.00000047
```
Метод `toExponential` может использоваться для преобразования `number` в его `exponential notation` .
```javascript
var foo = 47e8;
foo; // 4700000000
foo.toExponential() //"47e8"
```
Числа имеют доступ к методам, встроенным в `Number.prototype` .
Например: `toFixed()` форматирует число с определенным числом цифр справа от десятичной.
```javascript
var foo = 47.69;
foo.toFixed(0); // "48"
foo.toFixed(1); // "47.7"
foo.toFixed(2); // "47.69"
```
> Введите `Number.prototype` в своем браузере и посмотрите другие доступные методы самостоятельно.
#### Дополнительная информация:
1. [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type)
2. [Номера JavaScript](https://www.w3schools.com/js/js_numbers.asp)
#### Рекомендации
1. [Типы и грамматика](https://github.com/getify/You-Dont-Know-JS/tree/master/types%20%26%20grammar) Кайла Симпсона.
2. [Спецификация языка ECMAScript: 4.3.20](https://www.ecma-international.org/ecma-262/5.1/#sec-4.3.20)
3. [Спецификация языка ECMAScript: 15.7 Числовые объекты](https://www.ecma-international.org/ecma-262/5.1/#sec-15.7)

View File

@@ -0,0 +1,151 @@
---
title: Functional
localeTitle: функциональная
---
```javascript
var fun = function(a, b) {
var funInstance = {};
funInstance.a = a;
funInstance.b = b;
funInstance.method1 = function() {
// method code here
}
funInstance.method2 = function() {
// method code here
}
funInstance.method3 = function() {
// method code here
}
return funInstance;
}
var myFun = fun(1, 2);
myFun.method1();
```
## Как я узнаю его?
Функциональное создание объекта создает экземпляр класса с функцией, как и другие параметры. Разница в том, что все связанные методы также определены в функции конструктора.
## Зачем мне это использовать?
Поскольку для каждого экземпляра объекта создается новый набор методов, и он может принимать взвешенный объем памяти, функциональная конкретизация хороша, если вы знаете, что не собираетесь работать со множеством экземпляров. Это также хорошо для того, чтобы ваш код был легко понят новыми и опытными JavaScript-кодами, так как создание полностью самодостаточно, и легко видеть связи между методами и экземплярами объектов.
## Каковы недостатки?
Нижняя сторона с Functional Instantiation заключается в том, что если вы внесете какие-либо изменения в свой код (например, добавив больше методов), любые экземпляры объекта, которые были созданы до этих изменений, не будут обновляться. В итоге вы можете использовать два экземпляра, содержащих информацию о различных методах.
* * *
## название: Функциональный
```javascript
var fun = function(a, b) {
var funInstance = {};
funInstance.a = a;
funInstance.b = b;
extend(funInstance, funMethods);
return funInstance;
}
var extend = function(to, from) {
for (var key in from) {
to[key] = from[key];
}
}
var funMethods = {};
funMethods.method1 = function() {
// method code here
}
funMethods.method2 = function() {
// method code here
}
funMethods.method3 = function() {
// method code here
}
var myFun = fun(1, 2);
myFun.method1();
```
## Как я узнаю его?
Основное различие между Functional и Functional-Shared заключается в том, что в Functional-Shared мы совместно используем наши методы. Вместо того, чтобы объявлять методы в нашей функции Instantiation, у нас есть отдельный объект, содержащий все наши методы. Чтобы использовать методы, мы расширяем их в каждый экземпляр объекта, который создается.
## Зачем мне это использовать?
Functional-Shared позволяет нам использовать ссылки на методы, а не декларировать и хранить наши методы для каждого экземпляра нашего объекта, сохраняя пространство.
## Каковы недостатки?
Недостатком является то, что, поскольку методы ссылаются через указатели на объект методов, если бы мы каким-либо образом обновляли объект методов, экземпляры объекта, которые были созданы до изменений, не обновлялись. Вы могли бы получить два экземпляра объекта, ссылающихся на две разные версии методов.
* * *
## название: прототип
```javascript
var fun = function(a, b) {
var funInstance = Object.create(funMethods);
funInstance.a = a;
funInstance.b = b;
return funInstance;
}
var funMethods = {};
funMethods.method1 = function() {
// method code here
}
funMethods.method2 = function() {
// method code here
}
funMethods.method3 = function() {
// method code here
}
var myFun = fun(1, 2);
myFun.method1();
```
## Как я узнаю его?
Прототипал похож на функционально-разделенный на то, что они оба используют отдельный объект методов для хранения всех методов, которые будут совместно использоваться экземплярами объекта, который мы создаем. Разница в том, что мы можем использовать цепочку прототипов. Мы можем создать объект, используя Object.create (prototype), чтобы прикрепить методы к нашему экземпляру объекта. Прототипом считается объект, который держит наши общие методы.
## Зачем мне это использовать?
Если вы внесете изменения в свой прототип после создания экземпляра объекта, этот экземпляр будет обновлен. У вас не будет двух экземпляров с тем же прототипом, который имеет разные методы.
## Каковы недостатки?
Недостатки использования этого метода заключаются в том, что он требует дополнительных шагов и дополнительного кода. Мы должны не только создавать и возвращать наш объект, как раньше, но мы также должны его украшать.
* * *
## название: псевдоклассическое
```javascript
var Fun = function(a, b) {
// this = Object.create(Fun.prototype);
this.a = a;
this.b = b;
// return this;
}
Fun.prototype.method1 = function() {
// method code here
}
Fun.prototype.method2 = function() {
// method code here
}
Fun.prototype.method3 = function() {
// method code here
}
var myFun = new Fun(1, 2);
myFun.method1();
```
## Как я узнаю его?
Псевдоклассическое создание на данный момент содержит наименьшее количество кода. Вместо того, чтобы создавать новый объект и возвращать его, новое ключевое слово делает это для нас. Под капотом, когда вы используете новое ключевое слово для создания объекта, вы создаете новый объект, используя этот объект = Object.create (Object.prototype), где это относится к прототипу, названному после нового ключевого слова. Когда мы определяем наши методы, мы используем ключевое слово prototype.
## Зачем мне это использовать?
Говорят, что псевдоклассический является самым быстрым шаблоном создания, который полезен, если вы создаете десятки тысяч экземпляров. Он также наиболее оптимизирован, так как он использует функциональность Javascript.
## Каковы недостатки?
Недостатком псевдоклассического инстанцирования является то, что он требует немного больше знаний о том, что делает JavaScript под капотом, особенно с этим ключевым словом. Это делает этот тип экземпляра объекта более сложным для понимания, особенно если кто-то читает ваш код

View File

@@ -0,0 +1,72 @@
---
title: Object Instantiation
localeTitle: Создание объектов
---
## Создание объектов
В Javascript и большинстве других языков объект содержит ряд свойств, которые представляют собой пару ключей, значений. Существует несколько вариантов, когда вам нужно построить объект.
### Инициализировать переменную объекта
Вы можете создать объект с заранее определенными свойствами:
```javascript
let myObject = {
name: "Dave",
age: 33
}
```
### Создание пустого объекта
Это создает пустой объект внутри нашей переменной myObject:
```javascript
let myObject = new Object();
```
Когда вы хотите добавить свойства к своему объекту, вы просто используете либо нотацию ноты, либо скобку с именем свойства по вашему выбору:
```javascript
myObject.name = "Johnny Mnemonic"
myObject["age"] = 55
```
### Использование функции конструктора
Вы можете определить функцию-конструктор, которую вы можете использовать для создания ваших объектов:
```javascript
function Kitten(name, cute, color) {
this.name = name,
this.cute = cute,
this.color = color
}
```
Вы можете определить переменную, содержащую экземпляр этого объекта, вызывая функцию конструктора:
```javascript
let myKitten = new Kitten("Nibbles", true, "white")
```
### Object.create ()
Метод Object.create () (впервые определенный в ECMAScript 5.1) позволяет создавать объекты. он позволяет вам выбрать объект-прототип для вашего нового объекта без необходимости заранее определять функцию-конструктор.
```javascript
// Our pre-defined object
let kitten = {
name: "Fluff",
cute: true,
color: "gray"
}
// Create a new object using Object.create(). kitten is used as the prototype
let newKitten = Object.create(kitten)
console.log(newKitten.name) // Will output "Fluff"
```
#### Больше информации
[Статья MDN по работе с объектами](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects)

View File

@@ -0,0 +1,67 @@
---
title: Onclick Event
localeTitle: Событие Onclick
---
## Событие Onclick
Событие `onclick` в JavaScript позволяет программисту выполнять функцию при нажатии элемента.
### пример
```javascript
<button onclick="myFunction()">Click me</button>
<script>
function myFunction() {
alert('Button was clicked!');
}
</script>
```
В простом примере выше, когда пользователь нажимает на кнопку, они будут видеть предупреждение в своем браузере, на котором `Button was clicked!` ,
### Добавление `onclick` динамически
Событие `onclick` также может быть программно добавлено к любому элементу, используя следующий код в следующем примере:
```javascript
<p id="foo">click on this element.</p>
<script>
var p = document.getElementById("foo"); // Find the paragraph element in the page
p.onclick = showAlert; // Add onclick function to element
function showAlert(event) {
alert("onclick Event triggered!");
}
</script>
```
### Заметка
Важно отметить, что с помощью onclick мы можем добавить только одну функцию прослушивателя. Если вы хотите добавить больше, просто используйте addEventListener (), что является предпочтительным способом добавления слушателей событий.
В приведенном выше примере, когда пользователь нажимает на элемент `paragraph` в `html` , он увидит предупреждение, отображающее `onclick Event triggered` .
### Предотвращение действия по умолчанию
Однако , если мы придаем `onclick` для ссылки (HTML это тег) мы могли бы предотвратить действие по умолчанию произойдет: `a`
```javascript
<a href="https://guide.freecodecamp.org" onclick="myAlert()">Guides</a>
<script>
function myAlert(event) {
event.preventDefault();
alert("Link was clicked but page was not open");
}
</script>
```
В приведенном выше примере мы предотвратить поведение по умолчанию `a` (открытие ссылки) элемента с помощью `event.preventDefault()` внутри нашей `onclick` функции обратного вызова.
[MDN](https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick)
#### Другие источники
[jQuery .on () Присоединение обработчика событий](https://api.jquery.com/on/)

View File

@@ -0,0 +1,31 @@
---
title: Onload Event
localeTitle: Событие onload
---
## Событие onload
`onload` используется для выполнения функции JavaScript сразу после загрузки страницы.
### Пример:
```javascript
<body onload="myFunction()">
<script>
function myFunction() {
alert('Page finished loading');
}
</script>
```
В приведенном выше примере, как только загрузится веб-страница, вызывается функция `myFunction` , отображающая оповещение пользователя о `Page finished loading` .
событие `onload` чаще всего используется в элементе `<body>` для выполнения сценария. Если он прикреплен к `<body>` , сценарий будет запускаться после полной загрузки всей страницы (изображения, файлы сценариев, файлы CSS и т. Д.).
#### Дополнительная информация:
[MDN](https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload)
#### Другие источники
[jQuery .on () Присоединение обработчика событий](https://api.jquery.com/on/) [Переполнение стека: window.onload и document.onload](https://stackoverflow.com/questions/588040/window-onload-vs-document-onload)

View File

@@ -0,0 +1,105 @@
---
title: Output
localeTitle: Вывод
---
## Вывод
Существует четыре наиболее распространенных способа вывода данных через консоль. Они будут использоваться большей частью вашего процесса разработки.
#### `console.log`
Это самый распространенный и используемый способ вывода данных. Общепринятая практика заключается в том, чтобы вставить пару из них между операторами, чтобы понять, как данные текут и обрабатываются. Кроме того, вы можете использовать `debugger` или точки останова в devtools, чтобы сделать то же самое без загрязнения вашего кода.
```javascript
var numbers = [ 1, 2, 3, 4, 5, 6, 7];
numbers.forEach(function(number){
console.log(number + ' is divisible by 2', number%2 == 0);
});
```
#### `console.warn`
Как вы догадались по имени, это используется для отображения предупреждений, и типичный желтый цвет отличает его от ошибки red & `console.log` .
```javascript
function isAdult(age){
if(Number(age) < 18){
console.warn('You are not an adult');
return false;
}
return true;
}
```
#### `console.error`
Как вы можете догадаться, это используется при выбросе исключения или ошибке в коде. Дает красное сообщение об ошибке, чтобы быстро привлечь внимание.
#### `console.table`
Предположим, у вас есть список предметов или фильмов в объекте json, и вы хотите проверить это в формате таблицы, тогда ваш лучший `console.table` - `console.table` . Он автоматически определяет заголовки строк и столбцов из данных.
_Попробуйте запустить код ниже в консоли_
```javascript
var data = {
"colors": [
{
"color": "black",
"category": "hue",
"type": "primary",
"rgba": [255,255,255,1],
"hex": "#000"
},
{
"color": "white",
"category": "value",
"rgba": [0,0,0,1],
"hex": "#FFF"
},
{
"color": "red",
"category": "hue",
"type": "primary",
"rgba": [255,0,0,1],
"hex": "#FF0"
},
{
"color": "blue",
"category": "hue",
"type": "primary",
"rgba": [0,0,255,1],
"hex": "#00F"
},
{
"color": "yellow",
"category": "hue",
"type": "primary",
"rgba": [255,255,0,1],
"hex": "#FF0"
},
{
"color": "green",
"category": "hue",
"type": "secondary",
"rgba": [0,255,0,1],
"hex": "#0F0"
},
]
}
console.table(data.colors);
```
Кроме того, вы можете контролировать и фильтровать тип вывода, который вы хотите видеть на консоли.
1. Все
2. Подробный
3. Предупреждение
4. ошибки
#### Дополнительная информация:
* [Полная ссылка объекта консоли на Google](https://developers.google.com/web/tools/chrome-devtools/console/console-reference)
* [Консоль MDN](https://developer.mozilla.org/en-US/docs/Web/API/Console)

View File

@@ -0,0 +1,70 @@
---
title: Popup Boxes
localeTitle: Всплывающие окна
---
## Всплывающие окна
Всплывающие окна (или диалоговые окна) - это модальные окна, используемые для уведомления или предупреждения пользователя или для ввода данных от пользователя.
Всплывающие окна запрещают пользователю получать доступ к другим аспектам программы до тех пор, пока всплывающее окно не будет закрыто, поэтому их не следует злоупотреблять.
Существует три разных типа всплывающих методов, используемых в JavaScript: [window.alert ()](https://developer.mozilla.org/en-US/docs/Web/API/Window/alert) , [window.confirm ()](https://developer.mozilla.org/en-US/docs/Web/API/Window/confirm) и [window.prompt ()](https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt) .
### бдительный
Метод [предупреждения](https://developer.mozilla.org/en-US/docs/Web/API/Window/alert) отображает сообщения, которые не требуют от пользователя ввода ответа. После вызова этой функции появится диалоговое окно предупреждения с указанным (необязательным) сообщением. Пользователи должны будут подтвердить сообщение до того, как предупреждение исчезнет.
### Пример:
`window.alert("Welcome to our website");`
![Пример предупреждения MDN](https://mdn.mozillademos.org/files/130/AlertHelloWorld.png)
### подтвердить
Метод [подтверждения](https://developer.mozilla.org/en-US/docs/Web/API/Window/confirm) похож на `window.alert()` , но также отображает кнопку отмены во всплывающем окне. Кнопки возвращают логические значения: true для OK и false для Cancel.
### Пример:
```javascript
var result = window.confirm('Are you sure?');
if (result === true) {
window.alert('Okay, if you're sure.');
} else {
window.alert('You seem uncertain.');
}
```
![Пример подтверждения MDN](https://mdn.mozillademos.org/files/7163/firefoxcomfirmdialog_zpsf00ec381.png)
### Незамедлительный
Метод [подсказки](https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt) обычно используется для получения текстового ввода от пользователя. Эта функция может принимать два аргумента, оба из которых являются необязательными: сообщение для отображения пользователю и значение по умолчанию для отображения в текстовом поле.
### Пример:
`var age = prompt('How old are you?', '100');`
![Пример подсказки MDN](https://mdn.mozillademos.org/files/11303/prompt.png)
### Другие варианты дизайна:
Если вы недовольны всплывающими надписями JavaScript по умолчанию, вы можете заменить их в различных библиотеках пользовательского интерфейса. Например, SweetAlert обеспечивает приятную замену стандартным JavaScript-модалам. Вы можете включить его в свой HTML через CDN (сеть доставки контента) и начать использовать.
```HTML
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
```
Синтаксис таков: `swal(title, subtitle, messageType)`
```javascript
swal("Oops!", "Something went wrong on the page!", "error");
```
В приведенном выше коде будет отображаться следующее всплывающее окно: ![Пример SweetAlert](https://ludu-assets.s3.amazonaws.com/lesson-content/rWqOoQXgDrSVSMrAKiZ9) SweetAlert ни в коем случае не является единственным подходом для стандартных модалов, но он чист и прост в реализации.
#### Дополнительная информация:
* [MDN window.alert ()](https://developer.mozilla.org/en-US/docs/Web/API/Window/alert)
* [MDN window.confirm ()](https://developer.mozilla.org/en-US/docs/Web/API/Window/confirm)
* [MDN window.prompt ()](https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt)

View File

@@ -0,0 +1,175 @@
---
title: Promises
localeTitle: обещания
---
## обещания
JavaScript однопоточный, что означает, что два бита скрипта не могут работать одновременно; они должны бежать один за другим. Promise - это объект, который представляет собой возможное завершение (или отказ) асинхронной операции и ее итоговое значение.
```javascript
var promise = new Promise(function(resolve, reject) {
// do thing, then…
if (/* everything worked */) {
resolve("See, it worked!");
}
else {
reject(Error("It broke"));
}
});
```
## В одном из этих состояний существует обещание
* Ожидание: начальное состояние, ни выполнено, ни отклонено.
* Выполнено: операция успешно завершена.
* Отклонено: операция завершилась неудачно.
Объект Promise работает как прокси-сервер для значения, которое не обязательно известно при создании обещания. Это позволяет связать обработчики с вероятным результатом успешной асинхронной операции или причиной сбоя. Это позволяет асинхронным методам возвращать такие значения, как синхронные методы: вместо немедленного возврата окончательного значения асинхронный метод возвращает обещание предоставить значение в какой-то момент в будущем.
## Использование 'Then' (Promise Chaining)
Чтобы выполнить несколько асинхронных вызовов и синхронизировать их один за другим, вы можете использовать цепочку слияния. Это позволяет использовать значение из первого обещания в последующих последующих обратных вызовах.
```javascript
Promise.resolve('some')
.then(function(string) { // <-- This will happen after the above Promise resolves (returning the value 'some')
return new Promise(function(resolve, reject) {
setTimeout(function() {
string += 'thing';
resolve(string);
}, 1);
});
})
.then(function(string) { // <-- This will happen after the above .then's new Promise resolves
console.log(string); // <-- Logs 'something' to the console
});
```
## API обещаний
В классе Promise существует 4 статических метода:
* Promise.resolve
* Promise.reject
* Promise.all
* Promise.race
## Обещания могут быть соединены вместе
При написании обещаний для решения конкретной проблемы вы можете связать их вместе, чтобы сформировать логику.
```javascript
var add = function(x, y) {
return new Promise((resolve,reject) => {
var sum = x + y;
if (sum) {
resolve(sum);
}
else {
reject(Error("Could not add the two values!"));
}
});
};
var subtract = function(x, y) {
return new Promise((resolve, reject) => {
var sum = x - y;
if (sum) {
resolve(sum);
}
else {
reject(Error("Could not subtract the two values!"));
}
});
};
// Starting promise chain
add(2,2)
.then((added) => {
// added = 4
return subtract(added, 3);
})
.then((subtracted) => {
// subtracted = 1
return add(subtracted, 5);
})
.then((added) => {
// added = 6
return added * 2;
})
.then((result) => {
// result = 12
console.log("My result is ", result);
})
.catch((err) => {
// If any part of the chain is rejected, print the error message.
console.log(err);
});
```
Это полезно для использования парадигмы _функционального программирования_ . Создавая функции для манипулирования данными, вы можете объединить их вместе, чтобы собрать окончательный результат. Если в любой точке цепочки функций значение _отклоняется,_ цепь перейдет к ближайшему обработчику `catch()` .
Для получения дополнительной информации о функциональном программировании: [функциональное программирование](https://en.wikipedia.org/wiki/Functional_programming)
## Генераторы функций
В последних выпусках JavaScript ввел больше способов изначально обрабатывать обещания. Одним из таких способов является генератор функций. Генераторы функций являются «правдоподобными» функциями. При использовании с Promise генераторы могут сделать использование намного проще для чтения и появиться «синхронно».
```javascript
const myFirstGenerator = function* () {
const one = yield 1;
const two = yield 2;
const three = yield 3;
return 'Finished!';
}
const gen = myFirstGenerator();
```
Вот наш первый генератор, который вы можете видеть по синтаксису `function*` . Объявленная переменная `gen` не будет запускать `myFirstGenerator` , но вместо этого «этот генератор будет готов к использованию».
```javascript
console.log(gen.next());
// Returns { value: 1, done: false }
```
Когда мы запустим `gen.next()` он отключит генератор и продолжит работу. Поскольку это первый раз, когда мы вызвали `gen.next()` он будет работать с `yield 1` и приостанавливаться до тех пор, пока мы снова не назовем `gen.next()` . Когда вызывается `yield 1` , он возвращает нам `value` которое было получено, и независимо от того, `done` ли генератор.
```javascript
console.log(gen.next());
// Returns { value: 2, done: false }
console.log(gen.next());
// Returns { value: 3, done: false }
console.log(gen.next());
// Returns { value: 'Finished!', done: true }
console.log(gen.next());
// Will throw an error
```
Поскольку мы продолжаем называть `gen.next()` он будет продолжать идти на следующий `yield` и приостанавливать каждый раз. После того, как у вас больше нет `yield` , он продолжит работу с остальной частью генератора, которая в этом случае просто вернется `'Finished!'` , Если вы снова вызове `gen.next()` , он будет генерировать ошибку по завершении работы генератора.
Теперь представьте, что если каждый `yield` в этом примере был `Promise` , сам код выглядел бы крайне синхронно.
### Promise.all (iterable) очень полезен для множественного запроса к другому источнику
Метод Promise.all (iterable) возвращает единственное обещание, которое разрешает, когда все обещания в итерабельном аргументе разрешены или когда аргумент итерации не содержит никаких обещаний. Он отвергает причину первого обещания, которое отвергает.
```javascript
var promise1 = Promise.resolve(catSource);
var promise2 = Promise.resolve(dogSource);
var promise3 = Promise.resolve(cowSource);
Promise.all([promise1, promise2, promise3]).then(function(values) {
console.log(values);
});
// expected output: Array ["catData", "dogData", "cowData"]
```
### Больше информации
Для получения дополнительной информации о обещаниях: [обещания](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)

View File

@@ -0,0 +1,106 @@
---
title: Prototypes
localeTitle: Прототипы
---
## Прототипы
JavaScript - это язык, основанный на прототипах, поэтому понимание объекта-прототипа является одной из наиболее важных концепций, которые должны знать специалисты-практики JavaScript. В этой статье вы найдете краткий обзор объекта Prototype с помощью различных примеров. Прежде чем читать эту статью, вам нужно будет иметь базовое представление об [`this` ссылке в JavaScript](/src/pages/javascript/this-reference/index.md) .
### Объект прототипа
Для ясности рассмотрим следующий пример:
```javascript
function Point2D(x, y) {
this.x = x;
this.y = y;
}
```
Когда `Point2D` функция `Point2D` для нее будет создано свойство по умолчанию `prototype` (обратите внимание, что в JavaScript функция также является объектом). `prototype` свойство является объектом , который содержит `constructor` свойство и его значение `Point2D` функции: `Point2D.prototype.constructor = Point2D` . И когда вы вызываете `Point2D` с `new` ключевым словом, _вновь созданные объекты наследуют все свойства из_ `Point2D.prototype` . Чтобы проверить это, вы можете добавить метод с именем `move` в `Point2D.prototype` следующим образом:
```javascript
Point2D.prototype.move = function(dx, dy) {
this.x += dx;
this.y += dy;
}
var p1 = new Point2D(1, 2);
p1.move(3, 4);
console.log(p1.x); // 4
console.log(p1.y); // 6
```
Точка `Point2D.prototype` называется **прототипом объекта** или **прототипа** объекта `p1` и для любого другого объекта, созданного с помощью `new Point2D(...)` . Вы можете добавить дополнительные объекты к объекту `Point2D.prototype` по `Point2D.prototype` . Общей моделью являются методы объявления `Point2D.prototype` а другие свойства будут объявлены в функции конструктора.
Аналогичным образом создаются встроенные объекты в JavaScript. Например:
* Прототипом объектов, созданных с помощью `new Object()` синтаксиса `new Object()` или `{}` является `Object.prototype` .
* Прототипом массивов, созданных с помощью `new Array()` или `[]` является `Array.prototype` .
* И так далее с другими встроенными объектами, такими как `Date` и `RegExp` .
`Object.prototype` наследуется всеми объектами и не имеет прототипа (его прототип имеет значение `null` ).
### Цепочка прототипов
Целевой механизм прототипа прост: когда вы получаете доступ к свойству `p` объекта `obj` , механизм JavaScript будет искать это свойство внутри объекта `obj` . Если двигатель не выполняет поиск, он продолжает поиск в прототипе объекта `obj` и так далее до достижения `Object.prototype` . Если после завершения поиска и ничего не найдено, результат будет `undefined` . Например:
```javascript
var obj1 = {
a: 1,
b: 2
};
var obj2 = Object.create(obj1);
obj2.a = 2;
console.log(obj2.a); // 2
console.log(obj2.b); // 2
console.log(obj2.c); // undefined
```
В приведенном выше фрагменте оператор `var obj2 = Object.create(obj1)` создаст объект `obj2` с прототипом объекта `obj1` . Другими словами, `obj1` становится прототипом `obj2` вместо `Object.prototype` по умолчанию. Как вы можете видеть, `b` не является свойством `obj2` , вы все равно можете получить к нему доступ через цепочку прототипов. Однако для свойства `c` вы получаете `undefined` значение, потому что оно не может быть найдено в `obj1` и `Object.prototype` .
### Классы
В ES2016 мы теперь используем ключевое слово `Class` а также методы, упомянутые выше, для управления `prototype` . JavaScript `Class` обращается к разработчикам из объектно - ориентированного программирования фона, но это по сути делает то же самое, что и выше.
```javascript
class Rectangle {
constructor(height, width) {
this.height = height
this.width = width
}
get area() {
return this.calcArea()
}
calcArea() {
return this.height * this.width
}
}
const square = new Rectangle(10, 10)
console.log(square.area) // 100
```
Это в основном то же самое, что:
```javascript
function Rectangle(height, width) {
this.height = height
this.width = width
}
Rectangle.prototype.calcArea = function calcArea() {
return this.height * this.width
}
```
Методы `getter` и `setter` в классах связывают свойство Object с функцией, которая будет вызываться при поиске этого свойства. Это просто синтаксический сахар, чтобы облегчить _поиск_ или _установку_ свойств.
**Дальнейшее чтение:**
* [MDN: прототипы объектов](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object_prototypes)

View File

@@ -0,0 +1,110 @@
---
title: Random Method
localeTitle: Случайный метод
---
## Случайный метод
Метод JavaScript `Math.random()` - отличный встроенный метод для создания случайных чисел. Когда `Math.random()` выполняется, он возвращает случайное число, которое может находиться где-то между 0 и 1. `Math.random()` 0, а 1 исключено.
### Создание случайного числа с плавающей запятой между 0 и 1
Метод `Math.random()` возвращает число с плавающей запятой (десятичное), большее или равное 0, и меньше (но никогда не равно) 1. Другими словами `0 <= x < 1` . Например:
```JavaScript
console.log(Math.random());
// 0.7069207248635578
console.log(Math.random());
// 0.765046694794209
console.log(Math.random());
// 0.14069121642698246
```
(Конечно, возвращаемые числа будут разными каждый раз. Это будет приниматься для всех следующих примеров - на каждом проходе будут возникать разные результаты).
Чтобы получить случайное число между большим диапазоном, умножьте результат `Math.random()` на число.
### Генерирование случайного числа с плавающей запятой между 0 и заданным максимальным значением
Обычно вам не нужны случайные числа от 0 до 1 - вам нужны большие числа или даже целые числа.
Например, если вам нужен случайный номер с плавающей запятой между 0 и 10, вы можете использовать:
```JavaScript
var x = Math.random()*10;
console.log(x);
// 4.133793901445541
```
### Создание случайного числа с плавающей запятой в пределах диапазона
Если вам нужен случайный номер с плавающей запятой, который находится между двумя конкретными номерами, вы можете сделать что-то вроде этого:
```JavaScript
var min = 83.1;
var max = 193.36;
var x = Math.random()*(max - min)+min;
console.log(x);
// 126.94014012699063
```
### Генерация случайного целого числа от 0 до max
Часто вам нужны целые числа. Для этого вам придется использовать некоторые другие методы из объекта `Math` , `Math.floor()` (округляется до ближайшего целого) и `Math.ceil()` (округляется до ближайшего целого).
Например, если вам нужно произвольно выбирать из массива из 10 элементов, вам понадобится случайное число от 0 до 9 включительно (помните, что массивы нулевые индексируются).
```JavaScript
var x = Math.floor(Math.random()*10);
console.log(x);
// 7
```
(Помните, что `Math.random()` никогда не вернет ровно 1, поэтому `Math.random()*10` никогда не вернется ровно 10. Это означает, что после округления результат всегда будет 9 или меньше.)
### Генерация случайного целого числа от 1 до max
Если вам нужно случайное число с минимальным числом, `Math.ceil()` 1 (например, выбор случайного дня в январе), вы можете использовать метод `Math.ceil()` .
```JavaScript
var x = Math.ceil(Math.random()*31);
console.log(x);
// 23
```
Другим способом было бы использовать предыдущую функцию (используя `Math.floor()` ) и добавить 1 к ней:
```JavaScript
var x = Math.floor(Math.random()*31)+1;
console.log(x);
// 17
```
### Создание случайного целого в пределах диапазона
Наконец, иногда вам нужно случайное целое число между двумя конкретными целыми числами. Например, если вы пытаетесь выбрать билеты на лотерею и знаете номера самого низкого и самого большого числа:
```JavaScript
var min = 1718;
var max = 3429;
var x = Math.floor(Math.random()*(max-min+1)+min);
console.log(x);
//2509
```
### Насколько случайным является Math.random ()?
Можно указать, что число, возвращаемое `Math.random()` является псевдослучайным числом, так как ни один компьютер не может генерировать по-настоящему случайное число, которое проявляет случайность во всех масштабах и во всех размерах наборов данных. Однако псевдослучайное число, генерируемое `Math.random()` , обычно достаточно для нужд почти любой программы, которую вы можете написать. Непорядочная случайность проявляется только в астрономически больших числах или когда нужны необычно точные десятичные числа.
### Дополнительная информация:
* Документация: [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random)

View File

@@ -0,0 +1,96 @@
---
title: Regular Expressions Reference
localeTitle: Справочник по регулярным выражениям
---
## Справочник по регулярным выражениям
В JavaScript регулярные выражения являются сокращением, используемым для соответствия требуемой части строки. Это полезно при попытке манипулировать или проверять строки, используемые в вашем коде.
### Синтаксис
Регулярные выражения состоят из двух частей - `pattern` и `flags` (необязательно). Шаблон записывается между двумя косяками вперед, за которым следуют необязательные флаги: `var exp = /pattern/flags` .
#### Узоры
Использование буквенно-цифровых символов (AZ, az, 0-9) делает простое совпадение. Однако реальная сила регулярных выражений имеет классы символов.
Скажем, например, вы хотите, чтобы во всех местах была строка с числом от 0 до 9. Вместо явного вызова `/[0-9]/` , вы можете использовать специальный класс символов `/\d/` . Обратная косая черта выходит из символа `d` (поэтому не совпадает с буквой `d` ), но вместо этого использует специальные возможности сопоставления `\d` .
Этот же принцип применяется к нечисловым символам, пробелу и другим широким группам соответствия. Регулярные выражения могут стать еще более сложными с использованием определенных модификаторов, таких как символ `+` .
Этот квантификатор позволяет вам сопоставлять предыдущий символ в вашем шаблоне один или несколько раз. `/s+/` будет соответствовать `s` в `desert` , и оба `s` «ы в `dessert` !
Есть еще много модификаторов, которые позволяют вашему шаблону соответствовать всем, что вам может понадобиться. См. Раздел «Дополнительная информация» ниже, чтобы просмотреть все возможные варианты символов для использования в регулярных выражениях.
#### Флаги
Существует 5 флагов, которые вы можете использовать для применения определенных правил ко всему регулярному выражению, которое вы пишете. Они есть:
`g` - глобальный матч; это позволяет вам сопоставлять все экземпляры вашего выражения, а не останавливаться после первого появления.
`i` - совпадение в случае игнорирования (само собой разумеющееся)
`m` - многострочный матч; это применит ваш шаблон к каждой строке как новый; если вы ищете строку, начинающуюся с определенного шаблона, это делается для всех строк, а не только для первого
`u` - соответствие Юникод; это означает, что вы читаете ваш шаблон как Unicode, а не обычный текст
`y` - липкий матч; это соответствует вашему шаблону, только начиная с индекса, найденного в свойстве `RegExp.lastIndex`
### Создание регулярного выражения
Регулярное выражение - это тип объекта. Он может быть построен с конструктором RegExp или записывается как буквальное значение, шаблон в символах прямой косой черты (/).
```
var re1 = new RegExp (" abc ") ;
var re2 = / abc /;
```
Оба этих объекта регулярного выражения представляют один и тот же шаблон: символ, за которым следует ab, а затем c.
### Объект RegExp
`RegExp` - это конструктор, который создает объект из создаваемого шаблона регулярных выражений. В дополнение к литеральной нотации, описанной выше, вы также можете использовать формат конструктора для создания регулярного выражения: `new RegExp(pattern[, flags])`
### Тестирование матчей
```
console . log (/ abc /. test (" abcde ") );
// → true
console . log (/ abc /. test (" abxde ") );
// → false
```
### Соответствие набора символов
```
console . log (/[0123456789]/. test (" in 1992") );
// → true
console . log (/[0 -9]/. test (" in 1992") );
// → true
```
### Шаблоны выбора
```
var animalCount = /\ b \ d + ( pig | cow | chicken )s ?\ b /;
console . log ( animalCount . test ("15 pigs ") );
// → true
console . log ( animalCount . test ("15 pigchickens ") );
// → false
```
#### методы
Скорее всего, вы будете использовать регулярные выражения в методах `String` , таких как `String.replace()` , но есть несколько методов, относящихся к объекту `RegExp` .
Например, `RegExp.test()` вернет логическое значение для того, существует ли соответствие между шаблоном регулярного выражения и соответствующей строкой. `RegExp.toString()` превратит объект выражения в строку, что может быть удобно при выполнении тестов кода.
Первый аргумент также может быть регулярным выражением, и в этом случае первое совпадение регулярного выражения заменяется. Когда в регулярное выражение добавляется опция ag (для global), все совпадения в строке будут заменены не только первыми.
```
console . log (" Borobudur ". replace (/[ ou ]/ , "a ") );
// → Barobudur
console . log (" Borobudur ". replace (/[ ou ]/g , "a ") );
// → Barabadar
```
### Дополнительная информация:
* [Здесь вы можете прочитать](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp) обо всех символах соответствия шаблонов, свойствах объектов, некоторых примерах и т. Д.
* [Вот отличный сайт,](https://regex101.com/) который позволяет вам проверять шаблоны регулярных выражений в режиме реального времени, сохранять ваши избранные и исследовать шаблоны, сделанные другими.

View File

@@ -0,0 +1,37 @@
---
title: Rest Parameters
localeTitle: Параметры останова
---
## Параметры останова
В ES6 синтаксис остального параметра `...` позволяет собирать неопределенное количество аргументов в массив.
Несмотря на то, что они выглядят одинаково, это делает противоположность оператора спреда, который берет каждый элемент из итерации и распространяет их на свои индивидуальные значения.
### Синтаксис
```js
function myFunc(...args) {
console.log(args);
}
myFunc( 1, 2, 3, 4, 5); // [1,2,3,4,5]
```
Вы можете префикс последнего параметра функции `...` когда вы хотите что-то сделать с исходными параметрами, а затем обрабатывать все остальные параметры по-разному.
```js
function convertCurrency(rate, fee, ...amounts) {
return amounts.map(amount => (amount * rate) + fee);
}
convertCurrency(0.89, 2.5, 100, 250, 75, 150, 300); // [ 91.5, 225, 69.25, 136, 269.5 ]
```
The `...` позволяет собирать остальные аргументы, если они есть, в массив.
### Разница между параметрами отдыха и объектом аргументов
`arguments` - это массивный объект, доступный внутри функций, содержащий аргументы, переданные этим функциям. Он называется «подобный массиву», потому что он не имеет всех встроенных методов массива, таких как `.forEach()` и `.map()` .
Остальные параметры - это массив, в который включены все методы массива.

View File

@@ -0,0 +1,86 @@
---
title: Return Statement
localeTitle: Операция возврата
---
## Введение
Когда в функции вызывается оператор **return** , выполнение этой функции останавливается. Если указано, данное значение возвращается вызывающему функции. Если выражение опущено, вместо него возвращается `undefined` .
```js
return expression;
```
Функции могут возвращаться:
* Примитивные значения (строка, число, логическое значение и т. Д.)
* Типы объектов (массивы, объекты, функции и т. Д.)
Никогда не возвращайте что-то на новую строку без использования круглых скобок. Это JavaScript quirk, и результат будет неопределенным. Старайтесь всегда использовать круглые скобки, когда возвращаете что-то на несколько строк.
```javascript
function foo() {
return
1;
}
function boo() {
return (
1
);
}
foo(); --> undefined
boo(); --> 1
```
## Примеры
Следующая функция возвращает квадрат своего аргумента **x** , где **x** - число.
```js
function square(x) {
return x * x;
}
```
![:rocket:](//forum.freecodecamp.com/images/emoji/emoji_one/rocket.png?v=2 ": Ракета:") [Код запуска](https://repl.it/C7VT/0)
Следующая функция возвращает произведение своих аргументов **arg1** и **arg2** .
```js
function myfunction(arg1, arg2){
var r;
r = arg1 * arg2;
return(r);
}
```
![:rocket:](//forum.freecodecamp.com/images/emoji/emoji_one/rocket.png?v=2 ": Ракета:") [Код запуска](https://repl.it/C7VU/0)
Когда функция `return` значение sa, значение может быть присвоено переменной с помощью оператора привязки ( `=` ). В приведенном ниже примере функция возвращает квадрат аргумента. Когда функция разрешается или заканчивается, ее значение является `return` значением ed. Затем значение присваивается переменной `squared2` .
```javascript
function square(x) {
return x * x;
}
let squared2 = square(2); // 4
```
Если нет явного оператора return, то есть в функции отсутствует ключевое слово `return` , функция автоматически возвращает `undefined` . В следующем примере в `square` функции отсутствует ключевое слово `return` . Когда результат вызова функции присваивается переменной, переменная имеет значение `undefined` .
```javascript
function square(x) {
let y = x * x;
}
let squared2 = square(2); // undefined
```
![:rocket:](//forum.freecodecamp.com/images/emoji/emoji_one/rocket.png?v=2 ": Ракета:") [Код запуска](https://repl.it/M8BE)
#### Дополнительная информация:
[Ссылка MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/return)
[Ссылка MSDN](https://msdn.microsoft.com/en-us/library/22a685h9.aspx)

View File

@@ -0,0 +1,131 @@
---
title: Scopes
localeTitle: Области применения
---
Если вы некоторое время программируете в JavaScript, вы, несомненно, сталкиваетесь с концепцией, известной как `scope` . Что такое `scope` ? Зачем вам тратить время на это?
Говоря программистом, `scope` - это **текущий контекст исполнения** . Смущенный? Давайте рассмотрим следующий фрагмент кода:
```
var foo = 'Hi, I am foo!';
var baz = function () {
var bar = 'Hi, I am bar too!';
console.log(foo);
}
baz(); // Hi, I am foo!
console.log(bar); // ReferenceError...
```
Это простой пример, но он хорошо иллюстрирует то, что известно как _лексический охват_ . JavaScript, и почти любой другой язык программирования имеет _лексический охват_ . Существует еще один вид области действия, называемый _динамическим масштабом_ , но мы не будем обсуждать это.
Теперь термин _Lexical scope_ кажется фантастическим, но, как вы увидите, в принципе это очень просто. В Лексическом Области есть два вида областей: _глобальная область действия_ и _локальная область_ .
Прежде чем вводить первую строку кода в свою программу, для вас создается _глобальная область_ . Это содержит все переменные, которые вы заявляете в своей программе **вне любых функций** .
В приведенном выше примере переменная `foo` находится в глобальной области действия программы, в то время как переменная `bar` объявляется внутри функции и, следовательно, находится **в локальной области этой функции** .
Давайте разложим пример строки за строкой. Хотя вы можете быть смущены в этот момент, я обещаю, что к тому времени, когда вы это прочитаете, у вас будет гораздо лучшее понимание.
В строке 1 мы объявляем переменную `foo` . Здесь нет ничего необычного. Давайте назовем эту ссылку левым (LHS) ссылкой на `foo` , потому что мы назначаем значение `foo` и оно находится в левой части знака `equal` .
В строке 3 мы объявляем функцию и присваиваем ее переменной `baz` . Это еще одна ссылка LHS на `baz` . Мы присваиваем ему значение (помните, что функции тоже являются значениями!). Затем эту функцию вызывают в строке 8. Это RHS или правая ссылка на `baz` . Мы извлекаем значение `baz` , которое в этом случае является функцией и затем вызывает ее. Другая ссылка RHS на `baz` была бы, если бы мы присвоили ее значение другой переменной, например `foo = baz` . Это будет ссылка LHS на `foo` и ссылку RHS на `baz` .
Ссылки LHS и RHS могут показаться запутанными, но они важны для обсуждения области. Подумайте об этом так: ссылка LHS присваивает значение переменной, в то время как ссылка RHS возвращает значение переменной. Это всего лишь более короткий и удобный способ сказать «получение значения» и «присвоение значения».
Давайте теперь разбиваем, что происходит внутри самой функции.
Когда компилятор компилирует код внутри функции, он входит в **локальную область функции** .
В строке 4 объявляется переменная `bar` . Это ссылка LHS на `bar` . На следующей строке мы имеем ссылку RHS для `foo` внутри `console.log()` . Помните, что мы извлекаем значение `foo` , а затем передаем его в качестве аргумента в метод `console.log()` .
Когда у нас есть ссылка RHS на `foo` , компилятор ищет объявление переменной `foo` . Компилятор не находит его в самой функции или **локальной области функции,** поэтому она **поднимается на один уровень: в глобальную область** .
На данный момент вы, вероятно, думаете, что область действия имеет какое-то отношение к переменным. Это верно. Область может рассматриваться как контейнер для переменных. Все переменные, созданные в локальной области, доступны только в этой локальной области. Однако все локальные области доступа могут получить доступ к глобальной области. (Я знаю, что вы, вероятно, еще больше запутались прямо сейчас, но просто несите меня еще несколько абзацев).
Таким образом, компилятор переходит в глобальную область, чтобы найти ссылку LHS на переменную `foo` . Он находит один в строке 1, поэтому он извлекает значение из ссылки LHS, которая представляет собой строку: `'Hi, I am foo!'` , Эта строка отправляется в метод `console.log()` и выводится на консоль.
Компилятор завершил выполнение кода внутри функции, поэтому мы возвращаемся к строке 9. В строке 9 мы имеем ссылку RHS для переменной `bar` .
Теперь, `bar` был объявлен в локальном объеме `baz` , но есть ссылка RHS для `bar` в глобальном масштабе. Поскольку в глобальной области нет ссылки LHS для `bar` , компилятор не может найти значение для `bar` и выбрасывает ReferenceError.
Но вы можете спросить, может ли функция выглядеть вне себя для переменных или локальная область может заглянуть в глобальную область, чтобы найти ссылки LHS, почему глобальная область не может заглянуть в локальную область? Ну, вот как работает лексический охват!
```
... // global scope
var baz = function() {
... // baz's scope
}
... /// global scope
```
Это тот же код сверху, который иллюстрирует область действия. Это создает иерархию, которая поднимается до глобальной области:
`baz -> global` .
Итак, если есть ссылка RHS для переменной внутри области `baz` , она может быть выполнена с помощью ссылки LHS для этой переменной в глобальной области. Но противоположное **не соответствует действительности** .
Что, если бы у нас была другая функция внутри `baz` ?
```
... // global scope
var baz = function() {
... // baz's scope
var bar = function() {
... // bar's scope.
}
}
... /// global scope
```
В этом случае иерархия или **цепочка областей** будут выглядеть так:
`bar -> baz -> global`
Любые ссылки RHS внутри локальной области `bar` могут быть заполнены ссылками LHS в глобальном масштабе или в области `baz` , но ссылка RHS в области `baz` не может быть заполнена ссылкой LHS в области `bar` .
**Вы можете перемещаться по цепочке видимости, а не вверх.**
Есть еще две важные вещи, которые вы должны знать о облаках JavaScript.
1. Объекты объявляются функциями, а не блоками.
2. Функции могут быть переданы по прямой ссылке, переменные не могут.
Наблюдайте (каждый комментарий описывает область действия в строке, на которой она написана):
\`\` \` // outer () здесь в области видимости, поскольку функции могут быть переданы по прямой ссылке
```
function outer() {
// only inner() is in scope here
// because only functions are forward-referenced
var a = 1;
//now 'a' and inner() are in scope
function inner() {
var b = 2
if (a == 1) {
var c = 3;
}
// 'c' is still in scope because JavaScript doesn't care
// about the end of the 'if' block, only function inner()
}
// now b and c are out of scope
// a and inner() are still in scope
}
// here, only outer() is in scope
```
\`\` \`
# Рекомендации
1. [Области и закрытие](https://github.com/getify/You-Dont-Know-JS/tree/master/scope%20%26%20closures) Кайла Симпсона. В нем подробно описывается, как работает механизм видимости, а также имеет поверхностное описание того, как работает компилятор JavaScript, поэтому, если вас это интересует, обязательно дайте ему прочитать! Это бесплатно на GitHub и можно купить у O'Reilly.
2. [Секреты JavaScript ниндзя](https://www.amazon.com/Secrets-JavaScript-Ninja-John-Resig/dp/1617292850/ref=pd_lpo_sbs_14_img_0?_encoding=UTF8&psc=1&refRID=YMC2TB2C0DFHTQ3V62CA) Джона Ресига и Медведя Бибо. Отличное руководство для более глубокого понимания JavaScript.

View File

@@ -0,0 +1,29 @@
---
title: Semicolons
localeTitle: Точка с запятой
---
Точки с запятой не требуются в Javascript. Это связано с тем, что Javascript имеет функцию «Automatic Semicolon Insertion» или ASI для краткости. ASI помещает точки с запятой в ваш Javascript для вас. Он всегда активен по умолчанию, и он является частью языка и не может быть отключен.
ASI имеет набор правил, которые он использует, чтобы определить, где он должен вставить точки с запятой. Если уже имеется точка с запятой, это ничего не изменит. См. [Этот ответ StackOverflow](http://stackoverflow.com/a/2846298/3467946) для получения дополнительной информации о том, как работает ASI.
Существует только один случай, когда ASI завершается с ошибкой: когда строка начинается с открывающей скобки `(` Чтобы избежать этой ошибки, когда линия начинается с открывающей скобки, вы можете положить точку с запятой в начале строки с открытой скобой :
```js
;(function() {
console.log('Hi!')
})
```
Обратите внимание, что это необходимо только в том случае, если вы не используете точки с запятой.
Согласованный стиль кодирования делает код более читаемым. Решите, будете ли вы или не будете использовать точки с запятой, и делайте это везде.
## Ошибки, которые могут возникнуть
Когда Javascript был впервые создан, он призван помочь начинающим программистам. Никто не хочет искать дэн-двоеточие в своем коде, когда они начинают программировать. Таким образом, выбор полуколонок был реализован, как указано выше, они технически существуют.
Например: `javasctipt function foo(x) { return function(y) { return x + y; } } let z = foo(10); z(10)// TypeError z is not a function // Because of Automatic Semicolon Insertion, our inner function does not exist.` Javasctipt будет реализовывать полуколоны, где они ожидаются.
### Другие источники
[Открытое письмо лидерам JavaScript в отношении точек с запятой](http://blog.izs.me/post/2353458699/an-open-letter-to-javascript-leaders-regarding)

View File

@@ -0,0 +1,51 @@
---
title: Creating Singleton In JavaScript
localeTitle: Создание Singleton в JavaScript
---
## Создание Singleton в руководстве Javascript
Эта статья посвящена созданию синглтонов в естественном (чистом) Javascript. Эта концепция может быть полезна для поддержания чистого кода.
Если вы хотите сохранить свой код или somedata, он останется таким же, как и для вашего приложения, так вы можете это сделать.
**Предварительные знания** Это просто поможет вам понять концепцию более легко, иначе вы всегда можете скопировать-вставить код и соответствующим образом изменить его.
* Основной синтаксис Javascript
* Функции Javascript
* IIFE в Javascript
### Давайте начнем
Давайте создадим объект с функцией IIFE, которая мгновенно выполнится, чтобы дать нам эффект Singleton.
```
var singletonFn = (function(){ //Created IIFE Function
var dataCounter = 0;
return { //Any code inside this return stuff will be accessible directly using objectname.
getDataCounter: function(){
return dataCounter;
},
setDataCounter: function(val){
dataCounter = val;
},
fishNames: ["SimpleFish"] //Can create variables, Arrays, etc.
}
})();
```
Теперь выполнить или использовать ваш синглтон. в браузере после сохранения этого файла в js и его загрузки.
```
console.log(singletonFn.getDataCounter()); //0 as bydefault it will be 0.
singletonFn.setDataCounter(20);
console.log(singletonFn.getDataCounter()); //20 as we assigned.
console.log(fishNames); //will Print array with "SimpleFish".
```
Теперь с помощью этих знаний вы можете определить константы, перечисления или что-то, что нужно использовать в проекте, написанном здесь. или что-то вроде конфигураций.
Надеюсь, это поможет вам лучше писать коды. Счастливое кодирование :)

View File

@@ -0,0 +1,147 @@
---
title: Spread syntax
localeTitle: Синтаксис распространения
---
## Синтаксис распространения
Синтаксис Spread позволяет вызывать итерабельность, такую ​​как выражение массива или строку, в местах, где ожидаются нулевые или более аргументы (для вызовов функций) или элементы (для литералов массива), или выражение объекта, которое должно быть расширено в местах, где ожидается нуль ,
### Синтаксис
Для вызовов функций:
```
myFunction(...iterableObj);
```
Для литералов или строк массива:
```
[...iterableObj, '4', 'five', 6];
```
### Примеры
#### Распространение вызовов функций
#### Заменить заявку
Обычно используется `Function.prototype.apply` в тех случаях, когда вы хотите использовать элементы массива в качестве аргументов функции.
```
function myFunction(x, y, z) { }
var args = [0, 1, 2];
myFunction.apply(null, args);
```
С синтаксисом распространения вышесказанное может быть записано как:
```
function myFunction(x, y, z) { }
var args = [0, 1, 2];
myFunction(...args);
```
Любой аргумент в списке аргументов может использовать синтаксис распространения и его можно использовать несколько раз.
```
function myFunction(v, w, x, y, z) { }
var args = [0, 1];
myFunction(-1, ...args, 2, ...[3]);
```
### Подать заявку на новые
При вызове конструктора с `new` невозможно **напрямую** использовать массив и `apply` ( `apply` `[[Call]]` а не `[[Construct]]` ). Тем не менее, массив можно легко использовать с новой благодарностью за распространение синтаксиса:
```
var dateFields = [1970, 0, 1]; // 1 Jan 1970
var d = new Date(...dateFields);
```
Чтобы использовать новое с массивом параметров без синтаксиса распространения, вам придется **косвенно** это делать через частичное приложение:
```
function applyAndNew(constructor, args) {
function partial () {
return constructor.apply(this, args);
};
if (typeof constructor.prototype === "object") {
partial.prototype = Object.create(constructor.prototype);
}
return partial;
}
function myConstructor () {
console.log("arguments.length: " + arguments.length);
console.log(arguments);
this.prop1="val1";
this.prop2="val2";
};
var myArguments = ["hi", "how", "are", "you", "mr", null];
var myConstructorWithArguments = applyAndNew(myConstructor, myArguments);
console.log(new myConstructorWithArguments);
// (internal log of myConstructor): arguments.length: 6
// (internal log of myConstructor): ["hi", "how", "are", "you", "mr", null]
// (log of "new myConstructorWithArguments"): {prop1: "val1", prop2: "val2"}
```
### Распространение в литералах массива
#### Более мощный литерал массива
Без синтаксиса распространения для создания нового массива с использованием существующего массива в качестве одной его части синтаксис литерального массива уже не является достаточным, и вместо этого необходимо использовать императивный код, используя комбинацию push, splice, concat и т. Д. С синтаксисом распространения это становится намного более кратким:
```
var parts = ['shoulders', 'knees'];
var lyrics = ['head', ...parts, 'and', 'toes'];
// ["head", "shoulders", "knees", "and", "toes"]
```
Так же, как распространение для списков аргументов, `...` можно использовать в любом месте литерала массива, и его можно использовать несколько раз.
### Скопировать массив
```
var arr = [1, 2, 3];
var arr2 = [...arr]; // like arr.slice()
arr2.push(4);
// arr2 becomes [1, 2, 3, 4]
// arr remains unaffected
```
> **Примечание** . Синтаксис Spread эффективно идет на один уровень глубины при копировании массива. Поэтому он может быть непригоден для копирования многомерных массивов, как показано в следующем примере (это то же самое с Object.assign () и синтаксисом распространения).
```
var a = [[1], [2], [3]];
var b = [...a];
b.shift().shift(); // 1
// Now array a is affected as well: [[], [2], [3]]
```
### Лучший способ объединить массивы
`Array.concat` часто используется для конкатенации массива в конец существующего массива. Без синтаксиса распространения это делается как:
```
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
// Append all items from arr2 onto arr1
arr1 = arr1.concat(arr2);
```
С синтаксисом распространения это становится:
```
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1 = [...arr1, ...arr2];
```
`Array.unshift` часто используется для вставки массива значений в начале существующего массива. Без синтаксиса распространения это делается как:
```
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
// Prepend all items from arr2 onto arr1
Array.prototype.unshift.apply(arr1, arr2) // arr1 is now [3, 4, 5, 0, 1, 2]
```
С синтаксисом распространения это становится:
```
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1 = [...arr2, ...arr1]; // arr1 is now [3, 4, 5, 0, 1, 2]
```

View File

@@ -0,0 +1,91 @@
---
title: Array Destructuring
localeTitle: Разрушение массива
---
# Разрушение массива
Деструктурирование - удобный способ извлечения нескольких значений из данных, хранящихся в массивах. Он может использоваться в местах, которые получают данные (например, левую часть задания). Эта функция представлена ​​в `ECMAScript 6` .
Как извлечь значения задается с помощью шаблонов (читайте далее для примеров).
### Основное назначение переменных
```
var names = ['neel', 'meet', 'darshan'];
var [nameOne, nameTwo, nameThree] = names;
console.log(nameOne); // "neel"
console.log(nameTwo); // "meet"
console.log(nameThree); // "darshan"
```
### Назначение отдельно от декларации
Переменной может быть присвоено ее значение через деструктурирование отдельно от объявления переменной.
```
var a, b;
[a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2
```
### Значения по умолчанию
Переменной может быть присвоено значение по умолчанию, в случае, если значение, распакованное из массива, не `undefined` .
```
var a, b;
[a=5, b=7] = [1];
console.log(a); // 1
console.log(b); // 7
```
### Анализ массива, возвращаемого функцией
Всегда можно было возвращать массив из функции. Деструктурирование может сделать работу с возвращаемым значением массива более кратким.
В этом примере `getNames()` возвращает значения `['neel', 'meet']` качестве своего вывода, которые могут быть проанализированы в одной строке с деструктурированием.
```
function getNames() {
return ['neel', 'meet'];
}
var neel, meet;
[nameOne, nameTwo] = getNames();
console.log(nameOne); // neel
console.log(nameTwo); // meet
```
### Игнорирование некоторых возвращаемых значений
Вы можете игнорировать возвращаемые значения, которые вам не интересны:
```
function getNames() {
return ['neel', 'meet', 'darshan'];
}
var [nameOne, , nameThree] = getNames();
console.log(nameOne); // neel
console.log(nameThree); // darshan
```
Вы также можете игнорировать все возвращаемые значения:
```
[,,] = getNames();
```
### Присвоение остальной части массива переменной
При деструкции массива вы можете распаковать и назначить оставшуюся часть переменной переменной, используя шаблон rest:
```
var [a, ...b] = [1, 2, 3];
console.log(a); // 1
console.log(b); // [2, 3]
```
Обратите внимание, что `SyntaxError` будет `SyntaxError` , если задняя запятая используется с левой стороны с элементом отдыха:
```
var [a, ...b,] = [1, 2, 3];
// SyntaxError: rest element may not have a trailing comma
```
См. Также: **Разрушение массива** | [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Array_destructuring)

View File

@@ -0,0 +1,19 @@
---
title: Array from
localeTitle: Массив из
---
## Массив из
Метод Array.from () создает новый экземпляр массива из объекта, подобного массиву или итерации.
### Синтаксис:
«»» Array.from (arrayLike \[, mapFn \[, thisArg\]\]) «»»
### Пример:
«»» Array.from ( 'Foo'); // \["f", "o", "o"\] «»»
#### Дополнительная информация:
[Документация MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from)

View File

@@ -0,0 +1,38 @@
---
title: Array isArray
localeTitle: Array isArray
---
Метод `Array.isArray()` возвращает `true` если объект является массивом, `false` если это не так.
## Синтаксис
```
Array.isArray(obj)
```
### параметры
**obj** Объект, подлежащий проверке.
[Ссылка MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray) | [Ссылка MSDN](https://msdn.microsoft.com/en-us/LIBRary/ff848265%28v=vs.94%29.aspx)
## Примеры
```
// all following calls return true
Array.isArray([]);
Array.isArray([1]);
Array.isArray(new Array());
// Little known fact: Array.prototype itself is an array:
Array.isArray(Array.prototype);
// all following calls return false
Array.isArray();
Array.isArray({});
Array.isArray(null);
Array.isArray(undefined);
Array.isArray(17);
Array.isArray('Array');
Array.isArray(true);
Array.isArray(false);
Array.isArray({ __proto__: Array.prototype });
```

View File

@@ -0,0 +1,26 @@
---
title: Array Length
localeTitle: Длина массива
---
## Длина массива
`length` - свойство массивов в JavaScript, которое возвращает или задает количество элементов в заданном массиве.
Свойство `length` массива может быть возвращено так же.
```js
let desserts = ["Cake", "Pie", "Brownies"];
console.log(desserts.length); // 3
```
Оператор присваивания в сочетании с свойством `length` может использоваться для установки количества элементов в массиве, подобном этому.
```js
let cars = ["Saab", "BMW", "Volvo"];
cars.length = 2;
console.log(cars.length); // 2
```
#### Дополнительная информация:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global\_Objects/Array/length

View File

@@ -0,0 +1,27 @@
---
title: Array of
localeTitle: Массив
---
## Массив
Метод Array.of () создает новый экземпляр Array с переменным числом аргументов, независимо от числа или типа аргументов.
Синтаксис:
```javascript
Array.of(element0[, element1[, ...[, elementN]]])
```
## пример
```javascript
Array.of(7); // [7] - creates an array with a single element
Array.of(1, 2, 3); // [1, 2, 3]
Array(7); // [ , , , , , , ] - creates an empty array with a length property of 7
Array(1, 2, 3); // [1, 2, 3]
```
#### Дополнительная информация:
Для получения дополнительной информации посетите [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/of)

View File

@@ -0,0 +1,45 @@
---
title: Array.prototype.concat
localeTitle: Array.prototype.concat
---
## Array.prototype.concat
Метод concat возвращает новый массив, состоящий из элементов массива, на который вы его вызываете, за которым следуют элементы аргументов в том порядке, в котором они переданы.
Вы можете передать несколько аргументов методу 'concat'. Аргументами могут быть массивы или типы данных, такие как логические строки, строки и числа.
### Синтаксис
```javascript
const newArray = array.concat(value1, value2, value3...);
```
### Примеры
#### Объединение двух массивов
```javascript
var cold = ['Blue', 'Green', 'Purple'];
var warm = ['Red', 'Orange', 'Yellow'];
var result = cold.concat(warm);
console.log(result);
// results in ['Blue', 'Green', 'Purple', 'Red', 'Orange', 'Yellow'];
```
#### Объединение значения в массив
```javascript
const odd = [1, 3, 5, 7, 9];
const even = [0, 2, 4, 6, 8];
const oddAndEvenAndTen = odd.concat(even, 10);
console.log(oddAndEvenAndTen);
// results in [1, 3, 5, 7, 9, 0, 2, 4, 6, 8, 10];
```
#### Дополнительная информация:
[MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat)

View File

@@ -0,0 +1,11 @@
---
title: Array.prototype.copyWithin
localeTitle: Array.prototype.copyWithin
---
## Array.prototype.copyWithin
Это заглушка. [Помогите нашему сообществу расширить его](https://github.com/freecodecamp/guides/tree/master/src/pages/javascript/standard-objects/array/array-prototype-copywithin/index.md) .
[Это руководство по быстрому стилю поможет вам принять ваш запрос на тягу](https://github.com/freecodecamp/guides/blob/master/README.md) .
#### Дополнительная информация:

View File

@@ -0,0 +1,11 @@
---
title: Array.prototype.entries
localeTitle: Array.prototype.entries
---
## Array.prototype.entries
Это заглушка. [Помогите нашему сообществу расширить его](https://github.com/freecodecamp/guides/tree/master/src/pages/javascript/standard-objects/array/array-prototype-entries/index.md) .
[Это руководство по быстрому стилю поможет вам принять ваш запрос на тягу](https://github.com/freecodecamp/guides/blob/master/README.md) .
#### Дополнительная информация:

View File

@@ -0,0 +1,74 @@
---
title: Array.prototype.every
localeTitle: Array.prototype.every
---
Метод `every()` проверяет, прошли ли все элементы массива тест, реализованный предоставленной функцией.
**Синтаксис**
```javascript
arr.every(callback[, thisArg])
```
## параметры
* **callback** Функция для проверки для каждого элемента, принимая три аргумента:
* **currentValue** (обязательно)
Текущий элемент обрабатывается в массиве.
* **индекс** (необязательно)
Индекс текущего элемента обрабатывается в массиве.
* **массив** (необязательно)
Каждый массив был вызван.
* **thisArg** Необязательно. Значение, которое необходимо использовать при выполнении обратного вызова.
[Ссылка MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/every) | [Ссылка MSDN](https://msdn.microsoft.com/en-us/LIBRary/ff679981%28v=vs.94%29.aspx)
## Описание
`every` метод вызывает функцию `callback` один раз для каждого элемента массива в порядке возрастания индекса, пока функция `callback` вернет значение false. Если элемент, вызывающий `callback` для возврата false, найден, каждый метод немедленно возвращает `false` . В противном случае каждый метод возвращает `true` .
Функция обратного вызова не вызывается для отсутствующих элементов массива.
В дополнение к объектам массива, каждый метод может использоваться любым объектом, обладающим свойством length и имеющим численные индексированные имена свойств. `every` не мутирует массив, на который он вызывается.
## Примеры
```javascript
function isBigEnough(element, index, array) {
return element >= 10;
}
[12, 5, 8, 130, 44].every(isBigEnough); // false
[12, 54, 18, 130, 44].every(isBigEnough); // true
// Define the callback function.
function CheckIfEven(value, index, ar) {
document.write(value + " ");
if (value % 2 == 0)
return true;
else
return false;
}
// Create an array.
var numbers = [2, 4, 5, 6, 8];
// Check whether the callback function returns true for all of the
// array values.
if (numbers.every(CheckIfEven))
document.write("All are even.");
else
document.write("Some are not even.");
// Output:
// 2 4 5 Some are not even.
```

View File

@@ -0,0 +1,26 @@
---
title: Array.prototype.fill
localeTitle: Array.prototype.fill
---
## Array.prototype.fill
Метод fill () заполняет все элементы массива статическим значением.
Синтаксис:
\`\` \`javascript arr.fill (значение) arr.fill (значение, начало) arr.fill (значение, начало, конец)
```
The fill method takes up to three arguments value, start and end. The start and end arguments are optional with default values of 0 and the length of the this object.
The fill method is a mutable method, it will change this object itself, and return it, not just return a copy of it.
## Examples
```
Javascript \[1, 2, 3\]. Заполнить (4); // \[4, 4, 4\] \[1, 2, 3\]. Заполнить (4, 1); // \[1, 4, 4\]
var fruits = \["Grape", "Pear", "Apple", "Strawberry"\]; fruit.fill («Арбуз», 2, 4); // Банан, груша, арбуз, арбуз \`\` \`
#### Дополнительная информация:
Для получения дополнительной информации посетите [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/fill)

View File

@@ -0,0 +1,78 @@
---
title: Array.prototype.filter
localeTitle: Array.prototype.filter
---
## Array.prototype.filter
Метод фильтра принимает массив как вход. Он принимает каждый элемент в массиве и применяет к нему условное утверждение. Если это условие возвращает true, элемент получает «push» в выходной массив.
Как только каждый элемент входного массива «фильтруется» как таковой, он выводит новый массив, содержащий каждый элемент, который возвращал true.
В этом примере ниже представлен массив, в котором есть несколько объектов. Как правило, для итерации через этот массив вы можете использовать цикл for.
В этом случае мы хотим получить всех учеников, чьи оценки больше или равны 90.
```javascript
var students = [
{ name: 'Quincy', grade: 96 },
{ name: 'Jason', grade: 84 },
{ name: 'Alexis', grade: 100 },
{ name: 'Sam', grade: 65 },
{ name: 'Katie', grade: 90 }
];
//Define an array to push student objects to.
var studentsGrades = []
for (var i = 0; i < students.length; i++) {
//Check if grade is greater than 90
if (students[i].grade >= 90) {
//Add a student to the studentsGrades array.
studentsGrades.push(students[i])
}
}
return studentsGrades; // [ { name: 'Quincy', grade: 96 }, { name: 'Alexis', grade: 100 }, { name: 'Katie', grade: 90 } ]
```
Это для цикла работает, но он довольно длинный. Также может потребоваться много времени писать для циклов для многих массивов, которые вам нужно перебирать.
Это отличный вариант для фильтра!
Вот тот же пример с использованием фильтра:
```javascript
var students = [
{ name: 'Quincy', grade: 96 },
{ name: 'Jason', grade: 84 },
{ name: 'Alexis', grade: 100 },
{ name: 'Sam', grade: 65 },
{ name: 'Katie', grade: 90 }
];
var studentGrades = students.filter(function (student) {
//This tests if student.grade is greater than or equal to 90. It returns the "student" object if this conditional is met.
return student.grade >= 90;
});
return studentGrades; // [ { name: 'Quincy', grade: 96 }, { name: 'Alexis', grade: 100 }, { name: 'Katie', grade: 90 } ]
```
Метод фильтра намного быстрее записывается и чистят, чтобы читать, все еще выполняя одно и то же. Используя синтаксис ES6, мы можем даже реплицировать 6-строчный цикл for-loop с фильтром:
```javascript
var students = [
{ name: 'Quincy', grade: 96 },
{ name: 'Jason', grade: 84 },
{ name: 'Alexis', grade: 100 },
{ name: 'Sam', grade: 65 },
{ name: 'Katie', grade: 90 }
];
var studentGrades = students.filter(student => student.grade >= 90);
return studentGrades; // [ { name: 'Quincy', grade: 96 }, { name: 'Alexis', grade: 100 }, { name: 'Katie', grade: 90 } ]
```
Фильтр очень полезен и имеет большой выбор для циклов для фильтрации массивов по условным операторам.
#### Дополнительная информация:
[MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter)

View File

@@ -0,0 +1,71 @@
---
title: Array.prototype.find
localeTitle: Array.prototype.find
---
## Информация
Метод `find()` возвращает значение первого элемента в массиве, который удовлетворяет предоставленной функции тестирования. В противном случае возвращается undefined. Метод `find()` не мутирует массив, на который он вызывается.
Синтаксис:
```
arr.find(callback[, thisArg])
```
##### параметры
* `callback`
* Функция для выполнения по каждому значению в массиве, используя три аргумента:
* `element`
* Текущий элемент обрабатывается в массиве.
* `index`
* Индекс текущего элемента обрабатывается в массиве.
* `array`
* Призыв массива был вызван.
* `thisArg` (необязательно)
* Объект, который будет использоваться при выполнении обратного вызова.
##### Возвращаемое значение
Значение в массиве, если элемент проходит тест; в противном случае не определено.
[MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find)
## Примеры
Этот пример найдет соответствующий элемент в массиве и вернет объект из него.
```javascript
let items = [
{name: 'books', quantity: 2},
{name: 'movies', quantity: 1},
{name: 'games', quantity: 5}
];
function findMovies(item) {
return item.name === 'movies';
}
console.log(items.find(findMovies));
// Output
// { name: 'movies', quantity: 1 }
```
В следующем примере показан вывод каждого необязательного параметра функции обратного вызова. Это вернет `undefined` потому что ни один из элементов не вернет true из функции обратного вызова.
```javascript
function showInfo(element, index, array) {
console.log('element = ' + element + ', index = ' + index + ', array = ' + array);
return false;
}
console.log('return = ' + [4, 6, 8, 12].find(showInfo));
// Output
// element = 4, index = 0, array = 4,6,8,12
// element = 6, index = 1, array = 4,6,8,12
// element = 8, index = 2, array = 4,6,8,12
// element = 12, index = 3, array = 4,6,8,12
// return = undefined
```

View File

@@ -0,0 +1,73 @@
---
title: Array.prototype.findIndex
localeTitle: Array.prototype.findIndex
---
## Информация
Метод `findIndex()` возвращает индекс первого элемента в массиве, который удовлетворяет предоставленной функции тестирования. В противном случае возвращается -1.
Метод `findIndex()` не мутирует массив, на который он вызывается.
Синтаксис:
```
arr.findIndex(callback[, thisArg])
```
##### параметры
* `callback`
* Функция для выполнения по каждому значению в массиве, используя три аргумента:
* `element`
* Текущий элемент обрабатывается в массиве.
* `index`
* Индекс текущего элемента обрабатывается в массиве.
* `array`
* Был вызван массив findIndex ().
* `thisArg` (необязательно)
* Объект, который будет использоваться при выполнении обратного вызова.
##### Возвращаемое значение
Индекс в массиве, если элемент проходит тест; в противном случае -1.
[MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex)
## Примеры
Этот пример найдет соответствующий элемент в массиве и вернет индекс из него.
```javascript
let items = [
{name: 'books', quantity: 2},
{name: 'movies', quantity: 1},
{name: 'games', quantity: 5}
];
function findMovies(item) {
return item.name === 'movies';
}
console.log(items.findIndex(findMovies));
// Index of 2nd element in the Array is returned,
// so this will result in '1'
```
В следующем примере показан вывод каждого необязательного параметра функции обратного вызова. Это вернет `-1` потому что ни один из элементов не вернет true из функции обратного вызова.
```javascript
function showInfo(element, index, array) {
console.log('element = ' + element + ', index = ' + index + ', array = ' + array);
return false;
}
console.log('return = ' + [4, 6, 8, 12].findIndex(showInfo));
// Output
// element = 4, index = 0, array = 4,6,8,12
// element = 6, index = 1, array = 4,6,8,12
// element = 8, index = 2, array = 4,6,8,12
// element = 12, index = 3, array = 4,6,8,12
// return = -1
```

View File

@@ -0,0 +1,37 @@
---
title: Array.prototype.forEach
localeTitle: Array.prototype.forEach
---
## Array.prototype.forEach
Метод массива 'forEach' используется для итерации по каждому элементу массива. Метод вызывается в массиве Object и передается функция, вызываемая для каждого элемента массива.
```javascript
var arr = [1, 2, 3, 4, 5];
arr.forEach(number => console.log(number * 2));
// 2
// 4
// 6
// 8
// 10
```
Функция обратного вызова также может принимать второй параметр индекса, если вам нужно ссылаться на индекс текущего элемента в массиве.
```javascript
var arr = [1, 2, 3, 4, 5];
arr.forEach((number, i) => console.log(`${number} is at index ${i}`));
// '1 is at index 0'
// '2 is at index 1'
// '3 is at index 2'
// '4 is at index 3'
// '5 is at index 4'
```
#### Дополнительная информация:
[Статья MDN на Array.prototype.forEach ()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)

View File

@@ -0,0 +1,24 @@
---
title: Array.prototype.includes
localeTitle: Array.prototype.includes
---
## Array.prototype.includes
Метод `includes()` определяет, содержит ли массив значение. Он возвращает true или false.
Это два аргумента:
1. `searchValue` - элемент для поиска в массиве.
2. `fromIndex` - позиция в массиве, чтобы начать поиск созданного `searchValue` . Если подано отрицательное значение, оно начинается с длины массива минус отрицательное значение.
### пример
```js
const a = [1, 2, 3];
a.includes(2); // true
a.includes(4); // false
```
#### Дополнительная информация:
[MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes)

View File

@@ -0,0 +1,44 @@
---
title: Array.prototype.indexOf
localeTitle: Array.prototype.indexOf
---
## Array.prototype.indexOf
Метод `indexOf()` возвращает первый индекс, в котором данный элемент может быть найден в массиве. Если элемент отсутствует, он возвращает -1.
**Синтаксис**
```javascript
arr.indexOf(searchElement[, fromIndex])
```
## параметры
* **searchElement** Element, для которого вы ищете
* **fromIndex** Дополнительно. Индекс, по которому вы хотите начать поиск. Если значение Index больше или равно длине массива, массив не выполняется, и метод возвращает -1. Если fromIndex является отрицательным числом, он считает смещение от конца массива (массив по-прежнему ищет вперед оттуда). Значение по умолчанию равно 0, что означает поиск всего массива.
## Описание
Метод `indexOf` принимает каждый элемент массива в порядке возрастания индекса и проверяет его на `searchElement` с использованием строгого равенства ( `===` ). Когда он найдет элемент, который возвращает `true` , он возвращает свой индекс.
## Примеры
```javascript
var array = [1, 2, 4, 1, 7]
array.indexOf(1); // 0
array.indexOf(7); // 4
array.indexOf(6); // -1
array.indexOf('1'); // -1
array.indexOf('hello'); // -1
array.indexOf(1, 2); // 3
array.indexOf(1, -3); // 3
```
### Дополнительная информация:
[Ссылка MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf)
[Ссылка MSDN](https://docs.microsoft.com/en-us/scripting/javascript/reference/indexof-method-array-javascript)

View File

@@ -0,0 +1,39 @@
---
title: Array.prototype.join
localeTitle: Array.prototype.join
---
Метод массива JavaScript `.join()` объединяет все элементы массива в одну строку.
**Синтаксис**
```javascript
var array = ["Lorem", "Ipsum", "Dolor", "Sit"];
var str = array.join([separator]);
```
## параметры
**разделитель**
Необязательный. Указывает строку, используемую для разделения каждого элемента исходного массива. Если разделитель не является строкой, он будет преобразован в строку. Если параметр разделителя не указан, элементы массива по умолчанию разделяются запятой. Если разделитель представляет собой пустую строку `""` , все элементы массива соединяются без разделительного символа между ними.
## Описание
`.join()` объединяет все элементы массива в одну строку. Если какой-либо из элементов массива не `undefined` или равен `null` , этот элемент преобразуется в пустую строку `""` .
## Примеры
**Использование `.join()` четыре разных способа**
```javascript
var array = ["Lorem", "Ipsum", "Dolor" ,"Sit"];
var join1 = array.join(); /* assigns "Lorem,Ipsum,Dolor,Sit" to join1 variable
(because no separator was provided .join()
defaulted to using a comma) */
var join2 = array.join(", "); // assigns "Lorem, Ipsum, Dolor, Sit" to join2 variable
var join3 = array.join(" + "); // assigns "Lorem + Ipsum + Dolor + Sit" to join3 variable
var join4 = array.join(""); // assigns "LoremIpsumDolorSit" to join4 variable
```
Источник: [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join)

View File

@@ -0,0 +1,75 @@
---
title: Array.prototype.lastIndexOf
localeTitle: Array.prototype.lastIndexOf
---
## Array.prototype.lastIndexof
Метод `lastIndexOf()` возвращает последний индекс, в котором данный элемент может быть найден в массиве, или -1, если он отсутствует. Массив выполняется в обратном порядке, начиная `fromIndex` .
**Синтаксис**
```javascript
arr.lastIndexOf(searchElement, fromIndex = arr.length - 1])
```
## параметры
* **searchElement**
* Элемент для поиска в массиве.
* **fromIndex**
* _Необязательно_ . Индекс, с которого нужно начать поиск назад. По умолчанию используется длина массива минус единица, т. Е. Будет проверен весь массив. Если индекс больше или равен длине массива, будет проверен весь массив. Если значение отрицательное, оно принимается за смещение от конца массива. Обратите внимание, что даже когда индекс отрицательный, массив по-прежнему выполняется с обратной стороны. Если вычисленный индекс меньше 0, возвращается -1, т.е. массив не будет искать.
[Ссылка MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf) | [Ссылка MSDN](https://msdn.microsoft.com/en-us/LIBRary/ff679972%28v=vs.94%29.aspx)
## Возвращает
Индекс последнего вхождения `searchElement` в массиве, или -1, если `searchElement` не найден.
## Описание
`lastIndexOf` сравнивает `searchElement` с элементами массива с использованием строгого равенства (тот же метод, который используется оператором === или triple-equals, operator).
## замечания
Поиск происходит в порядке убывания индекса (последний член сначала). Для поиска в порядке возрастания используйте метод `indexOf` .
Необязательный аргумент `fromIndex` указывает индекс массива, с которого начинается поиск. Если `fromIndex` больше или равно длине массива, выполняется поиск всего массива. Если `fromIndex` отрицательный, поиск начинается с длины массива плюс `fromIndex` . Если вычисленный индекс меньше 0, возвращается -1.
## Примеры
```javascript
var array = [2, 5, 9, 2];
array.lastIndexOf(2); // 3
array.lastIndexOf(7); // -1
array.lastIndexOf(2, 3); // 3
array.lastIndexOf(2, 2); // 0
array.lastIndexOf(2, -2); // 0
array.lastIndexOf(2, -1); // 3
// Create an array.
var ar = ["ab", "cd", "ef", "ab", "cd"];
// Determine the first location, in descending order, of "cd".
document.write(ar.lastIndexOf("cd") + "<br/>");
// Output: 4
// Find "cd" in descending order, starting at index 2.
document.write(ar.lastIndexOf("cd", 2) + "<br/>");
// Output: 1
// Search for "gh" (which is not found).
document.write(ar.lastIndexOf("gh")+ "<br/>");
// Output: -1
// Find "ab" with a fromIndex argument of -3.
// The search in descending order starts at index 3,
// which is the array length minus 2.
document.write(ar.lastIndexOf("ab", -3) + "<br/>");
// Output: 0
```

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