配列はどの言語でも基本中の基本で、まず間違いなく使います。
という訳でJavaScriptでの配列の初期化や要素の追加方法についてまとめてみます。
このページの目次
配列の初期化
配列を作るには変数に対して [] を代入すれば配列になります。
|
1 |
var arr = []; |
また初期化と同時に要素を作ることも可能です。
例えば次は1,2,3,4,5の５つの要素で初期化する例
|
1 |
var arr = [1, 2, 3, 4, 5]; |
ちなみに配列として宣言されてない変数をいきなり配列かのように扱うのはNGです。
例えば次がそのNG例
|
1 2 |
var arr; arr[0] = 1; |
このように書いてしまうと次のようなエラーが出ます。
|
1 |
TypeError: Cannot set property '0' of undefined |
JavaScriptには型がなさそうで実はしっかり存在しています。
なので変数宣言時に配列だとしっかり分かる書き方をしなくてはなりません。
配列に値を代入したり要素を追加する方法
配列に値を代入したり要素を追加するのによく使う方法は次の４つ
- インデックスを指定して代入
- 配列の一番前に要素を追加
- 配列の一番最後に要素を追加
- 配列の途中にまとめて要素追加
この４つが基本的によく使うので詳しい使い方を紹介
インデックスを指定して代入
配列のある要素の値を代入するにはインデックスを指定するのが簡単です。
やり方は次のように [] の中にインデックス番号を指定して値を代入するだけ
|
1 |
arr[0] = 1; |
ただしインデックス番号というのは必ず 0 から始まります。
人間がものを数えるときは1から始まりますが、JavaScriptなどのプログラミンでは配列は 0 番目から始まることに要注意です。
なので要素数が１００個の配列があるとするならそのアクセス方法は・・・
- 配列の１番目にアクセスするならインデックス番号は 0
- 配列の２番目にアクセスするならインデックス番号は 1
- (3～99番目までも同様)
- 配列の100番目にアクセスするならインデックス番号は 99
・・・という風になるという訳です。
この数え方に慣れてないと予期せぬエラーが発生するのでまずは慣れましょう。
配列の一番前に要素を追加
配列の一番前に要素を追加するにはunshift関数が便利です。
これは配列に対して次のような感じで呼びだせます。
unshifに対して挿入したい値を渡すだけです。
実際にこれを使って配列の最初に要素を追加しているのが次のコード
|
1 2 3 4 |
var arr = [2, 3, 4, 5]; arr.unshift(1); console.log(arr); |
コンソールを見てみると最初に要素が追加されたことが分かります。
|
1 |
[ 1, 2, 3, 4, 5 ] |
以上が unshifl関数の使い方
要素を末尾ではなく先頭から追加していきたいときとかに使えます。
要素を一番最後に追加
unshift関数は一番前ですがその逆バージョンの関数もあります。
それがpush関数で配列に対して次のように呼び出せます。
要素を追加する場所が一番最後なだけで使い方はunshift関数と全く同じです。
例えば次が配列の最後に要素を追加しているコード例
|
1 2 3 4 |
var arr = [1, 2, 3, 4]; arr.push(5); console.log(arr); |
コンソールには次のように表示され要素が最後に追加されたことが分かります。
|
1 |
[ 1, 2, 3, 4, 5 ] |
このようにpush関数はunshift関数の逆バージョンです。
ループで配列の最後に要素を順々に追加するときなどに便利です。
配列の途中にまとめて要素追加
最後は配列の途中に要素が追加できるsplice関数です。
この関数は配列に対して次のように呼び出せます。
␣␣先頭から無視する要素個数,
␣␣第1引数から削除する要素個数,
␣␣第１引数以降に追加する要素(複数可),...
)
要素を追加するだけなら第２引数は 0 で問題ありません。
ただこれだけだと分かりにくいと思うので使い方は下のコード例を見てください。
例えば次が配列の２番目から２つだけ要素を追加するコード例
|
1 2 3 4 |
var arr = ['a', 'b', 'e']; arr.splice(2, 0, 'c', 'd'); console.log(arr); |
arr の 'b' 以降に 'c' と 'd' という要素を付け加えています。
なのでコンソールでの表示結果は次の通り
|
1 |
[ 'a', 'b', 'c', 'd', 'e' ] |
そしてさらにspliceに関してもう１つ例を上げると次のコード
|
1 2 3 4 5 |
let arr = [10, 20, 30, 60, 90, 100]; arr.splice(3, 0, 40, 50); arr.splice(6, 0, 70, 80); console.log(arr); |
もしspliceを２回以上使うなら直前のspliceで配列が変更されるのにも注意が必要です。
ちなみに上のコードでのコンソールの表示結果は次の通り
|
1 |
[ 10, 20, 30, 40, 50, 60, 70, 80, 90, 100 ] |
これは実際に使ってみないと動作が分かりにくいかもしれません。
ただ使い慣れると好きな場所に要素を追加できるので便利です。
配列にアクセスしたり検索するには
ここまでで配列の初期化や要素の追加方法について紹介しました。
色々な関数があるので活用していくと配列を扱うときに便利です。
そしてこれに加えて配列にアクセスしたり検索する方法も知っておくとさらに便利になります。
そのことについてが次の記事でまとめたのでそちらもどうぞ
配列を切り出したり条件で検索するのに役立ちます。
ここまでのまとめ
ここまでのことを簡単にまとめると次の通り
まず配列の初期化するときは必ず次の例のように [] の代入が必要
|
1 2 |
var arr = []; var arr = [1, 2, 3, 4, 5]; |
必ず配列だと分かる宣言の仕方をしないとだめです。
そして配列に要素を追加するのに使えるのが次の３つの関数
- unshift関数
配列の一番前に要素を追加
- push関数
配列の一番最後に要素を追加
- splice関数
配列の途中に複数の要素を追加
この３つが便利なので覚えておくとスマートなコードが書けるかもしれません。
配列は単純そうに見えて意外と奥が深いこともあります。
僕自身まだまだ配列の操作については知らないことがあるので勉強していきたいです。
ではでは(*￣▽￣)ﾉ~~
