JavaScriptの配列とは?可変長のデータを格納するデータ構造

11, 2020-08-10

目次

JavaScriptの配列

JavaScriptには配列と言うよく使われるデータ型があります。
JavaScriptの配列を使うと、1つの変数(配列)に色々なデータを保存して持ち歩くことが出来るようになります。
今回はこれを紹介します。

具体的には↓を見ていきます。

  • 配列とは?

  • 配列の作り方

  • 配列の要素を参照する

  • 配列の長さを得る

  • 変数が配列かどうか調べる

  • 配列の末尾に値をプッシュする

  • 配列の先頭に値をプッシュする

  • 配列の末尾から値をポップする

  • 配列の先頭から値をポップする

  • CSVをパースして配列にする

配列とは?

JavaScriptの配列は可変長のデータ構造です。
配列にはデータをプッシュして入れたり、またはデータをポップして取り出すことができます。

それらの基本的な操作の他にも添え字で配列の要素を参照したりすることができます。
for文の添字で配列の要素を参照することで、その配列の要素を順に参照することもできます。

特徴としては配列内の要素のメモリ領域が連続した番地で確保されているという点があげられます。
配列内の要素1と要素2はメモリ上ではお隣さん同士なんですね。

配列はJavaScriptに限らず様々なプログラミング言語で実装されている普遍的なデータ構造で、人気があります。
配列の他にはリストやハッシュマップ、スタックなどがありますが、配列はその中でも最も基本的なデータ構造と言っていいでしょう。

配列を使えるようになることはプログラミングのスキルを上げるのに役立ちます。
配列は色々なシーンで使うことが出来る汎用的なデータ構造だからです。
配列をうまく使うことであなたのプログラムは洗練され、品質が上がることでしょう。

JavaScriptの配列を学んだ後はJavaScriptの連想配列についても学ぶといいかもしれません。
連想配列はキーと値をついにしたデータ構造で、これも人気があるデータ構造です。

配列の作り方

配列を作るには↓のように角カッコ([])を変数に代入します。
変数はletでもconstでもかまいません。

let arr = []
console.log(arr)
// [ ]

角カッコの中に値を入れておくと、その値が入った配列が作成されます。
値は何でも入れられます。
たとえば整数、文字列、null, オブジェクトなどなど。なんでも入ります。

let arr = [1, null, 'abc']
console.log(arr)
// [ 1, null, 'abc' ]

これらはArrayクラスをコンストラクトするのと同じです。
一般的にはArraynewするよりは角カッコのほうがよく使われます。

let arr = new Array(1, 2, 3)
console.log(arr)
// [ 1, 2, 3 ]

角カッコを使った場合もArrayクラスをコンストラクトした場合も、結果は同じになります。
角カッコのほうがタイプ数が少ないですね。

配列の要素を参照する

配列の要素を参照するには変数に対して角カッコ([])で整数の添え字でアクセスします。

let arr = [1, 2]
console.log(arr[0])  // 添字0でアクセス
// 1

↑の場合、変数arrは長さ2の配列です。
そしてarr[0]で配列の0番目の要素にアクセスしています。
添字に使う整数は↑のように0から始めることに注意してください。

添字のアクセスで、整数が範囲外だった場合はどうなるでしょうか。
たとえば↑の配列arrは長さが2ですが、これに添え字10とかでアクセスしてみます。

let arr = [1, 2]
console.log(arr[10])  // 範囲外の添字でアクセス
// undefined

配列に範囲外の添字でアクセスすると、結果は↑のようにundefinedになります。
これはJavaScriptっぽい挙動です。
他の言語では添字に関するエラーが飛んできたりします。

undefinedを取得するのを防ぎたい場合は後述するlengthプロパティを使って、添字アクセスする前に配列の長さをチェックしておくといいでしょう。
たとえば↓のようにです。

let arr = [1, 2]
const index = 10
if (arr.length < index) {
    console.log(arr[10])
}

参照する添字(index)が配列の長さより↓の場合は参照し、大きい場合は参照しないようにしています。
もっとも、↑の場合も添字が負数だった場合はundefinedを参照してしまうので注意が必要です。

配列の長さを得る

配列の長さを得るにはlengthプロパティを参照します。

let arr = [1, 2, 3]
arr.length
// 3

lengthプロパティは先述のように添字のアクセス時に使ったり、あとはfor文で使うことが多いプロパティです。
for文で使う場合を見てみましょう。

let arr = [1, 2, 3]

for (let i = 0; i < arr.length; i++) {
    console.log(arr[i])
}

↑のようにlengthプロパティは、添字の値と比較されることが多いプロパティです。

また、イディオムとして配列の末尾の要素を参照するときにも使われます。
たとえば↓のようにです。

let arr = [1, 2, 3]

console.log(arr[arr.length - 1])

↑のようにarr.length - 1とすることで、その配列の末尾の要素を参照できるようになります。
ただ、この参照方法では、配列の長さが0だった場合に演算結果が負数になってしまうので注意が必要です。

変数が配列かどうか調べる

変数が配列かどうか調べたい場合はArrayクラスの静的メソッドisArrayを使います。

let arr = []
console.log(Array.isArray(arr))
// true

typeofでは配列かどうか判定できないので注意しましょう。
ちなみにtypeofで配列を調べると↓のような結果になります。

let arr = []

console.log(typeof arr)
// object

結果はobjectになります。
このようにtypeofでは配列はオブジェクトと判定されます。
厳密に配列かどうか判定したい場合はArray.isArray()を使うようにしましょう。

配列の末尾に値をプッシュする

配列の末尾に値を押し込みたい場合はpush()メソッドを使います。

let arr = [1, 2]
arr.push(3)  // 配列の末尾3をプッシュ
console.log(arr)
// [ 1, 2, 3 ]

push()はJavaScriptの配列の操作で非常によく使われるメソッドの1つです。
push()の引数には配列に追加できるオブジェクトであれば何でも渡すことができます。
たとえば整数、実数、文字列, null, 配列、オブジェクトなどです。

arr.push(1)
arr.push(3.12)
arr.push('string')
arr.push(null)
arr.push([1, 2, 3])
arr.push(new Object())

push()を実行すると配列の長さが変化します。
この長さの変化は配列のlengthプロパティで知ることが可能です。
空の配列に値を3つ追加すれば、その配列の長さは3になるわけです。

let arr = []
arr.push(1)
arr.push(2)
arr.push(3)
console.log(arr.length)
// 3

push()for文と組み合わせてもよく使われます。
for文の添字を使って値を加工して、その結果を配列に保存するなどです。

let arr = []

for (let i = 0; i < 4; i++) {
    arr.push(i * i)
}

console.log(arr)
// [ 0, 1, 4, 9 ]

配列の先頭に値をプッシュする

配列の先頭に値を押し込みたい場合はunshift()を使います。

let arr = [1, 2]
arr.unshift(3)  // 配列の先頭に3を押し込む
console.log(arr)
// [ 3, 1, 2 ]

unshift()push()と違って、配列の先頭に値を押し込むメソッドです。
空の配列に順に大きくなる値を追加していくと、配列内のその順番は逆になっています。

let arr = []
arr.unshift(1)
arr.unshift(2)
arr.unshift(3)
console.log(arr)
// [ 3, 2, 1 ]

配列の末尾から値をポップする

配列の末尾から値をポップしたい場合はpop()メソッドを使います。

let arr = [1, 2]
let el = arr.pop()
console.log(el)
// 2

pop()メソッドを実行すると、配列内の末尾の要素が配列から取り除かれ、その要素がpop()の返り値として返されます。
空の配列に使った場合は、pop()メソッドはundefinedを返します。

let arr = []
let el = arr.pop()
console.log(el)
// undefined

pop()メソッドはpush()メソッドと並んで、JavaScriptの配列操作ではよく使われるメソッドです。
たとえば配列の末尾の要素から順に参照していって、最終的に配列の中身を空にしたいときなどは、↓のような定型文があります。

let arr = [1, 2, 3]

while (arr.length) {
    console.log(arr.pop())
}

出力結果は↓のようになります。

3
2
1

pop()メソッドで配列の要素をポップした場合も、配列のlengthプロパティの値は変化します。
↑のコードはその性質を利用したコードです。

配列の先頭から値をポップする

配列の先頭から値をポップしたい場合はshift()メソッドを使います。

let arr = [1, 2]
let el = arr.shift()
console.log(el)
// 1

こちらのshift()メソッドも、空の配列に使った場合はundefinedが返ります。

let arr = []
let el = arr.shift()
console.log(el)
// undefined

CSVをパースして配列にする

CSVなどの文字列をパースして配列にする場合は文字列のsplit()を使います。
split()は引数の文字列をセパレーター(区切り文字)として、文字列を分解する文字列のメソッドです。
split()の返り値は配列です。

let csv = '1,2,3'
let arr = csv.split(',')
console.log(arr)
// [ '1', '2', '3' ]

逆に配列をCSVにしたい場合は配列のjoin()メソッドを使います。
join()メソッドは引数の文字列をセパレーター(区切り文字)として配列の要素を文字列として結合するメソッドです。
join()の返り値は文字列です。

let arr = [1, 2, 3]
let csv = arr.join(',')
console.log(csv)
// '1,2,3'

ここで紹介したCSVのパースは簡易的なものです。
本格的なCSVを扱いたいなら専用のライブラリを使いましょう。

おわりに

JavaScriptの配列を使えるようになると、プログラムの制作が一段とはかどるでしょう。
この記事でJavaScriptの配列の基本的な使い方を学習し、あなたのプログラミングに役立ててみてください。

配列はともだち