JavaScriptで配列や文字列を分割する方法をまとめたよ

JavaScriptでコードを書くとき、次の2つのやり方によく悩みます。

  • 文字列をある規則で配列に分割するやり方
  • 配列をN等分の配列に分けるやり方

やり方さえ分かってれば、どうってことないんですが・・・

ということで、この2つのやり方をコード例付きでまとめてみました

1.文字列を分解して配列にするやり方

これには String.split メソッドを使うのが手っ取り早いです。

まず String.split  メソッドについての説明は次の通り(引用)

split() メソッドは、指定した separator 文字列を使って分割する箇所を決定し、文字列を複数の部分文字列に区切ることにより String オブジェクトを文字列の配列に分割します。

str.split([separator[, limit]])

戻り値

与えられた文字列で separator が発生するそれぞれの箇所で分割した文字列の配列です。

引用元 : String.prototype.split() - JavaScript | MDN

第1引数の文字列を分割でき、最大個数も指定できるメソッド

もちろん地道に for  とか使ってもできるが、これが一番簡単ですね。

ちなみにPHPにもこれと似た感じで、 implode  という関数もあります。

コード例 : コンマ区切りの文字列をsplitで分割する

では String.split  の分割のコード例について

一番身近なのは コンマ区切りのCSVとかを配列にしたい場合 とかです。

 

例えば次みたいなCSSがあるとしましょう。

上のCSVをコンマごとに区ぎりたいとき、今紹介した String.split  が役に立ちます。

▼ 例えばこんな感じのコード例

▼ このコードのコンソール表示結果

ちゃんとコンマ区切りで配列に分割されてます。

2.配列をN等分に分割するには

お次は配列をさらに細かな配列に分ける方法について

これについては直接分割できるようなメソッドはありません。

でも Array.splice  メソッドが分割するのに有能です。(以下がその説明)

arr.slice([begin[, end]])

begin Optional
取り出しの開始位置を示す 0 から始まるインデックスです。

end Optional
取り出しを終える直前の位置を示す 0 から始まるインデックスです。 slice は end 自体は含めず、その直前まで取り出します。

返値
取り出された要素を含む新しい配列です。

引用元 : Array.prototype.slice() - JavaScript | MDN

これを使えば、N等分とか、N個ずつに分ける処理も楽にできそうです。

配列をN個ずつに分割できる関数を作ってみた

ということで Array.slice  を使い、配列をN個ずつの配列に分ける関数を実装してみました。

▼ そのコード例がコチラ

第1引数 arr  には分割対象の配列、第2引数 n  には分割の個数を渡せばいいだけ

 

実際にこの関数を使い、ある配列を3等分してみます。

▼ こんなコードを書いてみた

▼ このコードの出力例

しっかり3個ずつに分けられてる

ちなみに対象配列の個数が n  で割り切れない場合でも問題なく使えます。
(例えば10個なら 要素3つの配列×3+要素1つの配列 のように分割される)

ちなみに文字列・配列を結合するには・・・

最後に少しだけ蛇足

分割とは逆で、文字列・配列を結合する方法もあります。

詳しくは次記事で紹介した通りです。(コード例付き)

分割ほど使用頻度は少ないけど、使う場面は多いかもしれません。

特に配列の分割のやり方、これを知ってると便利です。

配列や文字列の分割のまとめ

ということで、簡単に分割方法まとめ

  • 文字列を配列に分割する
    ⇒ 文字列分割は String.split  メソッドを使うのが一番楽。これを使えばコンマ区切りのCSVとかもサクッと配列に分けることができる
  • 配列をN等分に分割する
    ⇒ 直接分割できるメソッドはない。でも Array.splice  メソッドをうまく活用すれば配列をN等分する関数も作れる

以上、JavaScriptで文字列・配列を分割する方法でした。ではまたバイバイ($・・)/~~~

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください