Хитрый JavaScript

2021 Подготовка к интервью с разработчиком переднего плана (JS часть 1)

Основы

«использовать строгую» директиву

• Должен быть помещен в начало файла сценария.
• Цель: явно включить режим современного кода (ES5, ES6).
• Если файл js заполнен модулями и классами импорта, то нет необходимости добавлять “use strict” , он добавляется автоматически.

Тип данных

• JS — это язык с динамической типизацией.

let message = “hello”;
message = 123456; // no error

• Тип число представляет как целые числа, так и числа с плавающей запятой.

let n = 123;
n = 12.345; // no error

тип number не может представлять целочисленные значения больше (2^53 — 1) (то есть 9007199254740991) или меньше -(2^53 — 1) для отрицательных чисел.

В этом случае мы можем использовать тип BigInt для представления целых чисел произвольной длины. Значение BigInt создается путем добавления n в конец целого числа (сейчас BigInt поддерживается в Firefox/Chrome/Edge/Safari, но не в IE).

// the "n" at the end means it's a BigInt
const bigInt = 1234567890123456789012345678901234567890n;

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

• Ключевое слово typeof позволяет нам увидеть, какой тип хранится в переменной.

typeof может использоваться как оператор typeof “foo”или как функция typeof(true). Две формы: typeof x или typeof(x).

Возвращает строку с названием типа, например "string".

Для null возвращает "object" — это ошибка языка, это не объект.

typeof undefined // "undefined"  
typeof 0 // "number"  
typeof 10n // "bigint"
typeof Symbol("id") // "symbol"  
typeof Math // "object"
// officially recognized error in typeof behavior, coming from the early days of JavaScript and kept for compatibility
typeof null // "object"
typeof alert // "function"

Взаимодействие (предупреждение, подсказка, подтверждение)

• функция оповещения.
• функция подсказки. Функция prompt принимает два аргумента:

result = prompt(title, [default]); // [] means the param is optional

Он показывает модальное окно с текстовым сообщением, полем ввода для посетителя и кнопками ОК/Отмена.

titleТекст для отображения посетителю.defaultНеобязательный второй параметр, начальное значение для поля ввода.

Посетитель может ввести что-то в поле ввода подсказки и нажать OK. Затем мы получаем этот текст в файле result. Или они могут отменить ввод, нажав Cancel или нажав клавишу Esc, тогда мы получим null как result.

Вызов prompt возвращает текст из поля ввода или null, если ввод был отменен.

let age = prompt('How old are you?', 100);
alert(`You are ${age} years old!`); // You are 100 years old!

• функция подтверждения:

let isBoss = confirm("Are you the boss?");  
alert( isBoss ); // true if OK is pressed

Преобразование типа

• Числовое преобразование

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

Например, когда деление / применяется к не числам:

alert( "6" / "2" ); // 3, strings are converted to numbers

Правила числового преобразования:

undefined — — > NaN NOT 0!!!
null — — > 0
true or false — — > 1 or 0
string — — > whitespaces from the start and end are removed, If the remaining string is empty, the result is 0. Otherwise, the number is “read” from the string. An error gives NaN.
alert( Number("   123   ") ); // 123
alert( Number("123z") );      // NaN (error reading a number at "z") alert( Number(true) );        // 1
alert( Number(false) );       // 0

Правила логического преобразования:

0, null, undefined, NaN, "" — — — -> false
any other value — — —> true
Note a non-empty string is always true.
alert( Boolean("0") ); // true
alert( Boolean(" ") ); // spaces, also true (any non-empty string is true)

Операторы

• Оператор возведения в степень

Оператор возведения в степень a ** b умножает a сам на себя b раз. Математически возведение в степень определено и для нецелых чисел. Например, квадратный корень — это возведение в степень на 1/2:

alert( 2 ** 4 ); // 16 (2 * 2 * 2 * 2, 4 times)
alert( 8 ** (1/3) ); // 2 (power of 1/3 is the same as a cubic root)

• Конкатенация строк с помощью двоичного +

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

alert( '1' + 2 ); // "12"
alert( 2 + '1' ); // "21"
alert(2 + 2 + '1' ); // "41" and not "221"
alert('1' + 2 + 2); // "122" and not "14"

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

alert( 6 - '2' ); // 4, converts '2' to a number 
alert( '6' / '2' ); // 3, converts both operands to numbers

• Числовое преобразование с унарным +

Унарный оператор плюс +, примененный к одному значению, ничего не делает с числами. Но если операнд не является числом, унарный плюс преобразует его в число.

// No effect on numbers 
let x = 1; 
alert( +x ); // 1  
let y = -2; 
alert( +y ); // -2  
// Converts non-numbers 
alert( +true ); // 1 
alert( +"" );   // 0

На самом деле он делает то же самое, что и Number(someValue), но короче.

Необходимость преобразовать строки в числа возникает очень часто. Например, если мы получаем значения из полей формы HTML, они обычно представляют собой строки. Что, если мы хотим суммировать их?

Двоичный плюс добавит их как строки:

let apples = "2";
let oranges = "3";
alert( apples + oranges ); // "23", the binary plus concatenates strings

Если мы хотим рассматривать их как числа, нам нужно преобразовать их, а затем просуммировать:

let apples = "2";
let oranges = "3";
// both values converted to numbers before the binary plus
alert( +apples + +oranges ); // 5
// the longer variant
// alert( Number(apples) + Number(oranges) ); // 5

сначала применяются унарные плюсы, они преобразуют строки в числа, а затем бинарные плюсы их суммируют.

• Приоритет оператора

• Увеличение/уменьшение ++/--

Его можно применять только к переменным. Попытка использовать его для такого значения, как 5++, приведет к ошибке.

Операторы ++/-- можно использовать и внутри выражений. Их приоритет выше, чем у большинства других арифметических операций.

let counter = 1; 
alert( 2 * ++counter ); // 4

• Запятая

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

let a = (1 + 2, 3 + 4);
alert( a ); // 7 (the result of 3 + 4)

Здесь вычисляется первое выражение 1 + 2, и его результат отбрасывается. Затем оценивается 3 + 4 и возвращается как результат.

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

Без них: a = 1 + 2, 3 + 4 сначала вычисляет +, суммируя числа в a = 3, 7, затем оператор присваивания = присваивает a = 3, а остальное игнорируется. Это как (a = 1 + 2), 3 + 4.

Сравнения

• Сравнение строк

Чтобы увидеть, больше ли строка, чем другая, JavaScript использует так называемый «словарный» или «лексикографический» порядок. Другими словами, строки сравниваются побуквенно.

alert( 'Z' > 'A' ); // true
alert( 'Glow' > 'Glee' ); // true 
alert( 'Bee' > 'Be' ); // true

• Сравнение разных типов

При сравнении значений разных типов JavaScript преобразует значения в числа.

alert( '2' > 1 ); // true, string '2' becomes a number 2 
alert( '01' == 1 ); // true, string '01' becomes a number 1

Возможно, что одновременно:

• Два значения равны.
• Один из них — true как логическое значение, а другой — false как логическое значение.

Например:

let a = 0;
alert( Boolean(a) ); // false
let b = "0";
alert( Boolean(b) ); // true
alert(a == b); // true!

• Сравнение с null и undefined

Для нестрогой проверки ==

Есть особое правило. Эти двое — «сладкая парочка»: они равны друг другу (по сравнению с ==), но не какой-либо другой величине.

alert( null == undefined ); // true

Для математики и других сравнений < > <= >=

null/undefined преобразуются в числа: null становится 0, а undefined становится NaN.

Сравните null с нулем:

alert( null > 0 );  // false
alert( null == 0 ); // false
alert( null >= 0 ); // true

Значение undefined не следует сравнивать с другими значениями, оно всегда возвращает false, за исключением сравнения с нулем.

alert( undefined > 0 ); // false
alert( undefined < 0 ); // false because undefined gets converted to NaN and NaN is a special numeric value which returns false for all comparisons.
alert( undefined == 0 ); // false because undefined only equals null

"Резюме"

• В JavaScript существует 8 основных типов данных.

number для чисел любого типа: целых или с плавающей запятой, целые числа ограничены ±(2^53 — 1).

bigint для целых чисел произвольной длины.

string для строк. Строка может содержать ноль или более символов, отдельного односимвольного типа не существует.

boolean для true/false.

null для неизвестных значений.

undefined для неназначенных значений.

object для более сложных структур данных.

symbol для уникальных идентификаторов.

• promptпоказывает сообщение с просьбой ввести текст. Он возвращает текст или, если нажата кнопка «Отмена» или Esc, null.
• confirmпоказывает сообщение и ждет, пока пользователь нажмет «ОК» или «Отмена». Он возвращает true для OK и false Cancel/Esc.
• Numeric Conversion — возникает при выполнении математических операций. Может выполняться с помощью Number(value). Преобразование происходит по правилам:

undefined — — > NaN NOT 0!!!
null — — > 0
true or false — — > 1 or 0
string — — > whitespaces from the start and end are removed, If the remaining string is empty, the result is 0. Otherwise, the number is “read” from the string. An error gives NaN.

• Boolean Conversion — встречается в логических операциях. Может выполняться с помощью Boolean(value). Соблюдает правила:

0, null, undefined, NaN, "" — — — -> false
any other value — — —> true
Note a non-empty string is always true.

• Хитрые части преобразования типов:

Number(undefined) равно NaN , а не 0,, что отличается от Number(null) → 0.

Boolean("0") = true и строки, содержащие только пробелы, такие как Boolean(" ") = true, являются истинными как логические значения.

Number(undefined); // NaN
Number(null); // 0
Boolean(" "); // true (any non-empty string is true)

• Хитрое знание операторов:

1. Вычитание - (как и большинство математических операций) работает только с числами, оно преобразует пустую строку "" в 0. Вычитание всегда преобразует числа.
2. null становится 0 после числового преобразования.
3. undefined становится NaN после числового преобразования.
4. Пробелы обрезаются в начале и в конце строки, когда строка преобразуется в число. Здесь вся строка состоит из пробелов, таких как \t, \n, и "обычного" пробела между ними. Таким образом, аналогично пустой строке, она становится 0.

"" + 1 + 0 = "10"
"" - 1 + 0 = -1
null + 1 = 1
undefined + 1 = NaN
" \t \n" - 2 = -2

• Сравнения

Строки сравниваются побуквенно в "словарном" порядке.

При сравнении значений разных типов они преобразовываются в числа (за исключением строгой проверки на равенство).

Значения null и undefined равны == друг другу и не равны никакому другому значению.

Будьте осторожны при использовании сравнений, таких как > или <, с переменными, которые иногда могут быть null/undefined. Проверка null/undefined отдельно — хорошая идея.

подлежит уточнению

Объекты

уточняется

Источник: