JavaScriptで数値変換を使いこなす！map関数、parseInt関数、Number関数の違い
JavaScriptのmap関数とparseInt関数とNaN
例えば、以下のコード:
const arr = ['1', '2', '3'];
const result = arr.map(parseInt);
console.log(result); // [1, NaN, NaN]
このコードを実行すると、resultは[1, NaN, NaN]という結果になります。
なぜこのような結果になるのでしょうか？
問題の原因
この問題の原因は、parseInt関数が引数として渡された文字列全体を解析しようとする点にあります。
map関数は、配列の各要素に対して関数を適用し、新しい配列を生成します。上記のコードでは、parseInt関数が各要素に適用されます。
parseInt関数は、最初の数値文字列を見つけ、それを10進数に変換します。しかし、数値文字列以外が見つかった場合は、NaN (Not a Number) を返します。
上記の例では、最初の要素 "1" は数値文字列なので、parseInt関数は正常に1を返します。
しかし、2番目と3番目の要素 "2" と "3" は数値文字列のみで構成されていません。これらの要素には空白文字が含まれているため、parseInt関数はNaNを返します。
解決方法
この問題を解決するには、parseInt関数に2番目の引数を渡す必要があります。2番目の引数は、解析対象となる文字列の基数を指定します。
const arr = ['1', '2 ', '3 '];
const result = arr.map(parseInt);
console.log(result); // [1, NaN, NaN]
これは、parseInt関数がデフォルトで10進数を基数として解釈するためです。空白文字は10進数には含まれないため、parseInt関数はNaNを返します。
以下のコードのように、2番目の引数に10を指定することで、空白文字を含む文字列も10進数として解析することができます。
const arr = ['1', '2 ', '3 '];
const result = arr.map(parseInt.bind(null, 10));
console.log(result); // [1, 2, 3]
このように、parseInt関数に2番目の引数を渡すことで、map関数と組み合わせて使用しても期待通りの結果を得ることができます。
- 数値文字列以外が見つかった場合は、NaNを返す。
parseInt関数に2番目の引数を渡すことで、基数を指定することができる。
// 配列を定義
const arr = ['1', '2 ', '3 '];
// map関数を使って、各要素をparseInt関数で変換
const result = arr.map(parseInt);
// 結果を出力
console.log(result); // [1, NaN, NaN]
// map関数を使って、各要素をparseInt関数で変換
const result = arr.map(parseInt.bind(null, 10));
// 結果を出力
console.log(result); // [1, 2, 3]
以下のコードは、map関数とparseInt関数を使って、様々な基数の文字列を数値に変換する例です。
// 2進数を10進数に変換
const binary = ['1001', '1100', '1111'];
const decimal = binary.map(parseInt.bind(null, 2));
console.log(decimal); // [9, 12, 15]
// 8進数を10進数に変換
const octal = ['010', '011', '012'];
const decimal = octal.map(parseInt.bind(null, 8));
console.log(decimal); // [8, 9, 10]
// 16進数を10進数に変換
const hexadecimal = ['0x10', '0x11', '0x12'];
const decimal = hexadecimal.map(parseInt.bind(null, 16));
console.log(decimal); // [16, 17, 18]
このコードを実行すると、以下の結果になります。
[9, 12, 15]
[8, 9, 10]
[16, 17, 18]
map関数とparseInt関数以外で配列の各要素を数値に変換する方法
forEachループを使って、配列の各要素を処理することができます。
const arr = ['1', '2 ', '3 '];
const result = [];
arr.forEach(function(element) {
result.push(parseInt(element, 10));
});
console.log(result); // [1, 2, 3]
このコードは、forEachループを使って、配列の各要素を処理し、parseInt関数を使って数値に変換しています。
const arr = ['1', '2 ', '3 '];
const result = arr.reduce(function(accumulator, currentValue) {
return accumulator.concat(parseInt(currentValue, 10));
}, []);
console.log(result); // [1, 2, 3]
Number()関数を使って、文字列を数値に変換することができます。
const arr = ['1', '2 ', '3 '];
const result = arr.map(Number);
console.log(result); // [1, 2, 3]
このコードは、Number()関数を使って、配列の各要素を数値に変換しています。
Number()関数は、parseInt関数よりも簡潔に記述できますが、基数を指定することはできません。
map関数とparseInt関数以外にも、配列の各要素を数値に変換する方法はいくつかあります。
それぞれの方法にはメリットとデメリットがありますので、状況に合わせて使い分けることが重要です。
javascript
