配列とは
個数が1以上あるデータや個数がわからないデータは、配列で管理できます。
配列とは何か連続したデータのこと、くらいの認識で大丈夫です。
作成方法
配列は値を[]で囲み、値同士を,で区切ると作成できます。
[要素1, 要素2, etc...]
例えば、知っている果物の英単語をできるだけたくさん書いてみます。
このとき、以下のように配列を作成して書くことができます。
const fluits = ['apple', 'orange', 'grape', 'kiwi']
ここでは4つ挙げてみました。
インデックス
配列の要素はインデックスを使うことで取り出せます。
インデックスとは各要素に振られている番号で、その要素が何番目にあるかを示します。
この番号は0から始まります。
一番最初の要素が0、その次の要素が1、さらにその次の要素が2...という感じです。
['apple', 'orange', 'grape', 'kiwi']
// appleのインデックスは0
// orangeのインデックスは1
// grapeのインデックスは2
// ...と続いていく
ブラケット記法
特定のインデックスの要素を取得するには、ブラケット記法が使えます。
ブラケット記法は配列名[インデックス]という構文になっています。
const fluits = ['apple', 'orange', 'grape', 'kiwi']
fluits[0] // apple
fluits[1] // orange
// ...と続いていく
メソッド
作成した配列はArrayというオブジェクト型になっています。
Arrayオブジェクト=配列にはたくさんのメソッドが用意されており、追加の準備なしで便利な機能を使うことができます。
メソッドは配列の後に.メソッド名()で呼び出せます。
どんなメソッドがあるのかは後で紹介しますが、ここではpushメソッドを使ってみます。
const fluits = ['apple', 'orange', 'grape', 'kiwi']
// メソッドを呼び出す
fluits.push('remon')
console.log(fluits)
// ['apple', 'orange', 'grape', 'kiwi', 'remon']
pushメソッドは、配列の最後に要素を追加するためのメソッドです。
ここでは配列の最後に'remon'が追加されています。
基本的なメソッド
ここからは配列でよく使うと思うメソッドを紹介します。
forEach
forEachを使うと配列の要素を順番に使うことができます。
つまり、配列の要素でループします。
このメソッドは引数に関数を取ります。
引数に入れた関数は各ループでどんな処理をするかを決めるもので、forEachメソッドの呼び出しとともに自動で呼び出されます。
const array = ['要素1', '要素2']
array.forEach(elem => {
console.log(elem)
})
// 出力:
// 要素1
// 要素2
例えば先ほど定義したfluits配列があります。
この内容からfluits 0: apple、fluits 1: orangeのように、0から始まる番号と果物の英単語を一緒に出力する処理がこちらです。
const fluits = ['apple', 'orange', 'grape', 'kiwi']
// fluitsにはフルーツが、indexには要素のインデックスが入る
fluits.forEach((fluits, index) => {
console.log(`fluits ${index}: ${fluits}`)
})
// fluits 0: apple
// fluits 1: orange
// fluits 2: grape
// fluits 3: kiwi
なお、配列の値でループする方法にはforof文もあります。
詳しくはMDNや侍エンジニアをご覧ください。
includes
配列に特定の要素が含まれれているか調べられます。
includesは引数に含まれているか調べたい要素を取ります。
戻り値は真偽値で、含まれていたらtrue、含まれていなかったらfalseが返ってきます。
const fluits = ['apple', 'orange', 'grape', 'kiwi']
fluits.includes('apple') // true
fluits.includes('orange') // true
fluits.includes('banana') // false
push
配列の最後に値を追加します。
先ほど紹介したやつです。
pushは引数に追加したい要素を取ります。
戻り値は追加したあとの配列の長さですが、あまり使う機会はないかもしれません。
const fluits = ['apple', 'orange', 'grape', 'kiwi']
fluits.push('remon')
fluits.push('banana')
console.log(fluits)
// ['apple', 'orange', 'grape', 'kiwi', 'remon']
indexOf
ブラケット記法の逆で、要素のインデックスを取得できます。
indexOfは引数に調べたい要素を取ります。
ここに入れた要素と配列の要素が同じかどうかは、===を使ったときのように判定されます。
戻り値はその要素のインデックスです。
要素が見つからなかったら-1になります。
const fluits = ['apple', 'orange', 'grape', 'kiwi']
fluits.indexOf('orange') // 1
fluits.indexOf('apple') // 0
fluits.indexOf('果物じゃない文字列') // -1
なお、同じ要素が複数入っている場合は、最初にある要素のインデックスが返されます。
最後の要素のインデックスが必要な場合は代わりにlastIndefOfメソッドが使えます。
詳細はMDNをご覧ください。
特徴
ここからはJavaScriptの配列の特徴について話します。
使える長さはほぼ無限
配列の要素に入れられる長さはほぼ無限と言ってもいいと思います。
少なくとも、C言語のような制約はありません。
メモリの解放などはJavaScriptランタイムがいい感じにやってくれます。
この記事の計測結果によると、こんな感じになるようです。
V8 (Node.js) JavaScriptCore (osascript) 100663296 (0x6000000) greater than 268435456
JSCの上限はよくわかりませんでした。十分な時間をかければわかるのかもしれませんが、人間の寿命は有限なので……。
可変
JavaScriptの配列は可変（ミュータブル）です。
そのため、後から変更できます。
変更には先ほど紹介したpushメソッドやブラケット記法が使えます。
const fluits = ['apple', 'orange', 'grape', 'kiwi']
// インデックスが0の要素を変更する
fluits[0] = 'banana'
// 配列の最後に要素を追加する
fluits.push('remon')
console.log(fluits)
// ['banana', 'orange', 'grape', 'kiwi', 'remon']
// 初期化したときと変わってる
変更するためのメソッドを呼び出しているから当たり前だと思うかもしれませんが、JavaScriptじゃない言語だとたまにこうならないものもあります。