【JavaScript 入門講座】配列の関数を学習する
[JavaScript 入門講座]配列の関数を学習する
目次
配列の関数を学習する。配列はもっとも頻繁に利用するプログラムの一つである。 この学習を通して、配列を自由自在に扱える事ができればと考える。
配列 配列とは、リスト形式でデータを保持する箱である。 配列に入ったデータは「配列の要素」と言われる。
すでに学習したとおり、配列は値をリストのような形で保持する箱である。 配列の中に入った値の事を、配列の要素と言う。 この言葉は今後利用し続ける。
| インデックス | 値 |
| 0 | Tea |
| 1 | Walk |
| 2 | Movie |
配列は、このようにリスト形式で要素を持つ箱である。
配列の中の要素には、それぞれインデックスが割り振られている。
配列は「インデックスによって要素を管理する箱」と言い換える事もできる。
さて、本講座では配列が持つ様々な関数を見る。では、サンプルプログラムを見よう。
配列のjoin()関数を利用して文字列を作成
配列のjoin()関数を見る。
001<script>
002
003//配列を宣言
004const plans = [ "Tea" , "Walk" , "Movie" ];
005
006//配列から文字列を作成
007const str = plans.join ( "-" ) ;
008
009//表示
010alert ( str ) ;
011
012</script>
002
003//配列を宣言
004const plans = [ "Tea" , "Walk" , "Movie" ];
005
006//配列から文字列を作成
007const str = plans.join ( "-" ) ;
008
009//表示
010alert ( str ) ;
011
012</script>
プログラムを実行すると、「Tea-Walk-Movie」と表示する。
join()関数とは 配列の要素を文字列結合する。
join()関数は配列の要素から文字列を作成する関数である。 配列に入った要素を、全て文字列結合して、その結果を戻す。
join()関数の利用方法 配列.join ( [文字] ) ;
join()関数の利用方法である。
配列の各要素を文字列結合する際、
要素と要素の間に引数の文字をはさむ。
では、プログラムを見ながら解説する。
003//配列を宣言
004const plans = [ "Tea" , "Walk" , "Movie" ];
004const plans = [ "Tea" , "Walk" , "Movie" ];
3行目で配列を作成して、3つの要素を設定する。
| インデックス | 値 |
| 0 | Tea |
| 1 | Walk |
| 2 | Movie |
配列plansはこのような状態になる。
003//配列を宣言
004const plans = [ "Tea" , "Walk" , "Movie" ];
005
006//配列から文字列を作成
007const str = plans.join ( "-" ) ;
004const plans = [ "Tea" , "Walk" , "Movie" ];
005
006//配列から文字列を作成
007const str = plans.join ( "-" ) ;
7行目で配列plansに対して関数join()を実行する。 join()の引数は「-」である。 join()関数を実行すると、配列の要素が文字列結合する。 要素と要素の間は引数の文字である。つまり、要素と要素の間には「-」が文字列結合する。
"Tea" + "-" +
"Walk" + "-" +
"Movie"
要素が文字列結合する際、要素の間に引数のハイフンが文字列結合する。
"Tea-Walk-Movie"
join()関数の実行結果は、このような文字列になる。
001<script>
002
003//配列を宣言
004const plans = [ "Tea" , "Walk" , "Movie" ];
005
006//配列から文字列を作成
007const str = plans.join ( "-" ) ;
008
009//表示
010alert ( str ) ;
011
012</script>
002
003//配列を宣言
004const plans = [ "Tea" , "Walk" , "Movie" ];
005
006//配列から文字列を作成
007const str = plans.join ( "-" ) ;
008
009//表示
010alert ( str ) ;
011
012</script>
7行目で作成した文字列を、10行目で表示する。 「Tea-Walk-Movie」と表示してプログラムが終了する。
配列の末尾に新しい要素を追加する（ push()関数 ）
001<script>
002
003//配列を宣言
004const plans = [ "Tea" , "Walk" , "Movie" ];
005
006//配列の末尾に要素を追加
007plans.push ( "Lunch" ) ;
008
009//表示
010alert ( plans.join ( "," ) ) ;
011
012</script>
002
003//配列を宣言
004const plans = [ "Tea" , "Walk" , "Movie" ];
005
006//配列の末尾に要素を追加
007plans.push ( "Lunch" ) ;
008
009//表示
010alert ( plans.join ( "," ) ) ;
011
012</script>
プログラムを実行すると、「Tea,Walk,Movie,Lunch」と表示する。
push()関数 配列の末尾に新しい要素を追加する。
push()関数の利用方法 配列.push( [新しい要素] ) ;
配列の最後に新しい要素を追加する場合、push()関数を利用する。
恐らく、配列の関数の内、最頻出の関数である。
push()関数を実行すると、引数で渡した値が配列の最後に追加される。
要素が追加されるという事は、配列の要素数が一つ増えるという事である。
プログラムを解説する。
003//配列を宣言
004const plans = [ "Tea" , "Walk" , "Movie" ];
004const plans = [ "Tea" , "Walk" , "Movie" ];
4行目で変数plansを宣言して配列を代入する。
| インデックス | 値 |
| 0 | Tea |
| 1 | Walk |
| 2 | Movie |
変数plansの配列は、このような状態である。
003//配列を宣言
004const plans = [ "Tea" , "Walk" , "Movie" ];
005
006//配列の末尾に要素を追加
007plans.push ( "Lunch" ) ;
004const plans = [ "Tea" , "Walk" , "Movie" ];
005
006//配列の末尾に要素を追加
007plans.push ( "Lunch" ) ;
7行目でpush()関数を利用して、文字列「Lunch」を配列の末尾に追加する。
| インデックス | 値 |
| 0 | Tea |
| 1 | Walk |
| 2 | Movie |
| 3 | Lunch |
配列の状態は、このようになる。 配列の最後に文字列「Lunch」が追加され、インデックス「3」が割り振られる。
001<script>
002
003//配列を宣言
004const plans = [ "Tea" , "Walk" , "Movie" ];
005
006//配列の末尾に要素を追加
007plans.push ( "Lunch" ) ;
008
009//表示
010alert ( plans.join ( "," ) ) ;
011
012</script>
002
003//配列を宣言
004const plans = [ "Tea" , "Walk" , "Movie" ];
005
006//配列の末尾に要素を追加
007plans.push ( "Lunch" ) ;
008
009//表示
010alert ( plans.join ( "," ) ) ;
011
012</script>
10行目でjoin()関数を利用して要素を全て文字列結合する。 要素間の文字は「,」である（カンマである）。 プログラムを実行すると、「Tea,Walk,Movie,Lunch」と表示する。
配列の先頭に新しい要素を追加する（ unshift() ）
001<script>
002
003//配列を宣言
004const plans = [ "Tea" , "Walk" , "Movie" ];
005
006//配列の先頭に要素を追加
007plans.unshift ( "Lunch" ) ;
008
009//表示
010alert ( plans.join ( "," ) ) ;
011
012</script>
002
003//配列を宣言
004const plans = [ "Tea" , "Walk" , "Movie" ];
005
006//配列の先頭に要素を追加
007plans.unshift ( "Lunch" ) ;
008
009//表示
010alert ( plans.join ( "," ) ) ;
011
012</script>
プログラムを実行すると、「Lunch,Tea,Walk,Movie」と表示する。
配列の一番最初の位置に新しい要素を追加するプログラムである。
unshift()関数とは 配列の先頭に新しい要素を追加する
unshift()関数の利用方法 配列.unshift ( [新しい要素] ) ;
配列の最初の位置に要素を追加する場合、unshift () 関数を利用する。
他の要素のインデックスは一つずつ後ろへずれる（1つ加算される）。
プログラムを解説する。
001<script>
002
003//配列を宣言
004const plans = [ "Tea" , "Walk" , "Movie" ];
005
006//配列の先頭に要素を追加
007plans.unshift ( "Lunch" ) ;
008
009//表示
010alert ( plans.join ( "," ) ) ;
011
012</script>
002
003//配列を宣言
004const plans = [ "Tea" , "Walk" , "Movie" ];
005
006//配列の先頭に要素を追加
007plans.unshift ( "Lunch" ) ;
008
009//表示
010alert ( plans.join ( "," ) ) ;
011
012</script>
4行目で変数plansを宣言して配列を代入する。 7行目で配列の先頭に文字列「Lunch」を追加する。
| インデックス | 値 |
| 0 | Tea |
| 1 | Walk |
| 2 | Movie |
これが、4行目の配列の状態である。 ここに文字列「Lunch」を先頭に追加する。
| インデックス | 値 |
| 0 | Lunch |
| 1 | Tea |
| 2 | Walk |
| 3 | Movie |
このように文字列「Lunch」が先頭に追加され、他の要素は一つずつズレる。
010alert ( plans.join ( "," ) ) ;
10行目のプログラムを実行すると、 「Lunch,Tea,Walk,Movie」と表示する。
配列の最後の要素を削除する（ pop() ）
配列のpop()関数を学習する。
pop()関数とは 配列の最後の要素を削除した後、削除した要素を戻す
pop()関数は二つの処理を実行する。 配列の末尾から要素を削除し、その削除した要素を戻す。
pop()関数の利用方法 const 最後の要素 = 配列.pop () ;
pop()関数は、配列の最後の要素を配列から削除する。 通常この目的のために利用する。 付加的な機能として、配列から削除した要素を戻す。 この戻された要素をプログラムで利用する事ができる。
001<script>
002
003//配列を宣言
004const plans = [ "Tea" , "Walk" , "Movie" ];
005
006//配列の末尾を削除
007const plan = plans.pop ( ) ;
008
009//表示[Movie]
010alert ( plan ) ;
011
012//表示
013alert ( plans.join ( "," ) ) ;
014
015</script>
002
003//配列を宣言
004const plans = [ "Tea" , "Walk" , "Movie" ];
005
006//配列の末尾を削除
007const plan = plans.pop ( ) ;
008
009//表示[Movie]
010alert ( plan ) ;
011
012//表示
013alert ( plans.join ( "," ) ) ;
014
015</script>
プログラムを実行すると、「Movie」「Tea,Walk」と表示する。
4行目で変数plansを宣言して、配列を代入する。 7行目で、pop()関数を利用して配列の最後の要素を削除し、 その要素を変数planに代入する。 まず、配列に注目する。
| インデックス | 値 |
| 0 | Tea |
| 1 | Walk |
| 2 | Movie |
これが、4行目の配列の状態である。
| インデックス | 値 |
| 0 | Tea |
| 1 | Walk |
7行目で最後の要素を削除すると、配列はこのような状態になる。 また、配列の最後の要素「Movie」は変数planに代入される。
006//配列の末尾を削除
007const "Movie" = plans.pop ( ) ;
008
009//表示[Movie]
010alert ( plan ) ;
011
012//表示
013alert ( plans.join ( "," ) ) ;
007const "Movie" = plans.pop ( ) ;
008
009//表示[Movie]
010alert ( plan ) ;
011
012//表示
013alert ( plans.join ( "," ) ) ;
10行目で変数planの値を表示すると、「Movie」と表示する。 13行目で、join()を利用して配列の要素を文字列結合して表示する。 プログラムを実行すると、「Tea,Walk」と表示する。
splice()関数を利用して配列から要素を削除
JavaScriptには、とても便利な関数、splice()が存在する。 誰が考えたか分からないが、非常に便利である。 splice()関数は二つの機能を持つ。
- 削除機能
- 削除した位置に、要素を追加
まず、削除機能がある。配列から要素を削除する機能である。 その削除機能のオプションとして、「削除した位置に、新しい要素を追加」できる。 便利である。一度に2つの機能を学習するのは大変である。まずは、 削除機能に注目して学習する。
001<script>
002
003//配列を宣言
004const plans = [ "Tea" , "Walk" , "Movie" ];
005
006//配列[1]を削除
007plans.splice ( 1 , 1 ) ;
008
009//表示
010alert ( plans.join ( "," ) ) ;
011
012</script>
002
003//配列を宣言
004const plans = [ "Tea" , "Walk" , "Movie" ];
005
006//配列[1]を削除
007plans.splice ( 1 , 1 ) ;
008
009//表示
010alert ( plans.join ( "," ) ) ;
011
012</script>
プログラムを実行すると、「Tea,Movie」と表示する。
splice()関数の利用方法 配列.splice ( [削除開始位置] , [削除する要素数] ) ;
splice()関数の削除機能に注目して解説する。
まず、splice()関数の第一引数に「削除開始位置」を指定する。
この値は、配列の「インデックス」を参考に指定すれば良い。
第二引数は、「削除する要素の数」を指定する。
要素を二つ削除する場合、「2」を指定する。
では、プログラムを解説する。
001<script>
002
003//配列を宣言
004const plans = [ "Tea" , "Walk" , "Movie" ];
005
006//配列[1]を削除
007plans.splice ( 1 , 1 ) ;
002
003//配列を宣言
004const plans = [ "Tea" , "Walk" , "Movie" ];
005
006//配列[1]を削除
007plans.splice ( 1 , 1 ) ;
4行目で配列を作成して、7行目でsplice()関数を利用して配列から要素を削除する。 第一引数に「1」を渡す。これは、配列のインデックス「1」の要素から削除を開始するという意味である。 第二引数に「1」を渡す。これは、要素を一つ削除するという意味である。 つまり今回、インデックス「1」の要素が一つだけ削除される。
| インデックス | 値 |
| 0 | Tea |
| 1 | Walk |
| 2 | Movie |
今回、文字列「Walk」が配列から削除される。
001<script>
002
003//配列を宣言
004const plans = [ "Tea" , "Walk" , "Movie" ];
005
006//配列[1]を削除
007plans.splice ( 1 , 1 ) ;
008
009//表示
010alert ( plans.join ( "," ) ) ;
011
012</script>
002
003//配列を宣言
004const plans = [ "Tea" , "Walk" , "Movie" ];
005
006//配列[1]を削除
007plans.splice ( 1 , 1 ) ;
008
009//表示
010alert ( plans.join ( "," ) ) ;
011
012</script>
10行目で配列の状態を表示する。配列から文字列「Walk」は削除されているので、 文字列「Tea,Movie」が表示する。
splice()関数を利用して配列から複数の要素を削除する
splice()を利用して、配列から要素を二つ削除するプログラムを見る。
001<script>
002
003//配列を宣言
004const plans = [
005 "Tea" , "Walk" , "Movie" ,"Lunch" ];
006
007//[1]から2つの要素を削除
008plans.splice ( 1 , 2 ) ;
009
010//表示
011alert ( plans.join ( "," ) ) ;
012
013</script>
002
003//配列を宣言
004const plans = [
005 "Tea" , "Walk" , "Movie" ,"Lunch" ];
006
007//[1]から2つの要素を削除
008plans.splice ( 1 , 2 ) ;
009
010//表示
011alert ( plans.join ( "," ) ) ;
012
013</script>
4行目で変数plansを宣言して、配列を代入する。
| インデックス | 値 |
| 0 | Tea |
| 1 | Walk |
| 2 | Movie |
| 3 | Lunch |
変数plansの配列は、このような状態である。
8行目で、splice()関数を実行する。
第一引数は
「1」である。これは、インデックス「1」から要素を削除するという意味である。
第二引数は、「2」である。これは要素を「2」つ削除するという事である。
| インデックス | 値 |
| 0 | Tea |
| 1 | Walk |
| 2 | Movie |
| 3 | Lunch |
インデックス「1」から削除を開始して、要素数「2」という事は、 インデックス「1」と「2」が削除対象になる。
| インデックス | 値 |
| 0 | Tea |
| 1 | Lunch |
8行目でsplice()関数を実行すると、配列はこのような状態になる。
010//表示
011alert ( plans.join ( "," ) ) ;
011alert ( plans.join ( "," ) ) ;
12行目で配列plansの要素を表示すると「Tea,Lunch」と表示する。
splice()関数を利用して配列に要素を追加
splice()関数の利用方法。
splice()関数の利用方法 配列.splice ( [削除開始] , [要素数] , [新しい要素] ) ;
splice()関数の引数をまとめる。
| 第一引数 | 削除を開始するインデックス |
| 第二引数 | 削除する要素の数 |
| 第三引数 | 削除した位置に新しく追加する要素 |
第一引数に削除を開始する位置を指定する。
第二引数に削除する要素の数を指定する。ここまでは、これまでと同じである。
第三引数に注目する。
第三引数は「配列に追加する新しい要素」を指定する。
第三引数を指定すると、削除された要素の位置に、
新しい要素を追加できる（実は、第三引数以降の値が追加されるが、説明は省略する）。
プログラムを見る。
001<script>
002
003//配列を宣言
004const plans = [
005 "Tea" , "Walk" , "Movie" ,"Lunch" ];
006
007//[1]から2つの要素を削除
008//さらに値「"Dinner"」を追加
009plans.splice ( 1 , 2 , "Dinner" ) ;
010
011//表示
012alert ( plans.join ( "," ) ) ;
013
014</script>
002
003//配列を宣言
004const plans = [
005 "Tea" , "Walk" , "Movie" ,"Lunch" ];
006
007//[1]から2つの要素を削除
008//さらに値「"Dinner"」を追加
009plans.splice ( 1 , 2 , "Dinner" ) ;
010
011//表示
012alert ( plans.join ( "," ) ) ;
013
014</script>
4行目で変数plansを宣言して、配列を代入する。
| インデックス | 値 |
| 0 | Tea |
| 1 | Walk |
| 2 | Movie |
| 3 | Lunch |
変数plansの配列は、このような状態である。
9行目で、splice()関数を実行する。
第一引数は「1」、第二引数は「2」である。
つまり、インデックス「1」から削除を開始して、
配列の要素を「2」つ削除するという意味である。
| インデックス | 値 |
| 0 | Tea |
| 1 | Walk |
| 2 | Movie |
| 3 | Lunch |
インデックス「1」から削除を開始して、要素数「2」という事は、 インデックス「1」と「2」が削除対象になる。 しかしこんかい、第三引数を指定している。 第三引数は「新しく追加する要素」である。 こんかいは、文字列「Dinner」である。 この値を配列へ追加する。追加する位置は、削除開始位置、すなわちインデックス「1」である。
| インデックス | 値 |
| 0 | Tea |
| 1 | Dinner |
| 2 | Lunch |
9行目でsplice()関数を実行すると、配列plansはこのような状態になる。
011//表示
012alert ( plans.join ( "," ) ) ;
012alert ( plans.join ( "," ) ) ;
プログラムの最後で、配列plansの状態を表示する。 「Tea,Dinner,Lunch」と表示してプログラムは終了する。
まとめ
join()関数とは 配列の要素を文字列結合する。
join()関数の利用方法 配列.join ( [文字] ) ;
push()関数 配列の末尾に新しい要素を追加する。
push()関数の利用方法 配列.push( [新しい要素] ) ;
unshift()関数とは 配列の先頭に新しい要素を追加する
unshift()関数の利用方法 配列.unshift ( [新しい要素] ) ;
splice()関数の利用方法 配列.splice ( [削除開始] , [要素数] , [新しい要素] ) ;
splice()関数の引数をまとめる。| 第一引数 | 削除を開始するインデックス |
| 第二引数 | 削除する要素の数 |
| 第三引数 | 削除した位置に新しく追加する要素 |
