0%

Programmingプログラミングナレッジ

Posted:2020.01.24

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

過去記事にもいくつか紹介してきました、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の配列操作についてまとめてきました。全部覚えて使いこなすのはなかなか大変ですが、どれも便利なメソッドなので是非積極的に使っていきたいですね。

(こちらの記事もどうぞ)

javascriptで配列を扱う時によく使うメソッド#1【配列の作成・値や総数の取得・空判定など】
javascriptで配列を扱う時によく使うメソッド#2【配列の値に対して繰り返し処理を行う】
javascriptで配列を扱う時によく使うメソッド#3【配列に値が含まれるか・値のインデックスを検索する】
javascriptで配列を扱う時によく使うメソッド#4【配列から条件に合う値を取得・フィルタリングする】
javascriptで配列を扱う時によく使うメソッド#5【配列の値から別の配列を作成・単一の値を算出する】
javascriptで配列を扱う時によく使うメソッド#6【配列の値を追加・削除する】
javascriptで配列を扱う時によく使うメソッド#7【配列の値を切り取る・値を差し替える・配列を合体する】
javascriptで配列を扱う時によく使うメソッド#8【配列の値を並び替える・ランダムにシャッフルする】
javascriptで配列を扱う時によく使うメソッド#9【オブジェクトを配列に変換する】

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】