デザインサプライ-DesignSupply.-※当ウェブサイトを快適に閲覧して頂くためにブラウザのjavascriptを有効にしてください0%ProgrammingプログラミングナレッジPosted:2020.01.24javascriptで配列を扱う時によく使うメソッド#10【配列を文字列にする・多次元配列をフラットにする】javascriptjavascrptフロントエンド過去記事にもいくつか紹介してきました、javascriptで配列を扱う時に使うメソッドに関するエントリーですが、今回で10回目となります。これまでにもいろんなメソッドについてまとめてきましたが、今回はそこまでよく見かけるわけではありませんが、覚えておくと便利なちょっとマニアックな処理ができるメソッドになります。Array.join()配列データを1つの文字列に変換することができるのが「Array.join()」です。配列のデータに対して、このメソッドを実行すると、それぞれの値を合体させて、一つの文字列としてのデータを返します。引数には、配列の値ごとに入る区切り文字を指定することができます。引数を入れない場合はデフォルトとして半角カンマで区切られる形になります。);コンソールで確認すると下記のように配列としての値が、文字列になっているのが確認できます。いちご"またいろんな区切り文字を使ったケースはこちらになります。区切り文字を使わない場合には引数に空の文字列を指定するとOKです。);【console】"りんご/みかん/いちご""りんごとみかんといちご""りんごみかんいちご"改行コードを入れて改行のある文字列に変換Array.join()では引数に指定した文字で区切ることができますが、引数に改行コード(HTMLで出力する場合にはbrタグ)を入れることで、出力する文字列の中で改行することができます。);このようにコンソール上で確認すると値の文字列の中で改行されているのが確認できます。【console】1位2位3位Strings.split()と合わせて特定の文字だけを除去javascriptで文字列に対するメソッドに「Strings.split()」というものがあります。これは引数に指定した文字で区切られる文字列に分割して、配列にして返すというものです。このメソッドとArray.join()を使うことで、特定の文字だけを除去する例を見ていきます。下記はハイフンが含まれた電話番号の文字列を、ハイフンなしのものに変換するパターンになります。文字列のハイフンを含む電話番号を、Strings.split()でハイフンごとに区切られた文字列の配列に変換します。その配列に対して、Array.join()を実行することで、ハイフンだけが取り除かれた電話番号の文字列に変換することができます。arrayData.join('');console.log(result);【console】"08012345678"Array.flat()配列の中に、配列が含まれるような入れ子構造の複数の階層になっている配列を多次元配列と呼びますが、それを1つの階層にまとまった配列へと変換する時に使えるのが「Array.flat()」です。引数にはどの深さまでフラット化させるかを数値で指定します。);指定した深さに合わせて、多次元構造の配列がフラットになっているのが確認できます。);今回は少し特殊ケースでの配列操作になりましたが、応用することでいろんな処理がスマートに実現させることができますので、覚えておきたいメソッドですね。以上、合計10記事に渡りjavascriptの配列操作についてまとめてきました。全部覚えて使いこなすのはなかなか大変ですが、どれも便利なメソッドなので是非積極的に使っていきたいですね。ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちらデザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。コメントをキャンセル記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。メールアドレスは公開されませんのでご安心ください。付いている欄は必須項目となります。コメント内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。*次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。javascriptで配列を扱う時によく使うメソッド#10【配列を文字列にする・多次元配列をフラットにする。