【JavaScript】スペースを含む数字の文字列が二つ、要素として入っている配列を、整数化した上で１つづつの整数に分け、配列に格納する方法

Question

前提・実現したいこと

JavaScriptで、

var str = ["1 2", "3 4"];

という文字型の配列が与えられている時に、
これを整数型にした上で

var num = [1, 2, 3, 4];

とバラバラに分けて、配列に格納する方法を教えていただきたいです。

試したこと

str[0]をスペースで区切り、新しい配列firstArryに格納。
整数化して、新しい配列num_firstArryに格納。

str[1]をスペースで区切り、新しい配列secondArryに格納。
整数化して、新しい配列num_secondArryに格納。

num_firstArryとnum_secondArryを結合し、新しい配列resulrArryを作成。

        var firstArry = str[0].split(/\s/);
        var num_firstArry = firstArry.map(function(str){
        return Number(str);
    });
    
        var secondArry = str[1].split(/\s/);
        var num_secondArry = secondArry.map(function(str){
            return Number(str);
        });
    
       var resultArry = num_firstArry.concat(num_secondArry);

この方法で、一応求めていた操作はできたのですが、このやり方よりも効率の良いやり方があるのではないか？
と思い質問させていただきました。

ご回答のほど、よろしくお願いいたします。

Comments

[AkitoshiManabe]

解決前には 文字型の配列を ["1 2", "3 4"]; と訂正しておいたほうがよいですね。
意を組んで回答が上がっていますがコード上は SyntaxError になるはずです。

[moritat-222]

修正依頼ありがとうございます。
修正いたしました！

Answer 1

こんにちは
配列のflat()メソッドを使って、以下でどうでしょう？

var resultArry = str.map(e => e.split(/\s/)).flat().map(e => +e);

• 動作確認用CodePen: https://codepen.io/jun68ykt/pen/NWGpBVo?editors=0012

Comments

[moritat-222]

回答ありがとうございます！

初歩的な質問で申し訳ないのですが、このコードで書かれている e は何を指しているのでしょうか？

JavaScriptの引数でeと書かれている時はイベントの略であることが多いとは認識しているのですが、ここでイベントが登場するのもあまりしっくり来ないので別の何かの略だとは思うのですが・・・！

回答よろしくお願いいたします。

[jun68ykt]

コメントありがとうございます。

このコードでは、配列のmapメソッド
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map
を２箇所で使っています。

上記のドキュメントのとおり、map には引数として関数を渡しますが、その関数の引数には配列の各要素が入ってきます。なので、引数の名前を element (要素）の頭文字の e にしています。

はじめの
str.map(e => e.split(/\s/))
によって、str の各要素の文字列を、スペース区切りで分割した配列で置き換えた、以下のような配列

[ ['1', '2'], ['3', '4'], ['55', '66'], ['777', '888'] ]

が得られます。

ただし、 map に渡す関数の引数名を e にするのが、いつもよいとは限りません。このご質問の場合でいえば、２つの数字をスペースで結合した '1 2' という形式の文字列が入る変数を、たとえば、pair という変数名にするのが慣例になっているのでしたら

str.map(pair => pair.split(/\s/))

にしたほうが読みやすくなります。なので、e は適宜、変えればよいかと思います。

[moritat-222]

回答ありがとうございます。
eはelementの略だったんですね。納得いたしました。

resultArry = str.map(e => e.split(/\s/)).flat()

までの時点で
['1', '2', '3', '4','55', '66', '777', '888']
という配列が得られることまでは理解できました。

最後の
.map(e => +e);

という処理では何を行っているのか教えていただきたく思います。

おそらくここで文字列を整数化する処理をされていると思うのですが、
(e => +e)の処理でどう整数化しているのか、検索してみても理解できませんでした・・・。

ご回答のほど、よろしくお願いいたします。

[jun68ykt]

+e の + は、単項加算（unary plus) あるいは、単項プラスと呼ばれます。変数 e に文字列の '55' が入っているときに +e とすると、数値の 55 が得られます。

参考：
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Unary_plus

[moritat-222]

ありがとうございます！
「単項算術演算子 (+、-、++、--) はすべて、必要に応じてオペランドを数値に変換する」
ということですね。

大変勉強になりました！

[jun68ykt]

どういたしまして????
> 大変勉強になりました！
とのことでよかったです????

Answer 2

最初に全部 ” ”でくっつけて一つの文字列にしておけば楽だと思いますよ

var str = ["1 2", "3 4", "55 666　　7"];
let num = str.join(" ")  //" 1 2 3 4 55 666　　7"
    .split(/\s+/)  //   [ '1', '2', '3', '4', '55', '666', '7' ]
    .map(num => parseInt(num));

Comments

[moritat-222]

ありがとうございます。とてもわかりやすかったです。

Answer 3

基本的にそのやり方でいいんではないかと。
んで、配列を相手にするんだから、ループにして処理しよう

Comments

[moritat-222]

回答ありがとうございます。

var firstArry = lines[0].split(/\s/);

の代わりに

for(var firstArry of lines){
firstArry = lines[0].split(/\s/);
}

で処理した方が良い、ということでしょうか？

整数化の処理でループを作成使用としたら「don't make function within loop 」のエラーが出てしまったのでこちらの処理のことではない、と思うのですが・・・。

for(var num_firstArry of firstArry){
firstArry.map(function(str){
return Number(str);
});

もしご回答の意図をくみ違えていたらご指摘ください。

[y_waiwai]

str の方をループに。

for(var s in str){
var Arry = s.split(/\s/);
...
}
というふうに２つ並べてたのがひとつでできます
あなたなりに、理解できる範囲でいろいろやっていってみてください。

まあ、他の回答でより短くできるコード（あるいはより適切なコード）が提示されてるので、それも理解できればいいですね