Хабрахабр

[Перевод] Почему [‘1’, ‘7’, ’11’].map(parseInt) возвращает [1, NaN, 3] в Javascript?

Ну попробуйте тогда преобразовать массив строк в целые числа с помощью map и parseInt. Javascript — странный. Не верите? Запустите консоль (F12 на Chrome), вставьте код ниже и нажмите Enter

['1', '7', '11'].map(parseInt);

Но как так? Чтобы узнать в чём тут дело, сначала нам придётся поговорить о некоторых базовых концепциях Javascript. Вместо ожидаемого массива целых чисел [1, 7, 11] мы получаем [1, NaN, 3]. Если вам нужен TL;DR, пролистывайте статью до самого конца.

Правдивость и ложность

Вот простой оператор if-else в Javascript:

if (true) { // всегда выполняется
} else { // не выполняется никогда
}

Это тривиальный пример, потому что true — булев тип. В этом случае условие оператора всегда истинно, поэтому блок if всегда выполняется, а блок else всегда игнорируется. Что тогда если мы поставим не булево условие?

if ("hello world") { // выполнится это? console.log("Условие истинно");
} else { // или это? console.log("Условие ложно");
}

Вы должны увидеть «Условие истинно», так как строка «hello world» воспринимается как true. Попробуйте запустить этот код в консоли разработчика.

При размещении в логическом контексте, таком как оператор if-else, объекты рассматриваются как true или false на основе их «истинности». Каждый объект в Javascript воспринимается либо как true, либо как false. Действует простое правило: Какие же объекты истинны, а какие ложны?

Все значения являются истинными, за исключением: false, 0, "" (пустая строка), null, undefined, и NaN.

Вы можете убедиться в этом самостоятельно, передав функции Boolean любой из объектов выше (например, Boolean(«0»);). Контр интуитивно это означает, что строка «false», строка «0», пустой объект и пустой массив [] — правдивы.

Но для наших целей просто достаточно помнить, что 0 это ложь.

Основание системы счисления

0 1 2 3 4 5 6 7 8 9 10

Однако, как только мы достигаем десяти, нам нужны два разных символа (1 и 0) для представления числа. Когда мы считаем от нуля до девяти, мы используем разные символы для каждого из чисел (0-9). Это связано с тем, что мы используем десятичную систему счисления.

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

DECIMAL BINARY HEXADECIMAL
RADIX=10 RADIX=2 RADIX=16
0 0 0
1 1 1
2 10 2
3 11 3
4 100 4
5 101 5
6 110 6
7 111 7
8 1000 8
9 1001 9
10 1010 A
11 1011 B
12 1100 C
13 1101 D
14 1110 E
15 1111 F
16 10000 10
17 10001 11

Для двоичной — это число 3. Например, цифры 11 обозначают разные числа в этих трёх системах счисления. Для шестнадцатеричной — это число 17.

Внимательный читатель вероятно заметил что код с parseInt возвращает 3, когда вход равен 11, что соответствует двоичному столбцу из таблицы выше.

Аргументы функции

Отсутствующие параметры рассматриваются как неопределенные, а дополнительные просто игнорируются (но хранятся в похожем на массив объекте arguments object). Функции в Javascript можно вызывать с любым числом аргументов, даже если их количество в сигнатуре отлично.

function foo(x, y) { console.log(x); console.log(y);
} foo(1, 2); // выводит 1, 2
foo(1); // выводит 1, undefined
foo(1, 2, 3); // выводит 1, 2

map()

Мы почти у цели!

Например, следующий код умножает каждый элемент массива на 3: Map — это метод в прототипе массива, который возвращает новый массив из результатов вызова функции для каждого элемента исходного массива.

function multiplyBy3(x) { return x * 3;
} const result = [1, 2, 3, 4, 5].map(multiplyBy3); console.log(result); // выводит [3, 6, 9, 12, 15];

Можно просто передать console.log в качестве аргумента в map() … правильно? Теперь предположим, что я хочу вывести каждый элемент используя map() (и не используя return).

[1, 2, 3, 4, 5].map(console.log);

Вместо того чтобы выводить только значение, каждый вызов console.log выводит индекс и массив полностью. Происходит что-то странное.

[1, 2, 3, 4, 5].map(console.log); // эквивалентно:
[1, 2, 3, 4, 5].map( (val, index, array) => console.log(val, index, array)
); // и НЕ эквивалентно:
[1, 2, 3, 4, 5].map( val => console.log(val)
);

Вот почему при каждой итерации выводятся три записи. При передаче функции в map() на каждой итерации она будет получать три аргумента: currentValue, currentIndex и полный array.

Теперь у нас есть всё что нужно для раскрытия тайны.

Всё вместе

Если переданный radix является ложным, то по умолчанию устанавливается в 10. ParseInt принимает два аргумента: string и radix (основание).

parseInt('11'); => 11
parseInt('11', 2); => 3
parseInt('11', 16); => 17 parseInt('11', undefined); => 11 (radix ложен)
parseInt('11', 0); => 11 (radix ложен)

Давайте рассмотрим этот пример шаг за шагом.

['1', '7', '11'].map(parseInt); => [1, NaN, 3] // Первая итерация: val = '1', index = 0, array = ['1', '7', '11'] parseInt('1', 0, ['1', '7', '11']); => 1

parseInt() принимает только два аргумента, поэтому третий аргумент ['1', '7', '11'] игнорируется. Так как 0 является ложным, то для основания устанавливается значение по умолчанию — 10. Строка '1' по основанию 10 даст результат 1.

// Вторая итерация: val = '7', index = 1, array = ['1', '7', '11'] parseInt('7', 1, ['1', '7', '11']); => NaN

Как и в случае с первой итерацией, последний аргумент игнорируется. В системе по основанию 1 символа '7' не существует. Таким образом parseInt() возвращает NaN.

// Третья итерация: val = '11', index = 2, array = ['1', '7', '11'] parseInt('11', 2, ['1', '7', '11']); => 3

Последний аргумент вновь игнорируется. В двоичной системе счисления '11' относится к числу 3.

Итог (TL;DR)

Второй аргумент index передается в parseInt в качестве параметра radix (основание системы счисления). ['1', '7', '11'].map(parseInt) не работает как было задумано, потому что map передает три аргумента в parseInt() на каждой итерации. '7' анализируется по основанию 1, что даёт NaN; '11' анализируется как двоичное число — итог 3. Таким образом, каждая строка в массиве анализируется с использованием недефолтного основания. '1' анализируется по дефолтному основанию 10, потому что его индекс 0 является ложным.

А вот код, который будет работать так, как мы хотели:

['1', '7', '11'].map(numStr => parseInt(numStr));

Показать больше

Похожие публикации

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

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

Кнопка «Наверх»