A js b js: Выражения и операторы | MDN

>

Выражения и операторы | MDN

Эта глава описывает все операторы, выражения и ключевые слова языка JavaScript.

Алфавитный список смотрите в боковой панели слева.

Первичные выражения

Базовые ключевые слова и общие выражения в JavaScript.

this
Ключевое слово this ссылается на контекст выполняемой функции.
function
Ключевое слово function определяет выражение функции.
class
Ключевое слово class определяет выражение класса.
function*
Ключевое слово function* (со звёздочкой) определяет функцию-генератор.
yield
Пауза или продолжение выполнения функции-генератора.
yield*
Делегирует выполнение другому генератору итерируемому объекту.
async function*
async function определяет выражение асинхронной функции.
await
Пауза и продолжение выполнения асинхронной функции и ожидание Promise (результата выполнения) с результатом разрешено/отклонено.
[]
Синтаксис создания инициализатора/литерала массива.
{}
Синтаксис создания инициализатора/литерала объекта
/ab+c/i
Синтаксис создания литерала регулярного выражения.
( )
Оператор группировки.

Левосторонние выражения

Значения слева являются назначением присваивания.

Доступ к свойству
Операторы доступа к членам предоставляют доступ к свойству или методу объекта
(object.property и object['property']).
new
Оператор new создаёт экземпляр объекта с использованием конструктора.
new.target
Свойство new.target ссылается на конструктор или функцию, который был вызван через оператор
new
.
super
Ключевое слово super вызывает конструктор родительского класса.
...obj
Оператор распространения позволяет развернуть выражение в местах, где ожидается несколько аргументов (при вызове функций) или несколько элементов (при создании литералов массива).

Инкремент и декремент

Операторы постфиксного/префиксного инкремента и декремента.

A++ (en-US)
Оператор постфиксного инкремента.
A-- (en-US)
Оператор постфиксного декремента.
++A (en-US)
Оператор префиксного инкремента. (Значение переменной, сначала, увеличивается на 1, а затем используется в выражении)
--A (en-US)
Оператор префиксного декремента.

Унарные операторы

Унарные операции — это операции с одним операндом.

delete
Оператор delete удаляет свойство из объекта.
void
Оператор void отбрасывает возвращаемое значение выражения.
typeof
Оператор typeof определяет тип переданного объекта.
+ (en-US)
Оператор унарного плюса преобразует свой операнд в тип Number.
- (en-US)
Оператор унарного минуса преобразует свой операнд в тип Number
, а затем меняет его знак.
~ (en-US)
Оператор побитового НЕ.
! (en-US)
Оператор логического НЕ.

Арифметические операторы

Арифметические операторы своими операндами принимают числовые значения (литералы или переменные) и возвращают одно числовое значение.

+ (en-US)
Оператор сложения.
- (en-US)
Оператор вычитания.
/ (en-US)
Оператор деления.
* (en-US)
Оператор умножения.
% (en-US)
Оператор взятия остатка от деления.
** (en-US)
Оператор возведения в степень.

Реляционные операторы

Реляционные операторы (операторы отношения) сравнивают свои операнды и возвращают значение типа

Boolean, зависящее от того, был ли результат сравнения истинным или ложным.

in
Оператор in определяет, содержит ли объект указанное свойство.
instanceof
Оператор instanceof определяет, является ли объект экземпляром потомком Prototype (или экземпляром) другого объекта.
< (en-US)
Оператор меньше.
> (en-US)
Оператор больше.
<= (en-US)
Оператор меньше или равно.
>= (en-US)
Оператор больше или равно.

Операторы равенства

Результат вычисления оператора равенства всегда имеет тип Boolean и значение, зависящее от того, был ли результат проверки истинным или ложным.

== (en-US)
Оператор проверки на равенство.
!= (en-US)
Оператор проверки на неравенство.
=== (en-US)
Оператор проверки на идентичность.
!== (en-US)
Оператор проверки на неидентичность.

Операторы побитового сдвига

Операции для сдвига всех битов операнда.

<< (en-US)
Оператор побитового сдвига влево.
>> (en-US)
Оператор знакового побитового сдвига вправо.
>>> (en-US)
Оператор беззнакового побитового сдвига вправо.

Бинарные побитовые операторы

Побитовые операторы трактуют свои операнды как набор из 32 битов (нулей и единиц) и возвращают стандартные числовые значения JavaScript.

& (en-US)
Оператор побитового И.
| (en-US)
Оператор побитового ИЛИ. (en-US)
Оператор побитового ИСКЛЮЧАЮЩЕГО ИЛИ.

Бинарные логические операторы

Логические операторы обычно используются вместе с булевыми (логическими) значениями и в сочетании с ними они возвращают булево значение.

&& (en-US)
Оператор логического И.
|| (en-US)
Оператор логического ИЛИ.

Условный (тернарный) оператор

(условие ? ifTrue : ifFalse)
Условный оператор возвращает одно значение из двух данных в зависимости от логического значения условия.

Операторы присваивания

Операторы присваивания присваивают значение своему левому операнду, зависящее от значения их правого операнда.

= (en-US)
Оператор присваивания.
*= (en-US)
Оператор присваивания с умножением.
/= (en-US)
Оператор присваивания с делением.
%= (en-US)
Оператор присваивания с взятием остатка от деления. = (en-US)
Оператор присваивания с побитовым ИСКЛЮЧАЮЩИМ ИЛИ.
|= (en-US)
Оператор присваивания с побитовым ИЛИ.
[a, b] = [1, 2]
{a, b} = {a:1, b:2}
Деструктурирующее присваивание позволяет вам присваивать свойства массива или объекта переменным с использованием синтаксиса, очень похожего на объявление литералов массива или объекта.

Оператор запятая

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

Нестандартные особенности

Legacy generator function
Ключевое слово function может быть использовано для определения устаревших функций-генераторов в одном выражении. Для того, чтобы сделать такую функцию, её тело должно содержать хотя бы одно выражение yield.
Expression closures
Синтаксис закрытого выражения для сокращённого написания простейших функций.
[for (x of y) x]
Упрощённый синтаксис создания массива.
(for (x of y) y)
Упрощённый синтаксис создания генератора.

Операторы, их особенности в JS

В Javascript есть все необходимые для жизни операторы, хотя нет их перегрузки.

Некоторые операторы(+,побитовые,логические,===) имеют специфические особенности.

В Javascript есть даже операторы >>> и <<<.

В отличие от некоторых других языков, оператор «+» делает конкатенацию, если хотя бы один операнд — строка, причем, не обязательно первый.

Проверим:

Унарный оператор «+» также используется для преобразования строки к числу:

alert(+"123"+1) // 124

Все побитовые операции работают с 4-байтовым signed int.

Операция >>> сдвигает побитово вправо, а слева нулями дополняет. В результате эффект — тот же, что и при простом сдвиге >> для положительных чисел.

Для отрицательных — все по-другому. Например, -9 в битовом виде выглядит как: 11111111111111111111111111110111.

Операция >>> даст эффект: -9 >>> 2 будет в битовом виде 00111111111111111111111111111101, т.е 1073741821.

Логическое И. Возвращает последний операнд, если все операнды верны. Если хоть один из операндов неверен, то возвратит первый неверный операнд.

Например, 1 && 2 = 2:

1 && 0 && false === 0:

Оператор И обычно используется, чтобы избежать ошибок при получении вложенных свойств объекта.

Например, нужно свойство petShop.animals.rabbit или ложное значение, если такого свойства нет.

Безопасный способ:

var rabbit = petShop && petShop. animals && petShop.animals.rabbit

Этот код корректно выполнится, даже если petShop = false, в то время как

var rabbit = petShop.animals.rabbit

выдаст ошибку(бросит исключение) об отсутствующем свойстве.

Оператор логического ИЛИ возвращает первое верное значение. А если верных значений вообще нет, то последнее неверное.
Это удобно использовать так:

var e = event || window.event // если event не событие, то берем window.event

Логическое НЕ, также удобно для преобразования в Boolean.

var str = "something"
// эквивалентные записи
var test = Boolean(str)
var test = !!str

Операторы больше-меньше также работают со строками, сравнивая их лексикографически, т.е посимвольно.

"B">"a"
"bc" < "bd"

Сравнение == делается с приведением типов, а === без приведения типов, например:

0 == false  // верно
// но 
0 !== false  //типы разные

Проверка равенства осуществляется особым образом, если один из операндов — undefined, null, NaN. Более подробно об алгоритме в этом случае можно прочитать в секции 11.9.3 стандарта ECMA-262.

Тернарный оператор. В старых парсерах javascript с ним были проблемы, надо было заключать сравнение в скобки, но в новых — вполне нормальный оператор

var test = (1==2) ? "one" : "two"
// эквивалентно
var test = 1==2 ? "one" : "two"

JavaScript | Введение

Что такое JavaScript

Последнее обновление: 29.06.2021

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

JavaScript был создан в 1995 году в компании Netscape разработчиком Брендоном Айком (Brendon Eich) в качестве языка сценариев в браузере Netscape Navigator 2. Первоначально язык назывался LiveScript, но на волне популярности в тот момент другого языка Java LiveScript был переименован в JavaScript. Однако данный момент до сих пор иногда приводит к некоторой путанице: некоторые начинающие разработчики считают, что Java и JavaScript чуть ли не один и тот же язык. Нет, это абсолютно два разных языка, и они связаны только по названию.

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

Однако развитие веб-среды, появление HTML5 и технологии Node.js открыло перед JavaScript гораздо большие горизонты. Сейчас JavaScript продолжает использоваться для создания веб-сайтов, только теперь он предоставляет гораздо больше возможностей.

Также он применяется как язык серверной стороны. То есть если раньше JavaScript применялся только на веб-странице, а на стороне сервера нам надо было использовать такие технологии, как PHP, ASP.NET, Ruby, Java, то сейчас благодаря Node.js мы можем обрабатывать все запросы к серверу также с помощью JavaScript.

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

И что вообще раньше казалось фантастикой, но сегодня стало реальностью — javascript может использоваться для набирающего популярность направления разработки для IoT(Internet of Things или Интернет вещей). То есть JavaScript можно использовать для программирования самых различных «умных» устройств, которые взаимодействуют с интернетом.

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

С самого начала существовало несколько веб-браузеров (Netscape, Internet Explorer), которые предоставляли различные реализации языка. И чтобы свести различные реализации к общему стержню и стандартизировать язык под руководством организации ECMA был разработан стандарт ECMAScript. В принципе сами термины JavaScript и ECMAScript являются во многом взаимозаменяемыми и относятся к одному и тому же языку.

К настоящему времени ECMA было разработано несколько стандартов языка, которые отражают его развитие. В последнее время почти каждый год выходит новый стандарт. На данный момент последним принятым стандартом является ECMAScript 2021, который был одобрен 22 июня 2021 года. Однако реализация стандартов в браузерах занимает довольно продолжительное время. Одни браузеры быстрее реализуют новые стандарты, другие медленнее. Кроме того, есть большой пласт старых версий браузеров, которыми простые пользователи продолжают пользоваться и которые естественно могут не поддерживать нововведения последних стандартов. И это надо учитывать при разработке программ на JavaScript. В данном же руководстве будут рассматриваться в основном те возможности JavaScript, которые поддерживаются всеми наиболее распространенными современными браузерами.

JavaScript является интерпретируемым языком. Это значит, что код на языке JavaScript выполняется с помощью интерпретатора. Интерпретатор получает инструкции языка JavaScript, которые определены на веб-странице, выполняет их (или интерпретирует).

Средства разработки

Для разработки на JavaScript нам потребуется текстовый редактор для написания кода и веб-браузер для его тестирования. В качестве текстового редактора я советую использовать такую программу как Visual Studio Code. Он бесплатен, имеет много возможностей и может быть установлен как на Windows, так и на Linux и MacOS. Хотя этот может быть любой другой текстовый редактор.

Также существуют различные среды разработки, которые поддерживают JavaScript и облегчают разработку на этом языке, например, Visual Studio, WebStorm, Netbeans и так далее. При желании можно использовать также эти среды разработки.

Итак, приступим к созданию первой программы.

Альтернатива if/else и switch: литералы объектов в JavaScript

Сложные условия в JS всегда были источником лишнего кода. Однако использование литералов объектов в JavaScript может избавить вас от этой проблемы. Давайте разберёмся, как это работает.

Литерал объекта в JavaScript — это список пар ключ-значение, перечисленных через запятую и обёрнутый фигурными скобками.

Допустим у нас есть функция, которая принимает на вход рифмованную фразу на английском сленге кокни и возвращает её значение. Если использовать конструкцию if/else, то код будет выглядеть следующим образом:

function getTranslation(rhyme) {
  if (rhyme.toLowerCase() === "apples and pears") {
    return "Stairs";
  } else if (rhyme.toLowerCase() === "hampstead heath") {
    return "Teeth";
  } else if (rhyme.toLowerCase() === "loaf of bread") {
    return "Head";
  } else if (rhyme.toLowerCase() === "pork pies") {
    return "Lies";
  } else if (rhyme.toLowerCase() === "whistle and flute") {
    return "Suit";
  }

  return "Rhyme not found";
}

Выглядит так себе. Этот код не только плохо читается, но и использует повторяющийся вызов функции toLowerCase().

Чтобы уменьшить количество кода, мы можем использовать дополнительную переменную или конструкцию switch.

function getTranslation(rhyme) {
  switch (rhyme.toLowerCase()) {
    case "apples and pears":
      return "Stairs";
    case "hampstead heath":
      return "Teeth";
    case "loaf of bread":
      return "Head";
    case "pork pies":
      return "Lies";
    case "whistle and flute":
      return "Suit";
    default:
      return "Rhyme not found";
  }
}

Такой код выглядит чище, но это не предел. К тому же, в случае использования более сложных условий, можно случайно пропустить break и спровоцировать баги.

Альтернатива

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

function getTranslationMap(rhyme) {
  const rhymes = {
    "apples and pears": "Stairs",
    "hampstead heath": "Teeth",
    "loaf of bread": "Head",
    "pork pies": "Lies",
    "whistle and flute": "Suit",
  };
  
  return rhymes[rhyme. toLowerCase()] ?? "Rhyme not found";
}

Мы используем объект, ключи которого выполняют роль условий, а значения — результатов. Затем, с помощью квадратных скобок, мы проверяем наличие нужной строки. Так как полученная строка может быть null или undefined, то мы используем оператор Nullish coalescing (??). Таким образом мы избавляемся от null-значения, но не исключаем случай, что результат может быть равен нулю или false.

function stringToBool(str) {
  const boolStrings = {
    "true": true,
    "false": false,
  };

  return boolStrings[str] ?? "String is not a boolean value";
}

Это немного надуманный пример, но он иллюстрирует то, как использование ?? помогает избежать багов.

Подробнее о способах обработки undefined в JavaScript.

Сложная логика

Для организации более сложных условий вы можете использовать в качестве значений свойств функции.

function calculate(num1, num2, action) {
  const actions = {
    add: (a, b) => a + b,
    subtract: (a, b) => a - b,
    multiply: (a, b) => a * b,
    divide: (a, b) => a / b,
  };

  return actions[action]?. (num1, num2) ?? "Calculation is not recognised";
}

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

Вывод

Каждая условная конструкция имеет свою область применения. Для литералов объектов в JavaScript это длинные списки условий и сложные условия, которые можно реализовать с помощью функций.

Источник Don’t Use If-Else and Switch in JavaScript, Use Object Literals

Java и JavaScript: в чём разница?

Корот­кий ответ: Java и JavaScript — это про­сто раз­ные язы­ки, кото­рые исполь­зу­ют­ся для раз­ных целей. Похо­жие назва­ния — про­сто исто­ри­че­ское недоразумение.

Java — это серьёз­ный объ­ект­но ори­ен­ти­ро­ван­ный язык, на кото­ром пишут сер­вер­ный софт, про­грам­мы для ком­пью­те­ров и мобиль­ные при­ло­же­ния. Он инте­ре­сен тем, что один и тот же код мож­но ском­пи­ли­ро­вать под мно­же­ство раз­ных плат­форм. Java — один из основ­ных язы­ков для раз­ра­бот­ки под Android. Читай­те о Java подроб­нее у нас.

JavaScript — это язык для управ­ле­ния веб-страницами в бра­у­зе­ре. Он испол­ня­ет­ся толь­ко в бра­у­зе­ре, может кра­сить эле­мен­ты на стра­ни­це в раз­ные цве­та, рисо­вать интер­фей­сы, пулять­ся дан­ны­ми, но всё — в браузере.

На JavaScript мож­но писать и при­ло­же­ния, и даже деск­топ­ные про­грам­мы. Но это тре­бу­ет огром­но­го внеш­не­го обве­са, мы не реко­мен­ду­ем. Зато реко­мен­ду­ем прой­ти тест на зна­ние JavaScript.

JavaJavaScript

Для деск­топ­ных, сер­вер­ных и встро­ен­ных программ 

Для бра­у­зер­ных программ 

Испол­ня­ет­ся на любом желе­зе, для кото­ро­го есть Java Virtual Machine 

Испол­ня­ет­ся толь­ко в бра­у­зе­ре и в неко­то­рых сер­вер­ных средах 

Слож­но­ват 

Про­стой, но с нюансами 

Ком­пи­ли­ру­ет­ся 

Испол­ня­ет­ся на лету 

На нём рабо­та­ют кас­со­вые тер­ми­на­лы, сер­вер­ные про­грам­мы, при­ло­же­ния для Андроида 

На нём рабо­та­ет весь интернет 

Что изучать?

Java — это такой про­мыш­лен­ный язык. На нём рабо­та­ют тер­ми­на­лы опла­ты, умные устрой­ства, огром­ные сер­вер­ные систе­мы. Мир пот­ных инже­не­ров, сер­вер­ных ком­нат и финан­со­вых рын­ков. Если хоти­те, что­бы у вас была рабо­та по под­держ­ке и совер­шен­ство­ва­нию все­го это­го хозяй­ства на мно­го лет впе­рёд — вам сюда.

JavaScript — это в первую оче­редь язык для веба. На нём мож­но очень быст­ро напи­сать про­стое веб-приложение, быст­ро его рас­про­стра­нить, быст­ро зара­бо­тать денег. Если вам нуж­но мно­го неболь­шой рабо­ты пря­мо сей­час или вы хоти­те запус­кать соб­ствен­ные веб-приложения как пред­при­ни­ма­тель, начи­най­те с JavaScript.

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

Исто­рия Java и JavaScript в общих чер­тах выгля­дит так.

Нача­ло девя­но­стых. В ком­па­нии Sun Microsystems пилят язык про­грам­ми­ро­ва­ния, кото­рый мож­но будет исполь­зо­вать для умных устройств — теле­при­ста­вок, холо­диль­ни­ков и вся­ко­го тако­го. Зада­ча была при­ду­мать такую систе­му, что­бы код писал­ся один раз, а испол­нять его мож­но было бы на раз­ном желе­зе. В 1995 году выхо­дят пер­вые вер­сии это­го язы­ка, он назы­ва­ет­ся Java.

Парал­лель­но с этим в дру­гой обла­сти идёт вой­на бра­у­зе­ров. Тех­но­ло­гии веба ещё очень сла­бые, пло­хо стан­дар­ти­зи­ро­ван­ные, HTML ещё мало что уме­ет, дизай­на мало. В ходу несколь­ко бра­у­зе­ров, каж­дый из кото­рых рису­ет веб-страницы по-своему. Один из этих бра­у­зе­ров — Netscape Navigator.

Созда­те­ли Netscape Navigator меч­та­ют, что­бы бра­у­зе­ры уме­ли кра­си­во себя вести; что­бы там был интер­ак­тив и ани­ма­ции; что­бы в бра­у­зе­ре мож­но было запус­кать про­грам­мы и делать хотя бы про­стые вещи (а не толь­ко читать). И они раз­ра­ба­ты­ва­ют тех­но­ло­гию Mocha — язык скрип­то­ва­ния, кото­рый умел рабо­тать напря­мую с веб-страницей. В те вре­ме­на это было ново и интересно.

Сло­во за сло­во, Netscape вхо­дит в состав Sun Microsystems, и в поры­ве мар­ке­тин­го­во­го кре­а­ти­ва язык Mocha пере­име­но­вы­ва­ют в JavaScript, что­бы попи­а­рить одно на дру­гом. Яко­бы JavaScript — это ком­па­ньон Java для веба (хотя раз­ра­ба­ты­ва­ли JavaScript совсем дру­гие люди и с дру­ги­ми задачами).

Пиар не зашёл. Лет пять раз­ра­бот­чи­ки пле­ва­лись из-за кажу­щей­ся кри­виз­ны JavaScript и обще­го раз­ла­да в веб-технологиях. Уже позд­нее, в двух­ты­сяч­ных, нача­лась бес­ком­про­мисс­ная стан­дар­ти­за­ция веб-технологий (огнём и мечом), и всё посте­пен­но нала­ди­лось. Но оса­до­чек остался.

А похо­жие назва­ния язы­ков — это то, что быва­ет, когда мар­ке­то­ло­гов пус­ка­ют в про­грам­ми­ро­ва­ние. Не надо так. 

Курс по программированию на JavaScript, основы программирования на JavaScript, уроки по программированию на JavaScript для начинающих

Я сам с Беларуси, до обучения закончил 2 курса БГУИР по специальности «специалист по защите информации», но эта специальность не пришлась мне по душе и уехал подрабатывать в Москву, разнорабочим был.

В один из дней по пути в другой город, остановился на машине на обочине и произошло ДТП с фурой. Что было после я мало помню, одно помню было 4 перелома, 1 открытый. Было невозможно делать операцию в России, ибо она была платной, для моего кошелька слишком не подъёмная сумма и пришлось с 4 переломами ехать к себе в Беларусь. Отец нашел одноклассника, который 1000 км вёз меня с переломами. Полгода в больнице и после чего я остался инвалидом 3 группы, не работала кисть левой руки.

Всё это очень сильно повлияло на меня и захотелось найти высокооплачиваемую работу, чтобы банально в случае такой ситуации были деньги на операцию. С августа я пытался учить Python, после чего, в конце октября, мне захотелось применить его в Web-e и попутно изучить JavaScript, но толковых курсов я не нашел и решил почему бы не написать топовым организациям и попросить получить льготное образование за счёт того что я инвалид, Все мне отказывали, но у меня была цель и я двигался к ней.

Спустя пару дней я случайно наткнулся на вашу платформу и решил написать, после чего на связь со мной вышла Дарья Уакина (за что ей ОГРОМНОЕ СПАСИБО). После запроса на подтверждение того что я инвалид (выслал паспорт и свидетельство), мне выдали курс абсолютно бесплатно. Мою радость в тот момент было очень сложно описать, но как ребёнок я готов был прыгать до потолка.

Правильная мотивация от преподавателей, а также консультация от Александр Щемелёва по поводу трудоустройства и в каком направлении мне нужно учить, дало мне очень сильно полюбить своё дело и найти так быстро работу. На заключительном этапе, на момент обсуждения зарплаты, ту сумму которую я запросил, удвоили ровно в 2раза и плюс работа находится в одном из самых красивых районов Минска. В OTUS нравится абсолютно всё, от профессиональных преподавателей, которые могут донести свой материал, до интересных знакомств и интересных домашек.

Хотелось бы поблагодарить всю команду, но в особенности отметить Дарью Уакину и Александра Щемелёва.

Курс JavaScript. Уровень 1. Основы JavaScript в «Специалист»

X

Данный контент доступен только авторизованным пользователям. Пожалуйста, войдите на сайт, либо зарегистрируйтесь.

Вход Регистрация

Ни один современный сайт не обходится без взаимодействия с посетителями. Проверка форм или использование карт, перетаскивание товара в корзину или просмотр увеличенных фотографий – это и многое другое реализуется с помощью скриптового языка JavaScript. С его помощью разработчик задает «реакцию» сайта на действия посетителя, делая ресурс интерактивным. 

Изучение JavaScript — первый шаг в мир построения функциональных сайтов и мощных интерфейсов. Почему стоит изучить JavaScript?

  • Появившись в середине 90-х, этот язык по-прежнему востребован и не имеет серьезных конкурентов.
  • Знание JavaScript является самым частым требованием в вакансиях веб-разработчиков.
  • В рейтинге популярности языков программирования аналитической компании RedMonk (2016 год) JavaScript занимает 1 место.
  • Если одного JavaScript вам станет мало, можно будет перейти на серверное программирование Node. js или изучить схожие по синтаксису С#, С++, Java, PHP.

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

Пройдя курс, вы будете понимать суть веб-программирования и твердо знать язык JavaScript без привязки к среде исполнения. После этого курса вы будете готовы к прикладному применению JavaScript: работе с html-страницей, ее элементами и событиями, которые изучаются на курсе «JavaScript. Уровень 2. Расширенные возможности».

Программа курса соответствует требованиям профессионального стандарта «Программист».

Начните свой путь в веб-разработке с курсов JavaScript в «Специалисте»!

ПОЛЕЗНЫЕ МАТЕРИАЛЫ

обширная математическая библиотека для JavaScript и Node.js

Math.js поддерживает единицы измерения. Единицы можно использовать для расчетов и выполнения конверсии.

Использование №

Единицы можно создать с помощью функции math.unit . Эта функция принимает либо один строковый аргумент, содержащий значение и единицу, либо два аргумента, первое — числовое значение, второе — строка, содержащая единицу. Большинство устройств поддерживают такие префиксы, как k или kilo , и многие устройства имеют оба полное наименование и аббревиатура.Возвращенный объект — Unit .

Синтаксис:

  math.unit (значение: число, имя: строка): Единица
math.unit (unit: string): Единица
math.unit (unit: Unit): Единица
  

Пример использования:

  const a = math.unit (45, 'cm') // Единица измерения 450 мм
const b = math. unit ('0,1 килограмм') // Единица измерения 100 грамм
const c = math.unit ('2 inch') // Единица 2 дюйма
const d = math.unit ('90 км / ч ') // Единица 90 км / ч
const e = математика.2)

const d = c.to ('cm') // Единица 5,08 см
b.toNumber ('грамм') // Число 100
math.number (b, 'грамм') // Число 100

c.equals (a) // ложь
c.equals (d) // верно
c.equalBase (a) // истина
c.equalBase (b) // ложь

d.toString () // Строка "5,08 см"
  

Будьте осторожны при создании единицы с несколькими членами в знаменателе.3 Па · К) / моль

Расчеты №

Операции, которые поддерживают единицы: сложение , вычитание , умножение , деление , pow , abs , sqrt , квадрат , куб и знак . Тригонометрические функции, такие как cos , также поддерживаются, если аргументом является угол.

  const a = math.unit (45, 'cm') // Единица измерения 450 мм
const b = математика. unit ('0,1 м') // Единица 100 мм
math.add (a, b) // Блок 0,65 м
math.multiply (b, 2) // Единица 200 мм

const c = math.unit (45, 'deg') // Единица измерения 45 градусов
math.cos (c) // Число 0.7071067811865476

// Кинетическая энергия среднего седана на шоссе
const d = math.unit ('80 mi / h ') // Единица 80 mi / h
const e = math.unit ('2 tonne') // Единица 2 тонны
const f = math.multiply (0,5, math.multipy (math.pow (d, 2), e))
                                    // 1.27742399996 МДж
  

Также поддерживаются операции с массивами:

  // Сила, действующая на заряженную частицу, движущуюся в магнитном поле
const B = math.evaluate ('[1, 0, 0] T') // [1 T, 0 T, 0 T]
const v = math.evaluate ('[0, 1, 0] м / с') // [0 м / с, 1 м / с, 0 м / с]
const q = math.evaluate ('1 C') // 1 C

const F = math.multiply (q, math.cross (v, B)) // [0 N, 0 N, -1 N]
  

Все арифметические операторы воздействуют на значение единицы, как оно представлено в единицах СИ. Это может привести к неожиданному поведению при работе с температурными шкалами, такими как градусов Цельсия (или градусов Цельсия ) и градусов Фаренгейта (или градусов Фаренгейта ). В общем, вам следует избегать вычислений с использованием градусов Цельсия и Фаренгейта . Вместо этого используйте kelvin (или K ) и rankine (или R ). В этом примере показаны некоторые проблемы при использовании градусов Цельсия и Фаренгейта в расчетах:

  const T_14F = математ.unit ('14 degF ') // Единица 14 градусовF (263,15 K)
const T_28F = math.multiply (T1, 2) // Единица измерения 487,67 градуса по Фаренгейту (526,3 K), а не 28 градусов по Фаренгейту

const Tnegative = math.unit (-13, 'degF') // Единица -13 degF (248,15 K)
const Tpositive = math.abs (T1) // Единица -13 градусов по Фаренгейту (248,15 K), а не 13 градусов по Фаренгейту

const Trate1 = math. evaluate ('5 (degC / hour)') // Единица измерения 5 degC / час
const Trate2 = math.evaluate ('(5 ° C) / час') // Единица 278,15 ° C / час
  

Синтаксический анализатор выражений также поддерживает единицы измерения.Это описано в разделе о единицы на странице Синтаксис.

Единицы, определяемые пользователем #

Вы можете добавить свои собственные единицы измерения в Math.js, используя функцию math.createUnit . В следующем примере определяется новая единица измерения фарлонг , а затем в вычислении используется определенная пользователем единица измерения:

  math.createUnit ('фарлонг', '220 ярдов')
math.evaluate ('1 миля до фарлонга') // 8 фарлонг
  

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

  // 'foo' не может быть выражено в каких-либо других единицах. 
math.createUnit ('фу')
math.evaluate ('8 футов * 4 фута') // 32 фута
  

Второй аргумент createUnit также может быть объектом конфигурации, состоящим из следующих свойств:

  • определение Строка или Единица , которая определяет определяемую пользователем единицу в терминах существующих встроенных или определяемых пользователем единиц.Если не указано, создается новый базовый блок.
  • префиксов Строка , указывающая, какие префиксы math.js следует использовать с новым модулем. Возможные значения: 'none' , 'short' , 'long' , 'binary_short' или 'binary_long' . По умолчанию «нет» .
  • смещение Значение, применяемое при преобразовании в единицу измерения. Это очень полезно для температурных шкал, у которых нет общего нуля со шкалой абсолютной температуры. Например, если бы мы определяли фаренгейт впервые, мы бы использовали: math.createUnit ('fahrenheit', {определение: '0,555556 кельвинов', смещение: 459,67})
  • псевдонимов Массив строк для псевдонима нового модуля. Пример: math.createUnit ('узел', {определение: '0,514444 м / с', псевдонимы: ['узлы', 'kt', 'kts']})
  • baseName Строка , которая указывает имя нового измерения на случай, если его необходимо создать.Каждая единица измерения в math.js имеет измерение: длину, время, скорость и т. Д. Если определение единицы не соответствует какому-либо существующему измерению или это новая базовая единица, то createUnit создаст новое измерение с имя baseName и назначьте его новому устройству. По умолчанию к имени устройства добавляется '_STUFF' . Если единица измерения уже соответствует существующему размеру, этот параметр не действует.

Необязательный объект options также может быть указан в качестве последнего аргумента для createUnits .В настоящее время поддерживается только опция override :

  // Новое определение мили (это не первый раз в истории)
math.createUnit ('миля', '1609.347218694', {override: true}})
  

Базовые единицы, созданные без указания определения, не могут быть переопределены.

Создание нескольких юнитов одновременно #

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

Например:

  math.createUnit ({
  foo: {
    префиксы: 'длинные',
    baseName: 'сущность-фу'
  },
  bar: '40 foo ',
  baz: {
    определение: «1 бар / час»,
    префиксы: 'длинные'
  }
},
{
  переопределить: истина
})
math. evaluate ('50000 kilofoo / s') // 4,5 гигабаз
  

Возвращаемое значение #

createUnit возвращает созданную единицу или, если создано несколько единиц, последнюю созданную единицу.Поскольку createUnit также совместим с парсером выражений, это позволяет вам делать такие вещи, как это:

  math.evaluate ('45 миль / час для созданияUnit ("узел", "0,514444 м / с") ')
// 39.103964668651976 узел
  

Поддержка пользовательских символов в именах юнитов #

По умолчанию имя нового объекта:

  • должен начинаться с латинского символа (A-Z или a-z)
  • должен содержать только цифры (0-9) или латинские символы

Можно разрешить использование специальных символов (таких как греческий алфавит, кириллица, любые символы Unicode и т. Д.)) путем переопределения статического метода Unit.isValidAlpha . Например:

  const isAlphaOriginal = math. Unit.isValidAlpha
const isGreekLowercaseChar = function (c) {
  const charCode = c.charCodeAt (0)
  вернуть charCode> 944 && charCode <970
}
math.Unit.isValidAlpha = function (c) {
  return isAlphaOriginal (c) || isGreekLowercaseChar (c)
}

math.createUnit ('θ', '1 рад')
math.evaluate ('1θ + 3 deg'). toNumber ('deg') // 60.29577951308232
  

API №

Объект Unit содержит следующие функции:

шт.clone () #

Клонировать объект, возвращает новый объект с теми же параметрами.

unit.equalBase (unit) #

Проверить, есть ли у юнита та же база, что и у другого юнита: длина, масса и т. д.

unit.equals (unit) #

Проверить, равна ли одна единица другой единице. Единицы равны когда они имеют одинаковую базу и одинаковое значение при нормализации в единицах СИ.

unit.format ([параметры]) #

Получить строковое представление единицы измерения. Функция определит наиболее подходящий префикс для устройства. См. Формат страницу с доступными опциями.

unit.fromJSON (json) #

Восстановить юнит из объекта JSON. Принимает Объект {mathjs: 'Unit', value: number, unit: string, fixPrefix: boolean} , где свойство mathjs и fixPrefix являются необязательными. Используется при десериализации юнита, см. Сериализация.

unit.splitUnit (детали) #

Разделить юнит на указанные части. Например:

  const u = математ.unit (1, 'м')
u.splitUnit (['ft', 'in']) // 3 фута, 3,3700787401574765 дюймов
  

unit.to (unitName) #

Преобразование единицы измерения в конкретное имя единицы. Возвращает клон блок с фиксированным префиксом и блоком.

unit.toJSON () #

Возвращает JSON-представление объекта с подписью. {mathjs: 'Unit', значение: number, unit: string, fixPrefix: boolean} . Используется при сериализации единицы, см. Сериализация.

unit.toNumber (unitName) #

Получить значение единицы при преобразовании в указанная единица измерения (единица измерения с необязательным префиксом, но без значения). Тип возвращаемого значения всегда число .

unit.toNumeric (unitName) #

Получить значение единицы при преобразовании в указанная единица измерения (единица измерения с необязательным префиксом, но без значения). Тип возвращаемого значения зависит от того, как был создан объект и может быть числом , Fraction или BigNumber .

unit.toSI () #

Возвращает копию единицы, представленной в единицах СИ. Работает с единицами измерения со значением или без него.

unit.toString () #

Получить строковое представление единицы измерения. Функция будет определить наиболее подходящий префикс для устройства.

Артикул №

В этом разделе перечислены все доступные единицы измерения, префиксы и физические константы. Их можно использовать через объект Unit или через math.evaluate () .

Номер ссылки

Math.js поставляется со следующими встроенными модулями.

База Блок
Длина метр (м), дюйм (дюйм), фут (фут), ярд (ярд), миля (миль), звено (li), стержень (rd), цепь (ch), ангстрем, мил
Площадь m2, sqin, sqft, sqyd, sqmi, sqrd, sqch, sqmil, acre, га
Объем м3, литр (л, л, лит, литр), куб.см, кубик, кубок, кубик, чайная ложка, столовая ложка
Объем жидкости минимум (мин), флюиддрам (fldr), флюидунс (floz), жабра (gi), чашка (cp), пинта (pt), кварт (qt), галлон (гал), пивная бочка (bbl), бочка с маслом (обл) , бочка, падение (GTT)
Уголки рад (радиан), град (градус), град (градиан), цикл, arcsec (угловая секунда), arcmin (угловая минута)
Время секунда (с, секунды, секунды), минута (минуты, минуты), час (ч, час, часы, часы), день (дни), неделя (недели), месяц (месяцы), год (годы), декада ( десятилетия), век (века), тысячелетие (тысячелетия)
Частота герц (Гц)
Масса грамм (г), тонна, тонна, зерно (гр), драм (др), унция (унция), фунт-масса (фунт, фунт, фунт), центнер (центнер), палка, камень
Электрический ток ампер (А)
Температура кельвина (K), Цельсия (degC), Фаренгейта (degF), Ранкина (degR)
Количество вещества моль (моль)
Сила света кандела (cd)
Усилие ньютон (Н), дин (дин), фунт-сила (фунт-сила), кип
Энергия джоуль (Дж), эрг, Втч, БТЕ, электронвольт (эВ)
Мощность Вт (Вт), л. с.
Давление Па, фунт / кв. Дюйм, атм, торр, бар, мм рт. Ст., Мм вод. Ст., См. Вод. Ст.
Электричество и магнетизм ампер (A), кулон (C), ватт (Вт), вольт (V), ом, фарад (F), вебер (Wb), тесла (T), генри (H), сименс (S), электронвольт ( эВ)
двоичный бита (b), байта (B)

Примечание: все единицы времени основаны на юлианском году, один месяц - это 1/12 юлианского года, год - один юлианский год, декада - 10 юлианских лет, век - 100, а тысячелетие. будучи 1000.2 вместо 100 кв.м .

Префиксы #

Доступны следующие десятичные префиксы.

Имя Аббревиатура Значение
дека da 1e1
га ч 1e2
кг к 1e3
мега M 1e6
гига G 1e9
тера Т 1e12
пета-п. 1e15
exa E 1e18
zetta Z 1e21
йотта Y 1e24
Имя Сокращение Значение
деци д 1e-1
сенти с 1e-2
милли м 1e-3
микро u 1e-6
нано 1e-9
пико п. 1e-12
фемто f 1e-15
атто 1e-18
zepto z 1e-21
лет y 1e-24

Доступны следующие двоичные префиксы. 8

Имя Сокращение Значение
кг к 1e3
мега M 1e6
гига G 1e9
тера Т 1e12
пета-п. 1e15
exa E 1e18
zetta Z 1e21
йотта Y 1e24

Физические константы #

Math.js включает следующие физические константы. См. Википедию для получения дополнительной информации.

Универсальные константы #
Имя Символ Значение Блок
speedOfLight с 2997

м · с -1
гравитация Постоянная г 6. 6738480e-11 м 3 · кг -1 · с -2
Планка Константа ч 6.626069311e-34 Дж · с
уменьшенная Постоянная планка ч 1.05457172647e-34 Дж · с
Электромагнитные константы #
Имя Символ Значение Блок
магнитное Постоянное мкм 0 1.2566370614e-6 Н · А -2
электрический Постоянный ε 0 8.854187817e-12 Ф · м -1
вакуум Импеданс Z 0 376.730313461 & Ом;
кулон κ 8.9875517873681764e9 Н · м 2 · C -2
elementaryCharge e 1.60217656535e-19 С
бор Магнетон мкм B 9.2740096820e-24 Дж · Т -1
проводимость Квант G 0 7.7480
625e-5 
S
обратная проводимость Квант G 0 -1 12906.403721742 & Ом;
MagneticFluxQuantum ф 0 2.06783375846e-15 Wb
ядерный Магнетон мкм N 5.0507835311e-27 Дж · Т -1
клицинг R K 25812. 807443484 & Ом;
Атомные и ядерные константы #
Имя Символ Значение Блок
бор Радиус a 0 5.2

109217e-11

м
классическийElectronRadius r e 2,817940326727e-15 м
электронМасса м e 9.10
  • 140e-31
  • кг
    ферми Муфта G F 1.1663645e-5 ГэВ -2
    тонкая структура α 7.297352569824e-3
    hartreeEnergy E h 4.3597443419e-18 Дж
    масса протона м п 1.67262177774e-27 кг
    масса дейтрона м г 3.3435830926e-27 кг
    нейтрон Масса м n 1.674

    13e-27
    кг
    квантовая циркуляция h / (2 м e ) 3.636947552024e-4 м 2 · с -1
    Райдберг R 10973731.56853955 м -1
    thomson Поперечное сечение 6.65245873413e-29 м 2
    слабый угол смешивания 0,222321
    ефимов Фактор 22,7
    Физико-химические константы #
    Имя Символ Значение Блок
    atomicMass м u 1.660538

    e-27
    кг
    авогадро N A 6.0221412927e23 моль -1
    болтцманн к 1,380648813e-23 Дж · К -1
    фарадей Факс 96485.336521 С · моль -1
    первое излучение с 1 3.7417715317e-16 Вт · м 2
    loschmidt n 0 2.686780524e25 м -3
    газовая константа R 8,314462175 Дж · К -1 · моль -1
    моляр Планка Константа N A · h 3.9717628e-10 Дж · с · моль -1
    моляр Объем В м 2.241396820e-10 м 3 · моль -1
    sackurTetrode -1,164870823
    секунда Излучение с 2 1.438777013e-2 м · К
    Стефан Больцманн σ 5.67037321e-8 Вт · м -2 · К -4
    Вена Рабочий объем б 2.897772126e-3 м · К

    Обратите внимание, что значения loschmidt и molarVolume находятся при T = 273,15 K и p = 101,325 кПа . Значение sackurTetrode составляет T = 1 K и p = 101,325 кПа .

    Принятые значения #
    Имя Символ Значение Блок
    молярная масса M u 1e-3 кг · моль -1
    моляр Масса C12 M ( 12 C) 1,2e-2 кг · моль -1
    гравитация г n 9.80665 м · с -2
    атм атм 101325 Па
    Натуральные единицы #
    Имя Символ Значение Блок
    длина планки л P 1.61619997e-35 м
    planckMass м P 2.1765113e-8 кг
    planckTime т P 5,32e-44 с
    планка Зарядка q P 1.87554595641e-18 С
    планковская температура T P 1.41683385e + 32 К

    Переливание нескольких единиц эритроцитов Js (b +) в присутствии анти-Jsb пациенту с серповидной бета-талассемией и обзор литературы

    Jsb - высокочастотный антиген.Anti-Jsb - редкое аллоантитело, и его клиническое значение плохо документировано. Мы сообщаем о случае, когда у 12-летнего мальчика нигерийского происхождения с серповидной бета-талассемией были обнаружены множественные аллоантитела, включая панагглютинин и острый грудной синдром, что потребовало срочного переливания пяти единиц фенотипоподобных, несовместимых с перекрестным соответствием эритроцитов, четырех из которых были даны во время обменного переливания крови. Позже у пациента были обнаружены анти-Jsb. В дополнение к рутинным серологическим методам исследования эритроцитов и плазмы пациента, анализ моноцитов монослоя (ММА) был проведен на образцах пациента, полученных через 2 и 9 дней после переливания эритроцитов Js (b +), чтобы определить потенциальную клиническую значимость антибиотика. -Jsb.Различные лабораторные параметры, в том числе количественный анализ фракции гемоглобина, использовались для мониторинга увеличения разрушения эритроцитов. ММА-реактивность анти-Jsb пациента увеличилась с 2,3 процента на 2-й день после переливания до строго положительного при 88 процентах и ​​66,5 процентах (с добавлением свежей сыворотки и без нее) через 1 неделю. Реактивность ММА более 5 процентов связана с повышенным разрушением эритроцитов. Клинических или лабораторных доказательств увеличения гемолиза выше исходного уровня не было.Однако о снижении выживаемости эритроцитов свидетельствовало относительно быстрое снижение фракции HbA1 после переливаний. Текущий случай и другие случаи, описанные в литературе, предполагают, что анти-Jsb может иметь ограниченный потенциал вызывать явный гемолиз. Однако у пациентов с основным гематологическим заболеванием даже слегка увеличенное разрушение эритроцитов может вызвать клинические проблемы, поэтому следует избегать переливания эритроцитов Js (b +). В экстренных ситуациях следует уравновесить потенциальные побочные эффекты переливания несовместимых единиц с риском отказа от переливания.Члены семьи, особенно братьев и сестер, должны рассматриваться в качестве потенциальных назначенных доноров для пациентов с антителами, направленными против высокочастотных антигенов. Также рассмотрены имеющиеся в литературе сообщения об анти-Jsb.

    4 способа замены переменных в JavaScript

    Многие алгоритмы требуют замены двух переменных.

    Во время собеседования по кодированию вас могут спросить «Как поменять местами 2 переменные без временной переменной?» .

    Хорошо знать несколько способов замены переменных. В этом посте вы узнаете о 4 способах замены (2 с использованием дополнительной памяти и 2 без нее).

    1. Задание на деструктуризацию

    Назначение деструктуризации (функция ES2015) позволяет извлекать элементы массива в переменные. Например, следующий код разрушает массив:

      лет а;
    пусть б;
    
    [a, b] = [1, 2, 3];
    а;
    б;  

    [a, b] = [1, 2, 3] - это деструктурирующее присвоение, которое разрушает массив [1, 2, 3] . переменной присваивается первый элемент 1 из [1, 2, 3] , соответственно b назначается второму элементу 2 .

    Зная, как деструктурировать массив, легко использовать его для замены переменных. Давайте поменяем местами переменные a и b , используя деструктурирующее присваивание:

      пусть a = 1;
    пусть b = 2;
    
    [а, б] = [б, а];
    а;
    б;  

    [a, b] = [b, a] - это деструктурирующее присвоение, которое меняет местами переменные a и b .

    На первом этапе справа от деструктуризации создается временный массив [b, a] (который оценивается как [2, 1] ).

    Затем происходит деструктуризация временного массива: [a, b] = [2, 1] . Переменной a присваивается 2 , а b - 1 . Произведена замена на и на .

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

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

    2. Временная переменная

    Замена переменных с помощью временной переменной - это классика. Как следует из названия, для этого подхода требуется дополнительная временная переменная.

    Поменяем местами значения переменных a и b , используя временную переменную temp :

      пусть a = 1;
    пусть b = 2;
    пусть темп;
    
    temp = a; a = b; b = temp;
    а;
    б;  

    temp - временная переменная .

    На первом этапе temp присваивается значение a . Затем переменной присваивается значение b . Наконец, переменной b присваивается значение temp (имеющее начальное значение a ).

    Замена переменных с помощью временной переменной работает с любым типом значения, например числами, строками, логическими значениями, объектами.

    Обратной стороной этого подхода является необходимость в специальной временной переменной, плюс замена происходит в 3 операторах.

    3. Сложение и разность

    Вы можете менять местами переменные без использования дополнительной памяти (например, временного массива или переменной).

    В следующем примере переменные a и b меняются местами с использованием арифметических операторов сложения + и разницы - :

      пусть a = 1;
    пусть b = 2;
    
    a = a + b; b = a - b; a = a - b;
    а;
    б;  

    Изначально a равно 1 и b равно 2 .Давайте посмотрим, как 3 оператора выполняют замену:

    1. a = a + b присваивает a значение 1 + 2 .
    2. b = a - b присваивает b значение 1 + 2 - 2 = 1 ( b теперь 1 ).
    3. a = a - b присваивает a значение 1 + 2 - 1 = 2 ( a теперь 2 ).

    Наконец, a равно 2 и b равно 1 .Произведена замена на и на .

    Хотя этот подход не использует временные переменные, он имеет значительные ограничения.

    Во-первых, вы можете менять местами только целые числа. Во-вторых, помните о переполнении чисел при выполнении сложения на первом шаге a = a + b (сумма должна быть меньше Number.MAX_SAFE_INTEGER ).

    4. Побитовый оператор XOR

    Оператор XOR принимает значение «истина», если операнды различны.0 = n ), состоящий из 3-х назначений, позволяет поменять местами значения на и на .

    Обмен переменных с помощью побитового оператора XOR имеет ограничения: вы можете менять местами только целые числа.

    5. Заключение

    JavaScript предлагает множество хороших способов обмена переменными с дополнительной памятью и без нее.

    Первый способ, который я рекомендую для повседневного использования, - это перестановка переменных путем применения деструктурирующего присваивания [a, b] = [b, a] . Это короткий и выразительный подход.

    Второй способ использует временную переменную. Это хорошая альтернатива деструктурирующему подходу к назначению.

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

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

    Какой способ перестановки переменных вы предпочитаете?

    Как сделать простой тест на JavaScript

    «Как мне сделать тест на JavaScript?» - один из наиболее частых вопросов, которые задают люди, изучающие веб-разработку, и не зря.Викторины - это весело! Это отличный способ узнать новые предметы, и они позволяют заинтересовать аудиторию чем-то веселым и игривым.

    Эта популярная статья была обновлена ​​в 2020 году, чтобы отразить текущие передовые практики в JavaScript. Чтобы узнать больше о JavaScript, прочитайте нашу книгу «JavaScript: от новичка до ниндзя», 2-е издание.

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

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

    Что следует знать перед началом работы

    Несколько вещей, которые нужно знать перед началом:

    • Это руководство по интерфейсу, означающее, что любой, кто знает, как просматривать исходный код страницы, может найти ответы.Для серьезных викторин данные должны обрабатываться через серверную часть, что выходит за рамки этого руководства.
    • Код в этой статье использует современный синтаксис JavaScript (ES6 +), что означает, что он не будет совместим с любыми версиями Internet Explorer. Однако он будет отлично работать в современных браузерах, включая Microsoft Edge.
    • Если вам нужна поддержка старых браузеров, я написал учебник по тесту на JavaScript, совместимый с IE8. ВНИМАНИЕ !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! Или, если вы хотите освежить в памяти ES6, посмотрите этот курс Дарина Хенера на SitePoint Premium.
    • Вам потребуется некоторое представление о HTML, CSS и JavaScript, но каждая строка кода будет объяснена индивидуально.

    Основная структура вашей викторины по JavaScript

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

    Чтобы настроить структуру нашей викторины по JavaScript, нам нужно начать со следующего HTML-кода:

    • A
      для проведения викторины
    • A
    • A
      для отображения результатов

    Вот как это будет выглядеть:

      

    Затем мы можем выбрать эти HTML-элементы и сохранить ссылки на них в таких переменных:

      const quizContainer = документ.getElementById ('тест');
    const resultsContainer = document.getElementById ('результаты');
    const submitButton = document.getElementById ('отправить');
      

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

      function buildQuiz () {}
    
    функция showResults () {}
    
    
    buildQuiz ();
    
    
    submitButton.addEventListener («щелчок», showResults);
      

    Здесь у нас есть функции для построения викторины и отображения результатов.Мы немедленно запустим нашу функцию buildQuiz , и наша функция showResults будет запускаться, когда пользователь нажимает кнопку отправки.

    Отображение вопросов викторины

    Следующее, что нужно для нашей викторины, - это показать несколько вопросов. Мы будем использовать объектные литералы для представления отдельных вопросов и массив для хранения всех вопросов, составляющих нашу викторину. Использование массива упростит повторение вопросов:

      const myQuestions = [
      {
        вопрос: «Кто изобрел JavaScript?»,
        ответы: {
          a: "Дуглас Крокфорд",
          b: "Шерил Сэндберг",
          c: "Брендан Эйх"
        },
        правильный ответ: "с"
      },
      {
        вопрос: «Какой из них является менеджером пакетов JavaScript?»,
        ответы: {
          a: "Узел.js ",
          b: "TypeScript",
          c: "npm"
        },
        правильный ответ: "с"
      },
      {
        вопрос: «Какой инструмент можно использовать для обеспечения качества кода?»,
        ответы: {
          a: "Угловой",
          b: "jQuery",
          c: "RequireJS",
          d: "ESLint"
        },
        правильный ответ: "д"
      }
    ];
      

    Не стесняйтесь задавать столько вопросов или ответов, сколько хотите.

    Примечание. Поскольку это массив, вопросы будут отображаться в том порядке, в котором они перечислены. Если вы хотите каким-либо образом отсортировать вопросы, прежде чем представлять их пользователю, ознакомьтесь с нашим быстрым советом по сортировке массива объектов в JavaScript.

    Теперь, когда у нас есть список вопросов, мы можем показать их на странице. Мы рассмотрим следующий код JavaScript строка за строкой, чтобы увидеть, как он работает:

      function buildQuiz () {
      
      константный вывод = [];
    
      
      myQuestions.forEach (
        (currentQuestion, questionNumber) => {
    
          
          const answers = [];
    
          
          for (письмо в currentQuestion.answers) {
    
            
            ответы.push (
              `<метка>
                
                $ {letter}:
                $ {currentQuestion.ответы [письмо]}
               `
            );
          }
    
          
          output.push (
            `
    $ {currentQuestion.question}
    $ {answers.join ('')}
    ` ); } ); quizContainer.innerHTML = output.join (''); ''); }

    Сначала мы создаем переменную output , которая будет содержать весь вывод HTML, включая вопросы и варианты ответов.

    Затем мы можем приступить к созданию HTML-кода для каждого вопроса. Нам нужно будет перебрать каждый вопрос следующим образом:

      моиВопросы.forEach ((currentQuestion, questionNumber) => {
      
    });
      

    Для краткости мы используем функцию стрелки для выполнения операций над каждым вопросом. Поскольку это цикл forEach, мы получаем текущее значение, индекс (номер позиции текущего элемента в массиве) и сам массив в качестве параметров. Нам нужно только текущее значение и индекс, которые для наших целей мы назовем currentQuestion и questionNumber соответственно.

    Теперь давайте посмотрим на код внутри нашего цикла:

     
    const answers = [];
    
    
    for (письмо в currentQuestion.ответы) {
    
      
      ответы.push (
        `<метка>
          
          $ {letter}:
          $ {currentQuestion.answers [письмо]}
         `
      );
    }
    
    
    output.push (
      `
    $ {currentQuestion.question}
    $ {answers.join ('')}
    ` );

    Для каждого вопроса нам нужно сгенерировать правильный HTML, поэтому наш первый шаг - создать массив для хранения списка возможных ответов.

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

    Обратите внимание, что мы используем литералы шаблонов, которые являются строками, но являются более мощными.Мы будем использовать следующие функции:

    • возможность работы с несколькими линиями
    • больше не нужно экранировать кавычки внутри кавычек, потому что литералы шаблонов используют обратные кавычки
    • строковая интерполяция, поэтому вы можете вставлять выражения JavaScript прямо в свои строки, например: $ {code_goes_here} .

    Когда у нас есть список кнопок ответов, мы можем вставить HTML-код вопроса и HTML-код ответа в наш общий список выходных данных.

    Обратите внимание, что мы используем литерал шаблона и некоторые встроенные выражения, чтобы сначала создать div вопроса, а затем создать div ответа.Выражение join берет наш список ответов и объединяет их в одну строку, которую мы можем вывести в наши ответов div.

    Теперь, когда мы сгенерировали HTML-код для каждого вопроса, мы можем объединить его все вместе и показать на странице:

      quizContainer.innerHTML = output.join (''); '');
      

    Теперь наша функция buildQuiz завершена.

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

    Напомним, что это правильная структура:

     
    функция buildQuiz () {...}
    функция showResults () {...}
    
    
    const quizContainer = document.getElementById ('викторина');
    const resultsContainer = document.getElementById ('результаты');
    const submitButton = document.getElementById ('отправить');
    const myQuestions = [...];
    
    
    buildQuiz ();
    
    
    submitButton.addEventListener («щелчок», showResults);
      

    Отображение результатов викторины

    На этом этапе мы хотим построить нашу функцию showResults , чтобы перебирать ответы, проверять их и отображать результаты.

    Вот функция, которую мы подробно рассмотрим дальше:

      function showResults () {
    
      
      const answerContainers = quizContainer.querySelectorAll ('. answers');
    
      
      пусть numCorrect = 0;
    
      
      мои вопросы.forEach ((currentQuestion, questionNumber) => {
    
        
        const answerContainer = answerContainers [questionNumber];
        const selector = `input [имя = вопрос $ {questionNumber}]: проверено`;
        const userAnswer = (answerContainer.querySelector (селектор) || {}). value;
    
        
        if (userAnswer === currentQuestion.correctAnswer) {
          
          numCorrect ++;
    
          
          answerContainers [questionNumber] .style.color = 'светло-зеленый';
        }
        
        еще{
          
          answerContainers [questionNumber] .style.цвет = 'красный';
        }
      });
    
      
      resultsContainer.innerHTML = `$ {numCorrect} из $ {myQuestions.length}`;
    }
      

    Сначала мы выбираем все контейнеры с ответами в HTML-коде нашей викторины. Затем мы создадим переменные, чтобы отслеживать текущий ответ пользователя и общее количество правильных ответов.

     
    const answerContainers = quizContainer.querySelectorAll ('. answers');
    
    
    пусть numCorrect = 0;
      

    Теперь мы можем просмотреть каждый вопрос и проверить ответы.

     
    myQuestions.forEach ((currentQuestion, questionNumber) => {
    
      
      const answerContainer = answerContainers [questionNumber];
      const selector = `input [имя = вопрос $ {questionNumber}]: проверено`;
      const userAnswer = (answerContainer.querySelector (селектор) || {}). value;
    
      
      if (userAnswer === currentQuestion.correctAnswer) {
        
        numCorrect ++;
    
        
        answerContainers [questionNumber] .style.color = 'светло-зеленый';
      }
      
      еще{
        
        answerContainers [questionNumber].style.color = 'красный';
      }
    });
      

    Общая суть этого кода:

    • найти выбранный ответ в HTML
    • обрабатывать, что произойдет, если ответ правильный
    • обрабатывает, что произойдет, если ответ неправильный.

    Давайте более внимательно посмотрим, как мы находим выбранный ответ в нашем HTML:

     
    const answerContainer = answerContainers [questionNumber];
    const selector = `input [имя = вопрос $ {questionNumber}]: проверено`;
    const userAnswer = (answerContainer.querySelector (селектор) || {}).стоимость;
      

    Во-первых, мы проверяем, заглядываем ли внутрь контейнера ответов на текущий вопрос.

    В следующей строке мы определяем селектор CSS, который позволит нам найти, какой переключатель установлен.

    Затем мы используем JavaScript querySelector для поиска нашего CSS-селектора в ранее определенном answerContainer . По сути, это означает, что мы найдем, какой переключатель ответа отмечен.

    Наконец, мы можем получить значение этого ответа, используя .value .

    Работа с неполными данными пользователя

    Но что, если пользователь оставил пустой ответ? В этом случае использование .value вызовет ошибку, потому что вы не можете получить значение того, чего нет. Чтобы решить эту проблему, мы добавили || , что означает «или», и {} , что означает пустой объект. Теперь в общем заявлении говорится:

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

    В результате значение будет либо ответом пользователя, либо undefined , что означает, что пользователь может пропустить вопрос, не прерывая нашу викторину.

    Оценка ответов и отображение результата

    Следующие операторы в нашем цикле проверки ответов позволят нам обрабатывать правильные и неправильные ответы.

     
    if (userAnswer === currentQuestion.correctAnswer) {
      
      numCorrect ++;
    
      
      answerContainers [questionNumber].style.color = 'светло-зеленый';
    }
    
    еще{
      
      answerContainers [questionNumber] .style.color = 'красный';
    }
      

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

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

     
    resultsContainer.innerHTML = `$ {numCorrect} из $ {myQuestions.length} `;
      

    А теперь у нас есть работающая викторина по JavaScript!

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

      (функция () {
      
    }) ();
      

    Теперь все готово! Не стесняйтесь добавлять или удалять вопросы и ответы и оформлять викторину так, как вам нравится.

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

    См. Простой тест на JavaScript (без разбивки на страницы) Pen
    от SitePoint (@SitePoint)
    на CodePen.

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

    Вам понадобится:

    • способ показать и скрыть вопросы
    • кнопок для навигации по викторине.

    Нам нужно будет внести некоторые изменения, поэтому давайте начнем с HTML:

      

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

    Затем внутри функции buildQuiz нам нужно добавить элемент

    с классом , слайд для хранения контейнеров вопросов и ответов, которые мы только что создали:

      output.push (
      
    $ {currentQuestion.question}
    $ {answers.join ("")}
    ` );

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

      .slide {
      позиция: абсолютная;
      слева: 0px;
      верх: 0px;
      ширина: 100%;
      z-индекс: 1;
      непрозрачность: 0;
      переход: непрозрачность 0,5 с;
    }
    .active-slide {
      непрозрачность: 1;
      z-индекс: 2;
    }
    .quiz-container {
      положение: относительное;
      высота: 200 пикселей;
      маржа сверху: 40 пикселей;
    }
      

    Теперь мы добавим немного JavaScript, чтобы нумерация страниц работала.Как и прежде, важен порядок, поэтому это измененная структура нашего кода:

     
    
    
    
    
    
    
    buildQuiz ();
    
    
    
    
    
    showSlide (currentSlide);
    
    
    
      

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

     
    const previousButton = document.getElementById («предыдущий»);
    const nextButton = document.getElementById ("следующий");
    const слайды = документ.querySelectorAll (". слайд");
    пусть currentSlide = 0;
      

    Далее мы напишем функцию для показа слайда. Добавьте это под существующими функциями ( buildQuiz и showResults ):

      function showSlide (n) {
      слайды [currentSlide] .classList.remove ('активный слайд');
      слайды [n] .classList.add ('активный слайд');
      currentSlide = n;
      if (currentSlide === 0) {
        previousButton.style.display = 'нет';
      }
      еще{
        previousButton.style.display = 'встроенный блок';
      }
      если (currentSlide === слайды.length-1) {
        nextButton.style.display = 'нет';
        submitButton.style.display = 'встроенный блок';
      }
      еще{
        nextButton.style.display = 'встроенный блок';
        submitButton.style.display = 'нет';
      }
    }
      

    Вот что делают первые три строки:

    • Скройте текущий слайд, удалив класс active-slide .
    • Покажите новый слайд, добавив класс active-slide .
    • Обновить текущий номер слайда.

    В следующих строках представлена ​​следующая логика:

    • Если мы на первом слайде, скройте кнопку Предыдущий слайд .В противном случае покажите кнопку.
    • Если мы на последнем слайде, скройте кнопку Next Slide и покажите кнопку Submit . В противном случае отобразите кнопку Next Slide и скройте кнопку Submit .

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

    .
     
    ...
    
    showSlide (currentSlide);
      

    Затем мы можем написать функции, чтобы кнопки навигации работали.Они идут под функцией showSlide :

      function showNextSlide () {
      showSlide (currentSlide + 1);
    }
    
    function showPreviousSlide () {
      showSlide (currentSlide - 1);
    }
      

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

    Наконец, нам нужно подключить кнопки навигации к этим функциям. Это находится в конце кода:

     
    ...
    previousButton.addEventListener («щелчок», showPreviousSlide);
    nextButton.addEventListener («щелкнуть», showNextSlide);
      

    Теперь у вашей викторины есть рабочая навигация!

    См. Простой тест на JavaScript Pen
    с разбивкой на страницы по SitePoint (@SitePoint)
    на CodePen.

    Что дальше?

    Теперь, когда у вас есть базовая викторина по JavaScript, пора проявить творческий подход и поэкспериментировать.

    Вот несколько предложений, которые вы можете попробовать:

    • Попробуйте разные способы ответить на правильный или неправильный ответ.
    • Создайте красивый стиль викторины.
    • Добавить индикатор выполнения.
    • Разрешить пользователям просматривать ответы перед отправкой.
    • Дайте пользователям краткое изложение их ответов после того, как они отправят.
    • Обновите навигацию, чтобы пользователи могли переходить к любому вопросу с номером.
    • Создавайте собственные сообщения для каждого уровня результатов. Например, если кто-то набрал 8/10 или выше, назовите его ниндзя викторины.
    • Добавьте кнопку для публикации результатов в социальных сетях.
    • Сохраните свои рекорды с помощью localStorage.
    • Добавьте таймер обратного отсчета, чтобы увидеть, могут ли люди бить время.
    • Примените концепции из этой статьи для других целей, например, для оценки стоимости проекта или викторины на тему «Какой персонаж?».

    JavaScript, который нужно знать для React

    Какие функции JavaScript вам следует знать при изучении и использовании React

    Текущие доступные переводы:

    Одна из вещей, которые мне больше всего нравятся в React по сравнению с другими фреймворками, которые я used - насколько вы открыты для JavaScript, когда используете его.Нет никаких шаблон DSL (JSX компилируется в разумный JavaScript), компонентный API имеет только стало проще с добавлением React Hooks, и фреймворк предлагает очень мало абстракций за пределами основного пользовательского интерфейса. проблемы, которые он призван решить.

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

    Прежде чем мы перейдем к синтаксису, еще кое-что, что действительно полезно Поймите, что для React это понятие функции «закрытие». Есть отличный описание этой концепции здесь: whatthefork.is/closure.

    Хорошо, давайте перейдем к функциям JS, которые вам нужно знать для React.

    Шаблонные литералы

    Шаблонные литералы подобны обычным строкам с суперсилами:

     

    1const welcome = 'Hello'

    2const subject = 'World'

    3console.log (`$ {приветствие} $ {subject}!`)

    4

    5

    6console.log (приветствие + '' + subject + '!')

    7

    8

    9function Box ({className , ... props}) {

    10 return

    11}

    MDN: шаблонные литералы

    Сокращенные имена свойств

    Это настолько распространено и полезно, что я делаю это, даже не задумываясь.

     

    1const a = 'hello'

    2const b = 42

    3const c = {d: [true, false]}

    4console.log ({a, b, c})

    5

    6

    7console.log ({a: a, b: b, c: c})

    8

    9

    10function Counter ({initialCount, step}) {

    11 const [count, setCount] = useCounter ({initialCount, step})

    12 return

    13}

    MDN: Инициализатор объекта Новые обозначения в ECMAScript 2015

    Стрелочные функции

    Стрелочные функции - это еще один способ написания функций в JavaScript, но они делают имеют несколько семантических отличий.К счастью для нас в React Land, нам не нужно беспокоиться о , о так же сильно, если мы используем хуки в нашем проекте (а не классы), но стрелочная функция позволяет использовать более короткие анонимные функции и неявный возврат, поэтому вы увидите и захотите много использовать стрелочные функции.

     

    1const getFive = () => 5

    2const addFive = a => a + 5

    3const div = (a, b) => a / b

    4

    5

    6function getFive () {

    7 возврат 5

    8}

    9 функция addFive (a) {

    10 возврат a + 5

    11}

    12 функция деления (a, b) {

    13 возврат a / b

    14}

    15

    16

    17function TeddyBearList ({teddyBears}) {

    18 возврат (

    19

      20 {teddyBears.map (teddyBear => (

      21

    • 22 {teddyBear.name}

      23

    • 24))}

      25

    26)

    27}

    Одна вещь, которую следует отметить в приведенном выше примере, - это открытие и закрытие круглые скобки (. Это распространенный способ использования функции стрелки возможность неявного возврата при работе с JSX.

    MDN: стрелочные функции

    Деструктуризация

    Деструктуризация, наверное, моя любимая функция JavaScript.Я разрушаю объекты и массивы все время (и если вы используете useState , вы, вероятно, тоже вот так). Мне нравится как декларативно.

     

    1

    2

    3

    4function makeCalculation ({x, y: d, z = 4}) {

    5 return Math.floor ((x + d + z) / 3)

    6}

    7

    8

    9 function makeCalculation (obj) {

    10 const {x, y: d, z = 4} = obj

    11 return Math.floor ((x + d + z) / 3)

    12}

    13

    14

    15функция makeCalculation (obj) {

    16 const x = obj.x

    17 const d = obj.y

    18 const z = obj.z === undefined? 4: obj.z

    19 return Math.floor ((x + d + z) / 3)

    20}

    21

    22

    23 function UserGitHubImg ({username = 'ghost', ... props} ) {

    24 return

    25}

    MDN: Destructuring assignment

    Обязательно прочтите эту статью MDN. Вы обязательно узнаете что-то новое.Когда все готово, попробуйте реорганизовать это, чтобы использовать одну строку деструктуризации:

     

    1function nestedArrayAndObject () {

    2

    3 const info = {

    4 title: 'Once Upon a Time',

    5 главных героев: {

    6 имя: «Эмма Свон»,

    7 врагов: [

    8 {имя: «Реджина Миллс», титул: «Злая королева»},

    9 {имя: «Кора Миллс», title: 'Королева червей'},

    10 {имя: 'Питер Пэн', титул: 'Мальчик, который не вырастет'},

    11 {имя: 'Зелина', титул: 'Злая ведьма '},

    12],

    13},

    14}

    15

    16 const title = info.title

    17 const protagonistName = info.protagonist.name

    18 const враги = info.protagonist.enemies [3]

    19 const врагиTitle = враги.title

    20 const врагиName = враги

    21 return `$ {ownName} ($ {enemyTitle}) - враг $ {protagonistName} в "$ {title}" `

    22}

    Параметры по умолчанию

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

     

    1

    2

    3 function add (a, b = 0) {

    4 return a + b

    5}

    6

    7

    8const add = (a, b = 0) => a + b

    9

    10

    11 функция add (a, b) {

    12 b = b === undefined? 0: b

    13 return a + b

    14}

    15

    16

    17function useLocalStorageState ({

    18 key,

    19 initialValue,

    20 serialize = vrial => v,

    = v => v,

    22}) {

    23 const [состояние, setState] = React.useState (

    24 () => deserialize (window.localStorage.getItem (key)) || initialValue,

    25)

    26

    27 const serializedState = serialize (state)

    28 React.useEffect (() => {

    29 window.localStorage.setItem (key, serializedState)

    30}, [key, serializedState])

    31

    32 return [state, setState]

    33}

    MDN: параметры по умолчанию

    Остаток / разворот

    ... Синтаксис можно рассматривать как своего рода синтаксис "коллекции", в котором оперирует набором ценностей. Я использую его постоянно и настоятельно рекомендую вы узнаете, как и где его можно использовать. На самом деле нужны разные значения в разных контекстах, поэтому изучение нюансов поможет вам.

     

    1const arr = [5, 6, 8, 4, 9]

    2Math.max (... arr)

    3

    4Math.max.apply (null, arr)

    5

    6const obj1 = {

    7 a: 'a from obj1',

    8 b: 'b from obj1',

    9 c: 'c from obj1',

    10 d: {

    11 e: 'e from obj1 ',

    12 f:' f from obj1 ',

    13},

    14}

    15const obj2 = {

    16 b:' b from obj2 ',

    17 c:' c from obj2 ',

    18 d: {

    19 g: 'g from obj2',

    20 h: 'g from obj2',

    21},

    22}

    23console.log ({... obj1, ... obj2})

    24

    25console.log (Object.assign ({}, obj1, obj2))

    26

    27 function add (first, ... rest) {

    28 return rest.reduce ((sum, next) => sum + next, first)

    29}

    30

    31function add () {

    32 const first = arguments [0]

    33 const rest = Array.from (arguments) .slice (1)

    34 return rest.reduce ((sum, next) => sum + next, first)

    35}

    36

    37

    38function Box ({ className,...restOfTheProps}) {

    39 const defaultProps = {

    40 className: `box $ {className}`,

    41 дочерний элемент: 'Empty box',

    42}

    43 return

    44}

    MDN: синтаксис распространения

    MDN: параметры отдыха

    ESModules

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

     

    1export default function add (a, b) {

    2 return a + b

    3}

    4

    5

    6

    7

    8

    9

    10export const foo = 'bar '

    11

    12

    13

    14

    15

    16

    17export function subtract (a, b) {

    18 return a - b

    19}

    20

    const now = 21export новый Дата ()

    22

    23

    24

    25

    26

    27

    28

    29

    30import ('./ some-module '). then (

    31 allModuleExports => {

    32

    33

    34

    35

    36},

    37 error => {

    38

    39

    40} ,

    41)

    42

    43

    44import React, {Suspense, Fragment} из 'react'

    45

    46

    47const BigComponent = React.lazy (() => import ('./ big -component '))

    48

    MDN: import

    MDN: export

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

    Тернары

    Я люблю троичные.Они красиво декларативны. Особенно в JSX.

     

    1const message = bottle.fullOfSoda

    2? «В бутылке есть газировка!»

    3: 'В бутылке может не быть газировки :-('

    4

    5

    6let message

    7if (bottle.fullOfSoda) {

    8 message = 'В бутылке есть газировка!'

    9} else {

    10 message = 'В бутылке может не быть газировки :-('

    11}

    12

    13

    14function TeddyBearList ({teddyBears}) {

    15 return (

    16

    17 {teddyBears.length? (

    18

      19 {teddyBears.map (teddyBear => (

      20

    • 21 {teddyBear.name}

      22)

    • 23))}

      24

    25): (

    26

    Нет плюшевых мишек. Печаль.

    27)}

    28

    29)

    30}

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

    MDN: Условный (тернарный) оператор

    Методы массива

    Массивы - это фантастика, и я постоянно использую методы массивов! Я, наверное, использую следующие методы наиболее часто:

    • найти
    • некоторые
    • каждые
    • включает
    • карту
    • фильтр
    • уменьшить

    Вот несколько примеров:

     

    1const dogs = [

    2 {

    2 {

    2 {

    2 {

    2 {

    2 {

    2 {

    id: 'dog-1',

    4 имя: 'Poodle',

    5 темперамент: [

    6 'Intelligent',

    7 'Active',

    8 'Alert',

    9 'Faithful' ,

    10 'Дрессируемый',

    11 'Инстинктивный',

    12],

    13},

    14 {

    15 id: 'dog-2',

    16 имя: 'Бернский зенненхунд' ,

    17 темперамент: [«Ласковый», «Умный», «Верный», «Верный»],

    18},

    19 {

    20 id: 'dog-3',

    21 name: ' Лабрадор ретривер ',

    22 темперамент: [

    23' Intelligent ',

    24 «Even Tempered»,

    25 «Kind»,

    26 «Agile»,

    27 «Outgoing»,

    28 «Trusting»,

    29 «Gentle»,

    30],

    31} ,

    32]

    33

    34соб.find (dog => dog.name === 'Бернский зенненхунд')

    35

    36

    37dogs.some (dog => dog.temperament.includes ('Aggressive'))

    38

    39

    40dogs.some (dog => dog.temperament.includes ('Trusting'))

    41

    42

    43dogs.every (dog => dog.temperament.includes ('Trusting'))

    44

    45

    46 собак. Каждая (dog => dog.temperament.includes ('Intelligent'))

    47

    48

    49 собак.map (dog => dog.name)

    50

    51

    52dogs.filter (dog => dog.temperament.includes ('Faithful'))

    53

    54

    55dogs.reduce ((allTemperaments, dog) => {

    56 return [... allTemperaments, ... dog.temperament]

    57}, [])

    58

    59

    60

    61function RepositoryList ({repositories, owner}) {

    62 возврат (

    63

      64 {хранилища

      65.фильтр (repo => repo.owner === owner)

      66 .map (repo => (

      67

    • {repo.name}
    • 68)) }

      69

    70)

    71}

    MDN: Массив

    Оператор слияния с нулевым значением

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

     

    1

    2x = x || 'some default'

    3

    4

    5

    6

    7add (null, 3)

    8

    9

    10 function add (a, b) {

    11 a = a == null? 0: a

    12 b = b == null? 0: b

    13 return a + b

    14}

    15

    16

    17 function add (a, b) {

    18 a = a ?? 0

    19 b = b ?? 0

    20 возврат a + b

    21}

    22

    23

    24 function DisplayContactName ({contact}) {

    25 return

    {contact.название ?? 'Неизвестно'}

    26}

    MDN: Нулевой оператор объединения

    Необязательное связывание

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

     

    1

    2const streetName = user && user.address && user.address.street.name

    3

    4

    5const streetName = user ?.адрес? .street? .name

    6

    7

    8

    9

    10

    11const onSuccess = options? .onSuccess

    12

    13

    14onSuccess?. ({data} )

    15

    16

    17options? .OnSuccess?. ({Data: 'yay'})

    18

    19

    20

    21

    22options? .OnSuccess ({data: 'yay'} )

    23

    24

    25функция UserProfile ({user}) {

    26 return (

    27

    28

    {user.name}

    29 {user.bio?.slice(0, 50)} ...

    30

    31)

    32}

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

    MDN: необязательное связывание

    Promises и async / await

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

    Promises помогают управлять асинхронным кодом и возвращаются из многих DOM API. а также сторонние библиотеки. Синтаксис async / await - это специальный синтаксис для работа с обещаниями. Эти двое идут рука об руку.

     

    1function promises () {

    2 const SuccessPromise = timeout (100).then (result => `success: $ {result}`)

    3

    4 const failingPromise = timeout (200, true) .then (null, error =>

    5 Promise.reject (`failure: $ {error } `),

    6)

    7

    8 const recoveredPromise = timeout (300, true) .then (null, error =>

    9 Promise.resolve (` отказал и восстановлен: $ {error} `),

    10)

    11

    12 successPromise.then (log, logError)

    13 failingPromise.then (log, logError)

    14 recoveredPromise.then (log, logError)

    15}

    16

    17function asyncAwaits () {

    18 async function successAsyncAwait () {

    19 const result = await timeout (100)

    20 return `success: $ {result } `

    21}

    22

    23 async function failedAsyncAwait () {

    24 const result = await timeout (200, true)

    25 return` failed: $ {result} `

    26}

    27

    28 async function recoveredAsyncAwait () {

    29 let result

    30 try {

    31 result = await timeout (300, true)

    32 return `failed: $ {result}`

    33} catch (ошибка ) {

    34 return `не удалось и восстановить: $ {error}`

    35}

    36}

    37

    38 successAsyncAwait ().then (log, logError)

    39 failedAsyncAwait (). then (log, logError)

    40 recoveredAsyncAwait (). then (log, logError)

    41}

    42

    43function log (... args) {

    44 console.log (... args)

    45}

    46

    47function logError (... args) {

    48 console.error (... args)

    49}

    50

    51

    52 Тайм-аут функции (duration = 0, shouldReject = false) {

    53 return new Promise ((resolve, reject) => {

    54 setTimeout (() => {

    55 if (shouldReject) {

    )

    56 отклонить (`отклонено через $ {duration} мс`)

    57} else {

    58 разрешить (` разрешено после $ {duration} мс`)

    59}

    60}, duration)

    61} )

    62}

    63

    64

    65function GetGreetingForSubject ({subject}) {

    66 const [isLoading, setIsLoa ding] = Реагировать.useState (false)

    67 const [error, setError] = React.useState (null)

    68 const [приветствие, setGreeting] = React.useState (null)

    69

    70 React.useEffect (() => {

    71 асинхронная функция fetchGreeting () {

    72 try {

    73 const response = await window.fetch ('https://example.com/api/greeting')

    74 const data = await response.json ()

    75 setGreeting (data.greeting)

    76} catch (ошибка) {

    77 setError (ошибка)

    78} finally {

    79 setIsLoading (false)

    80}

    81}

    82 setIsLoading (true)

    83 fetchGreeting ()

    84}, [])

    85

    86 return isLoading? (

    87 'загрузка... '

    88): ошибка? (

    89 «ОШИБКА!»

    90): приветствие? (

    91

    92 {приветствие} {subject}

    93

    94): null

    95}

    MDN: Promise

    MDN: асинхронная функция

    MDN: await

    Заключение

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

    Если вы хотите подробнее изучить любой из этих вопросов, у меня есть мастерская по JavaScript. которые я передал и записал, когда работал в PayPal, вы можете найти полезный: ES6 and Beyond Workshop в PayPal

    Удачи!

    Канонизировать библиотеки JavaScript

    Конфигурация

    Фильтр «Канонизировать библиотеки JavaScript» можно включить, указав:

    Apache:
     ModPagespeedEnableFilters canonicalize_javascript_libraries 
    Nginx:
    Pagespeed EnableFilters canonicalize_javascript_libraries;
    
     

    в файле конфигурации.

    Описание

    Этот фильтр определяет популярные библиотеки JavaScript, которые можно заменить на те, которые размещаются бесплатно в службе хостинга библиотек JavaScript - по умолчанию Библиотеки, размещенные в Google. В этом есть несколько преимущества:

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

    В Apache набор библиотек по умолчанию можно найти в библиотеки pagespeed_libraries.conf файл, который загружается вместе с pagespeed.conf при запуске Apache вверх. Он содержит подписи для всех размещенных на Google Библиотеки. В Nginx вам нужно конвертировать pagespeed_libraries.conf из Apache-формата в Nginx формат:

    $ scripts / pagespeed_libraries_generator.sh> ~ / pagespeed_libraries.conf
    $ sudo mv ~ / pagespeed_libraries.conf / путь / к / nginx / configuration_files /
     

    Вам также необходимо включить его в конфигурацию Nginx по ссылке:

    включить pagespeed_libraries.conf;
     

    Не редактируйте pagespeed_libraries.conf . Локальные правки удержат вас от возможности обновить его при обновлении PageSpeed. Вместо того, чтобы редактировать это вам следует добавить дополнительные библиотеки в ваш основной файл конфигурации:

    Apache:
    ModPagespeedLibrary 43 1o978_K0_LNE5_ystNklf \
       //www.modpagespeed.com/rewrite_javascript.js 
    Nginx:
    Pagespeed Library 43 1o978_K0_LNE5_ystNklf
       //www.modpagespeed.com / rewrite_javascript.js; 

    Общий формат этих записей:

    Apache:
     ModPagespeedLibrary байт MD5 canonical_url 
    Nginx:
     pagespeed Библиотека байтов MD5 canonical_url; 

    Здесь байт - размер библиотеки в байтах после минификация с помощью PageSpeed, а MD5 - это хеш MD5 библиотека после минификации. Контроль минификации для различий в пробелах это может произойти, если один и тот же сценарий получен из разных источники. canonical_url - это URL-адрес службы хостинга, используемый для заменить вхождения скрипта. Обратите внимание, что канонический URL в приведенном выше пример зависит от протокола; это означает, что данные будут извлечены с использованием того же протокол ( http или https ) как содержащий страница. Поскольку старые браузеры не могут надежно обрабатывать URL-адреса, относящиеся к протоколу, PageSpeed ​​преобразует относительный к протоколу URL-адрес библиотеки в абсолютный URL-адрес на основе в протоколе содержащей страницы. Не используйте http canonical URL-адреса в конфигурациях, которые могут обслуживать контент через https или переписанные страницы сделают ваш сайт уязвимым для атак и вызовут смешанное содержание предупреждение в браузере.Точно так же избегайте использования https URL, если только вы знаете, что результирующая библиотека в конечном итоге будет извлечена из безопасного страницу, так как согласование SSL добавляет накладные расходы к начальному запросу.

    Дополнительные метаданные конфигурации библиотеки могут быть сгенерированы с помощью утилита pagespeed_js_minify , установленная вместе с PageSpeed. Чтобы использовать эту утилиту, вам понадобится локальная копия кода JavaScript, который вы хочу заменить. Если он хранится в library.js , вы можете сгенерировать байтов и MD5 следующим образом:

    Apache:
     $ pagespeed_js_minify --print_size_and_hash library.js 
    Nginx:
     $ cd / путь / к / psol / lib / Release / linux / ia32 /
          $ pagespeed_js_minify --print_size_and_hash library.js 

    Если вы используете новый javascript minifier, добавьте --use_experimental_minifier аргумент pagespeed_js_minify . Если вы используете старый минификатор, добавить --nouse_experimental_minifier . (По состоянию на 1.10.33.0, --use_experimental_minifier по умолчанию. Ранее, --nouse_experimental_minifier был.) По умолчанию pagespeed_libraries.conf включает хеши для обоих старые и новые минификаторы.

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

    Операция

    Чтобы идентифицировать библиотеку и канонизировать ее URL, PageSpeed ​​должен иметь Конечно, у вас будет возможность получить код JavaScript из URL-адреса исходной страницы. Поскольку канонизация библиотек определяет библиотеки исключительно по их размеру и хэш-подпись, нет необходимости авторизовать PageSpeed ​​для получения контента из домена, на котором размещен сам канонический контент.Это означает, что это безопасно использовать этот фильтр за обратным прокси или в других ситуациях, когда доступ к сети с помощью PageSpeed ​​намеренно ограничен. Посещение браузеров сайт будет получать контент с канонического URL, но сам PageSpeed в этом нет необходимости.

    Примеры

    Вы можете увидеть фильтр в действии на www.modpagespeed.com на этом пример.

    Если документ HTML выглядит так:

    
          
      
      ...
      
    
     

    Затем, предполагая, что jquery_1_8.js был неминифицированной копией jquery библиотека и a.js и b.js содержали специфичный для сайта код с использованием jquery, страница будет переписана следующим образом:

    
          
      
      ...
      
    
     

    URL-адрес библиотеки заменен ссылкой на канонический миниатюрный версия размещена на ajax.googleapis.com . Обратите внимание, что канонический библиотеки не участвуют в большинстве других оптимизаций JavaScript. Для Например, если также включен Combine JavaScript, приведенная выше страница будет переписана следующим образом:

    
         
      
      ...
      
    
     

    Каноническая библиотека - это , а не в сочетании с двумя другими JavaScript. файлы, так как это приведет к потере пропускной способности и преимуществ кеширования при их извлечении. с канонического URL.

    Если defer_javascript включен, библиотеки и это , а не с тегами data-pagespeed-no-defer , каноническая библиотека отложена.

    Требования

    Только полные немодифицированные библиотеки, на которые ссылается

    Вы думаете о членстве Би Джея? Возможно, друг или любимый человек хотел бы получить членство в подарок?

    Прямо сейчас вы можете получить скидку на членство BJ онлайн здесь (обычно 55 долларов) всего за 25 долларов!

    Только для новых участников. Это всего 2 доллара в месяц для членства Би Джея.

    Как получить членство в ближайшем окружении BJ на 25 долларов:

    Спешите! Количество ограничено, и эти предложения, как правило, разыгрываются быстро. Подпишитесь на членство BJ’s Inner Circle всего за 25 долларов! Обычная цена 55 долларов.

    1. Зайдите на BJs.com по нашей ссылке.
    2. Создайте учетную запись, используя свой адрес электронной почты.
    3. Подтвердите, что вам исполнилось 18 лет.
    4. Добавьте бесплатную вторую карту для любого члена семьи (и добавьте до трех дополнительных членов по 30 долларов каждый).
    5. Введите свой адрес и номер телефона. Затем нажмите «Продолжить».
    6. Введите свои платежные данные.
    7. Принесите действительное удостоверение личности с фотографией на стойку обслуживания участников в клубе, чтобы забрать свою новую членскую карту.

    Сделка может закончиться в любой момент.

    Скидки BJ на газ Deep Gas Газовые акции

    BJ - одни из лучших! Вы можете получить скидку 10 центов на галлон бензина за каждый товар, который вы покупаете в рамках акции этого месяца!

    BJ’s теперь предлагает пикап у обочины!

    Это простой способ делать покупки в Интернете, вырезая купоны и забирая их на парковке.Вы по-прежнему можете пойти в магазин для самовывоза, если вам нужно передать купоны производителя.

    Не забудьте проверить нашу ссылку здесь, чтобы ознакомиться со всеми последними стеками купонов на BJs!

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

    И проверьте, как эти ПЯТЬ пунктов оплачивают членство в нашем BJ и больше каждый год.

    Предложение в 25 долларов недействительно в Детройте.

    Если вы недовольны своим членством, BJ’s вернет вам 100% компенсацию.

    Узнайте, как найти предложения по минетам без купонов ниже.


    * Помните, что BJ’s - единственный складской клуб, где разрешено использование купонов с купонами магазина BJ. Здесь мы ежемесячно перечисляли все сделки.

    Вот что включает в себя ваше членство со скидкой:
    • Скидка 25% на цены в продуктовых магазинах - Мы ежедневно опережаем цены в супермаркетах на национальные бренды, поэтому вы можете запасаться дешевле.
    • Поддержка купонов - Мы единственный клуб, который принимает купоны всех производителей. Кроме того, участники получают книги с купонами, чтобы сэкономить больше.
    • Fresh Choices - Вкусный ассортимент продуктов, мяса, деликатесов и хлебобулочных изделий включает в себя все, что вам нужно для еженедельных покупок.
    • Большая экономия газа - BJ’s Gas ® предлагает сверхнизкие цены на газ каждый день. Бонусы My BJ ® MasterCard 1 ® Участники экономят дополнительно 10 центов на галлон.
    • Неожиданные находки - Мы продаем Apple ® , Beats, Cuisinart, Samsung и другие ведущие бренды с исключительной экономией.
    • Эксклюзивные клубные бренды - Экономьте на наших высококачественных брендах Wellsley Farms ® и Berkley Jensen ® , которые предлагают еще большую ценность.
    • Гарантия членства - Если вы не удовлетворены, мы вернем вам членский взнос.

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *