JavaScript 2020.01.24

JavaScriptで配列を扱う時によく使うメソッド＃10【配列を文字列にする・多次元配列をフラットにする】

最終更新日：2020.9.2Update

過去記事にもいくつか紹介してきました、JavaScriptで配列を扱う時に使うメソッドに関するエントリーですが、今回で10回目となります。これまでにもいろんなメソッドについてまとめてきましたが、今回はそこまでよく見かけるわけではありませんが、覚えておくと便利なちょっとマニアックな処理ができるメソッドになります。

Array.join()

配列データを1つの文字列に変換することができるのが「Array.join()」です。配列のデータに対して、このメソッドを実行すると、それぞれの値を合体させて、一つの文字列としてのデータを返します。引数には、配列の値ごとに入る区切り文字を指定することができます。引数を入れない場合はデフォルトとして半角カンマで区切られる形になります。

【javascript】

const arrayData = [ 'りんご', 'みかん', 'いちご' ];
console.log( arrayData.join() );

コンソールで確認すると下記のように配列としての値が、文字列になっているのが確認できます。

【console】

"りんご, みかん, いちご"

またいろんな区切り文字を使ったケースはこちらになります。区切り文字を使わない場合には引数に空の文字列を指定するとOKです。

【javascript】

const arrayData = [ 'りんご', 'みかん', 'いちご' ];
console.log( arrayData.join('/') );
console.log( arrayData.join('と') );
console.log( arrayData.join('') );

【console】

"りんご/みかん/いちご"
"りんごとみかんといちご"
"りんごみかんいちご"

改行コードを入れて改行のある文字列に変換

Array.join()では引数に指定した文字で区切ることができますが、引数に改行コード（HTMLで出力する場合にはbrタグ）を入れることで、出力する文字列の中で改行することができます。

【javascript】

const arrayData = [ '1位', '2位', '3位' ];
console.log( arrayData.join('\n') );

このようにコンソール上で確認すると値の文字列の中で改行されているのが確認できます。

【console】

1位
2位
3位

Strings.split()と合わせて特定の文字だけを除去

JavaScriptで文字列に対するメソッドに「Strings.split()」というものがあります。これは引数に指定した文字で区切られる文字列に分割して、配列にして返すというものです。このメソッドとArray.join()を使うことで、特定の文字だけを除去する例を見ていきます。

下記はハイフンが含まれた電話番号の文字列を、ハイフンなしのものに変換するパターンになります。まずは文字列のハイフンを含む電話番号を、Strings.split()でハイフンごとに区切られた文字列の配列に変換します。そしてその配列に対して、Array.join()を実行することで、ハイフンだけが取り除かれた電話番号の文字列に変換することができます。

【javascript】

const tel = '080-1234-5678';
const arrayData = tel.split('-');
const result = arrayData.join('');
console.log(result);

【console】

"08012345678"

Array.flat()

配列の中に、配列が含まれるような入れ子構造の複数の階層になっている配列を多次元配列と呼びますが、それを1つの階層にまとまった配列へと変換する時に使えるのが「Array.flat()」です。引数にはどの深さまでフラット化させるかを数値で指定します。

【javascript】

const arrayData = [
 '近畿地方',
  [
   '大阪府',
    [
     '大阪市',
      [
       '北区',
       '中央区'
      ]
    ],
   '兵庫県',
    [
     '神戸市',
     '姫路市'
    ]
  ]
];
console.log( arrayData.flat(3) );

指定した深さに合わせて、多次元構造の配列がフラットになっているのが確認できます。

【console】

[ "近畿地方", "大阪府", "大阪市", "北区", "中央区", "兵庫県", "神戸市", "姫路市" ]

まとめ

【配列データを単一の文字列に変換】

Array.join( separater );

【配列データを値ごとに改行された文字列に変換】

Array.join( ‘n’ );

【多次元配列をフラットにする】

Array.flat( depth );

今回は少し特殊ケースでの配列操作になりましたが、応用することでいろんな処理がスマートに実現させることができますので、覚えておきたいメソッドですね。以上、合計10記事に渡りjavascriptの配列操作についてまとめてきました。全部覚えて使いこなすのはなかなか大変ですが、どれも便利なメソッドなので是非積極的に使っていきたいですね。

（こちらの記事もどうぞ）