配列の中身を数値に変換したい

Question

前提・実現したいこと

中身が文字列の配列を、中身が数値の配列に変換したいのですが上手くいきません。

下に試したコードを記載するので、どこが間違っているのかを指摘していただきたいです。

また、どの時点で数値に変換するのが一般的なのかを知らないのでその点についても教えていただけると嬉しいです。

//別でバリデーションした、ユーザーが入力した半角数字のみが格納されます、この時点で文字列の配列になります
var user_array = [];
  for ( var i = 1; i <= 6 ; i++ ) {
    user_array.push(document.getElementById('number' + i).value);
  }
//出来上がる配列の例
 ["1","2","3","4","5","6"]
 ["23","6","31","19","5","40"]


//試したもの１、変換できずに文字列のまま
user_array.map(function(element){
    return Number(element);
});
  

//試したもの２、変換できずに文字列のまま
user_array.map( str => parseInt(str, 10) );

//試したもの３、エラーが出て配列に格納できず
var user_array = [];
  for ( var i = 1; i <= 6 ; i++ ) {
    user_array.push(document.getElementById('number' + i).parseInt(value));
  }

Answer 1

user_array の要素それぞれを文字列から数値に変換して格納するのなら、 map() を使うだけでは足りません。

map() は、もとの配列を 変更しません 。
与えられた関数を、要素ごとに適用したあと、その戻り値を新しい配列として返します。

だから、 「試したもの１」や「試したもの２」で user_array が変更されることはありません。

---

const returnValue = user_array.map(function(element){
    return Number(element);
});
console.log(returnValue);

などと書けば、戻り値として変換後の数値の配列が出力されます。

---

user_array そのものを書き換えるには、

user_array = user_array.map(function(element){
    return Number(element);
});

とすると良いでしょう。

Comments

[退会済みユーザー]

ご丁寧にありがとうございます。

1番最初に回答してくださった方をベストアンサーにさせていただきました。

Answer 2

与えられた関数を配列のすべての要素に対して呼び出し、その結果からなる新しい配列を生成します。

Array.prototype.map() - JavaScript | MDN

ということですので、元の配列は変化しません。
戻り値を受け取ってください。

Comments

[退会済みユーザー]

ありがとうございます。

無事に解決いたしました。

Answer 3

まず、mapメソッドは、破壊的メソッドではないということが、今回の勘違いかと。
（つまり、元は変化しないってこと）
mapは、各要素に対して、コールバックに指定した処理をした要素を返すことによって、
最終的に、全ての要素に対して同様の処理をした新たな配列を返すメソッドです。
よって、下記のようにする必要があります。

//別でバリデーションした、ユーザーが入力した半角数字のみが格納されます、この時点で文字列の配列になります
var user_array = [];
for ( var i = 1; i <= 6 ; i++ ) {
  user_array.push(document.getElementById('number' + i).value);
}
//出来上がる配列の例
// ["1","2","3","4","5","6"]
// ["23","6","31","19","5","40"]


// 同じ変数に代入し直す
user_array = user_array.map(element => Number(element));

// letなど、再代入ができない場合は下記
let user_array = (() => {
  const r = [];
  for ( var i = 1; i <= 6 ; i++ ) {
    r.push(document.getElementById('number' + i).value);
  }
  return r;
})().map( e => Number(e));


// か、そもそも要素から値取る時点で数値にしちゃう
var user_array = [];
for ( var i = 1; i <= 6 ; i++ ) {
  user_array.push( Number(document.getElementById('number' + i).value) );
}

ちなみに、上記構文は、共生できませんのでご注意ください。

Comments

[退会済みユーザー]

ご丁寧にありがとうございます。

1番最初に回答してくださった方をベストアンサーにさせていただきました。