Эта статья будет посвящена ситуациям из JavaScript, которые ведут себя странно.
Мы рассмотрим несколько примеров с неожиданным результатом и постараемся понять — что же там происходит!
[‘2′,’5′,’9’].map(parseInt)
Рассмотрим первый пример:
Такой результат мы ожидаем:
Вот что мы получаем на самом деле:
На первый взгляд это может показаться странным, но у этого есть простое объяснение: достаточно разобраться как работают две задействованные функции map & parseInt.
map()
map() вызывает callback функцию для каждого элемента массива. Теперь callback функция получит некоторые конкретные параметры, давайте рассмотрим их:
Как видно, функция обратного вызова передавала не только значение элемента массива, но так же его индекс и полную копию массива для каждой итерации и это и повлияло на наш неожиданный результат — каким образом? Давайте рассмотрим детальнее функцию parseInt()
parseInt()
parseInt() преобразует стоковый аргумент и возвращает целое число в соответствии с указанным основанием системы счисления.
Итак parseInt(string, [, radix]) ожидает два параметра: строка, которую мы хотим преобразовать в целое число и основание системы счисления.
Что же произошло?
Теперь мы знаем подробнее о используемых функциях map() & parseInt(), предлагаю шаг за шагом разобраться — что же произошло в нашем примере:
Мы знаем что callback функция для map передает 3 аргумента:
Начинаешь понимать что произошло? Из примера видно что функция parseInt() получает не только значение элемента в массиве, но и дополнительные параметры. Зная об этом предлагаю проверить каждое значение отдельно.
Есть ли способ получить ожидаемый результат?
Зная как это работает, мы можем легко исправить изначальный скрипт для получения нужного нам результата:
NAN — Число?
К какому типу данных в JavaScript относится не число NaN (Not a Number)
Получается что «не число» на самом деле число!
Как это работает?
Во первых: значение NaN действительно сопоставляется к числовому типу данных и используется в случаях, когда определенное значение не может быть представлено в рамках используемого числового типа.
Во вторых спецификация ECMAScript гласит:
4.3.20 Тип номера. набор всех возможных числовых значений, включая специальное “Not-a-Number” (NaN) значения, положительная бесконечность и отрицательная бесконечность.
Поэтому да: «Not a Number» — считается числом в JavaScript.
Числовые разделители
С первого взгляда даже сложно предположить о результате, но на самом деле получится 3000.
Как это работает?
Символ подчеркивания «_» — это разделитель для числовых литералов и используется исключительно для лучшей читаемости чисел. Например число 1223412 легче прочитать как 1_223_412.
(‘b’+‘a’+ + ‘a’ + ‘a’).toLowerCase() === ‘banana’
Можно подумать, что результатом сравнения выражения в примере будет ложь, ведь в строке которую мы строим нет ни одной буквы n. Предлагаю разобраться:
Действительно — выражение истинно. Возможно вы уже разобрались с причиной истинности этого значения, но если нет, позвольте объяснить что тут происходит. Самое интересное происходит в левой части, в правой нет ничего странного.
Предлагаю удалить преобразование в нижний регистр и посмотреть результат:
Да! Причина найдена, кажется в строку действительно забралось значение NaN и происходит это из-за выражения «+ +». Сама по себе операция «+ +» ничего не вернет, но если бы добавим символ то результатом будет NaN.
Затем NaN объединяются с остальной строкой и в результате получается «banana». Довольно странно, но так.
Возможно Вам так же понравится статья YoptaScript — язык для «четких пацанчиков»