JavaScriptで配列を分割する方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptで配列を分割する方法について解説しています。sliceメソッドで範囲を指定することで配列の分割を行うことができます。書き方の例と実行結果を見てみましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。

JavaScriptで配列を分割する方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

 

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まるでしょう。

 

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

配列を分割する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

目次

 

sliceメソッドについて

sliceメソッドは、JavaScriptの配列オブジェクトであるArrayのメソッドです。

配列の指定した範囲をコピーした新しい配列を返します。

指定した範囲をコピーしているため、もとの配列は変わりません。

 

sliceの引数は2つあります。

第1引数は、指定する範囲の始まりのインデックスです。

例えば、配列の2番目からとしたい場合は、第1引数は1(0から始まるため2番目のインデックスは1)となります。

第2引数は、指定する範囲の終わりのインデックスであり、終わりのインデックスの直前までをコピーします。

例えば配列の4番目までとしたい場合は、第2引数は4(0から始まるインデックスの4番目の直前)です。

 

どちらも省略可能で、両方省略した場合は最初から最後まで配列をまるごとコピーする動きになります。

第2引数のみを省略した場合は、第1引数で指定したインデックスから最後までとなる点を事前に理解しておきましょう。

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

配列を分割する方法

配列の分割は、sliceメソッドを使って分割したい範囲を指定することで実現可能です。

例えば、10個の要素を持つ配列を1〜5番目と6〜10番目までの2つに分割したい場合は、1回目のsliceメソッドの引数に0と5を指定して、1〜5番目をコピーします。

そして2回目のsliceメソッドの引数に5と10を指定して、6〜10番目をコピーしましょう。

 

実際に書いてみよう

1番目〜5番目という5つ文字列を持った配列にsliceメソッドを使って動作を見ていきましょう。

引数の指定を3パターン実行していますので結果を確認してください。

let array = ['1番目', '2番目', '3番目', '4番目', '5番目'];

let array2 = array.slice(2);  //3番目から最後まで
let array3 = array.slice(2,4);//3番目から4番目まで
let array4 = array.slice(); //全部

//結果
console.log(array); //["1番目", "2番目", "3番目", "4番目", "5番目"]
console.log(array2); //["3番目", "4番目", "5番目"]
console.log(array3); //["3番目", "4番目"]
console.log(array4); //["1番目", "2番目", "3番目", "4番目", "5番目"]

 

まとめ

sliceメソッドは範囲の指定方法だけわかれば使えます。

指定範囲をコピーするので、もとの配列はそのままで変わらないことに注意してください。

 

執筆してくれたメンター

横山茂雄(よこやましげお)

フリーエンジニアとして活動中。サーバーサイドからフロントまで時代の波に合わせてスキルを変化させてきました。

言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。

TechAcademyジュニアのゲームアプリコースを担当しています。

 

大石ゆかり

JavaScriptで配列を分割する方法がよく分かったので良かったです!

田島悠介

ゆかりちゃん、これからも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは、初心者でも最短4週間でJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。