JavaScript の Array クラスはグローバルオブジェクトで、高水準、リスト風のオブジェクトである配列の構築に使用されます。
配列はリストのようなオブジェクトであり、そのプロトタイプは配列に対して横断的な操作や変更を行うメソッドを持っています。 JavaScript の配列は、要素数も要素の型も固定されていません。配列の長さは常に可変であり、データを連続しない位置に格納できるため、 JavaScript の配列は密であることが保証されていません。これはプログラマーの使い方次第です。一般に、これらは便利な特性です。しかし、もし特定の用途で望ましくないのであれば、型付き配列を使用したほうが良いかもしれません。
配列は (連想配列のように) 要素の添字に文字列を使うことはできず、整数を使う必要があります。整数以外によってブラケット構文 (またはドット構文) を使用して設定やアクセスを行うと、配列のリスト自身の要素を設定したり取得したりすることはできませんが、その配列のオブジェクトプロパティ集合に関連付けられた変数に設定またはアクセスすることになります。配列のオブジェクトプロパティと配列リストの要素は異なり、配列の走査や変更の操作を名前付きプロパティに適用することはできません。
配列を作成する
let fruits = ['りんご', 'バナナ'] console.log(fruits.length) // 2
位置を使用して配列にアクセスする
let first = fruits[0] // りんご let last = fruits[fruits.length - 1] // バナナ
配列のループ処理
fruits.forEach(function(item, index, array) {
console.log(item, index)
})
// りんご 0
// バナナ 1
配列の末尾に要素を追加する
let newLength = fruits.push('みかん')
// ["りんご", "バナナ", "みかん"]
配列の末尾の要素を削除する
let last = fruits.pop() // 配列の末尾の要素 "みかん" を削除 // ["りんご", "バナナ"]
配列の先頭の要素を削除する
let first = fruits.shift() // 配列の先頭の要素"りんご" を削除 // ["バナナ"]
配列の先頭に要素を追加する
let newLength = fruits.unshift('いちご') // 配列の先頭に追加
// ["いちご", "バナナ"]
要素の添字を取得する
fruits.push('マンゴー')
// ["いちご", "バナナ", "マンゴー"]
let pos = fruits.indexOf('バナナ')
// 1
位置を指定して要素を削除する
let removedItem = fruits.splice(pos, 1) // 要素を削除する方法 // ["いちご", "マンゴー"]
位置から複数の要素を削除する
let vegetables = ['キャベツ', 'かぶ', '大根', 'にんじん'] console.log(vegetables) // ["キャベツ", "かぶ", "大根", "にんじん"] let pos = 1 let n = 2 let removedItems = vegetables.splice(pos, n) // 複数の要素を削除するには、 n で削除する要素数を定義します // 指定位置（pos）以降から n 個分の要素が削除されます console.log(vegetables) // ["Cabbage", "Carrot"] (元の配列が変化) console.log(removedItems) // ["Turnip", "Radish"]
配列をコピーする
let shallowCopy = fruits.slice() // 配列のコピーを作成できます // ["いちご", "マンゴー"]
JavaScript の配列の添字は 0 から始まるので、配列の最初の要素は添字 0 の位置にあります。そして、最後の要素のインデックスは {{jsxref("Array.length", "length")}} プロパティの値から 1 を引いた値になります。
不正なインデックス番号を使った場合は undefined を返します。
let arr = ['最初の要素', '2 番目の要素', '最後の要素'] console.log(arr[0]) // ログ : "最初の要素" console.log(arr[1]) // ログ : "2 番目の要素" console.log(arr[arr.length - 1]) // ログ : "最後の要素"
toString が一つのプロパティであるのと同様に (ただし厳密には toString() はメソッドですが)、配列における配列要素はオブジェクトのプロパティです。しかし、次のように配列にアクセスしようとすると、プロパティ名が妥当でないため、構文エラーが発生します。
console.log(arr.0) // 構文エラー
これは、JavaScript の配列とそのプロパティに限った話ではありません。数字から始まるプロパティは、ドット演算子を用いて参照できないため、ブラケット記法を用いる必要があります。
例えば 3d というプロパティを持つオブジェクトがあった場合は、ドット記法ではなくブラケット記法を用いて参照しなければなりません。
let years = [1950, 1960, 1970, 1980, 1990, 2000, 2010] console.log(years.0) // 構文エラー console.log(years[0]) // 正しく動作
renderer.3d.setTexture(model, 'character.png') // 構文エラー renderer['3d'].setTexture(model, 'character.png') // 正しく動作
3d の例では、'3d' は引用符で括らなければならないことに注意してください。 JavaScript 配列の添字も同様に引用符でくくることができますが (例えば years[2] でなく years['2'])、そうする必要はないでしょう。
years[2] の 2 は最終的に、JavaScript エンジンが内部的に toString メソッドで型変換することで文字列にされます。これは '2' と '02' が years オブジェクトの異なる場所を指すようにするためでです。このため、以下の例は true がログ出力されます。
console.log(years['2'] != years['02'])
JavaScript の配列の {{jsxref("Array.length", "length")}} プロパティと数値プロパティは関連しています。
配列の一部の組込みメソッド (例えば {{jsxref("Array.join", "join()")}}, {{jsxref("Array.slice", "slice()")}}, {{jsxref("Array.indexOf", "indexOf()")}}, など) は、配列の {{jsxref("Array.length", "length")}} プロパティの値はメソッドの呼び出し時の値を考慮します。
他にも (例えば {{jsxref("Array.push", "push()")}}, {{jsxref("Array.splice", "splice()")}}, 等)、結果として配列の {{jsxref("Array.length", "length")}} プロパティを更新するメソッドがあります。
var fruits = []
fruits.push('バナナ', 'りんご', 'もも')
console.log(fruits.length) // 3
JavaScript の配列に、配列の添字として妥当なプロパティであり、かつ現在の配列の範囲の外にある添字を設定すると、エンジンは配列の {{jsxref("Array.length", "length")}} プロパティを更新します。
fruits[5] = 'マンゴー' console.log(fruits[5]) // 'マンゴー' console.log(Object.keys(fruits)) // ['0', '1', '2', '5'] console.log(fruits.length) // 6
{{jsxref("Array.length", "length")}} を増加させてみます。
fruits.length = 10 console.log(fruits) // ['バナナ', 'りんご', 'もも', undefined, 'マンゴー', <5 empty items>] console.log(Object.keys(fruits)) // ['0', '1', '2', '5'] console.log(fruits.length) // 10 console.log(fruits[8]) // undefined
一方、 {{jsxref("Array.length", "length")}} プロパティの数を減らすと、要素が削除されます。
fruits.length = 2 console.log(Object.keys(fruits)) // ['0', '1'] console.log(fruits.length) // 2
これらについては {{jsxref("Array.length")}} のページで詳しく解説します。
正規表現 ({{jsxref("RegExp")}}) と文字列の一致の結果から配列を生成することができます。この配列には、プロパティと、一致した者に関する情報を提供する要素を持ちます。このような配列は {{jsxref("RegExp.exec()")}}, {{jsxref("String.match()")}}, {{jsxref("String.replace()")}} から返されます。
これらのプロパティと要素を理解しやすくするために、以下の例と表を参照してください。
/ 1文字の d と、続く1文字以上の b と、続く1文字の d に一致します
// 一致した b およびそれに続く d を記憶します
// 大文字小文字は区別しません
const myRe = /d(b+)(d)/i
const myArray = myRe.exec('cdbBdbsbz')
この一致から返されるプロパティと要素は次の通りです。
| プロパティまたは要素 | 説明 | 例 |
|---|---|---|
input{{ReadOnlyInline}} |
正規表現が一致の文字列を反映する読み取り専用プロパティです。 | "cdbBdbsbz" |
index{{ReadOnlyInline}} |
文字列中で一致場所を、0 から始まる位置で示します。 | 1 |
[0]{{ReadOnlyInline}} |
最後にマッチした文字列です。 | "dbBd" |
[1], ...[n]{{ReadOnlyInline}} |
正規表現に含まれる場合、括弧で囲まれた一致た部分文字列を指定する読み取り専用の要素です。括弧で囲まれた部分文字列の数は無制限です。 | [1]: "bB" |
Array オブジェクトを生成します。Array インスタンスを生成します。true を、配列でなければ false を返します。Array インスタンスを生成します。with バインディングのスコープから除外されるプロパティ名を保持するシンボル。Array Iterator オブジェクトを返します。このオブジェクトは、配列中の各インデックスに対する key/value ペアを保持しています。true を返します。true を返す、配列中の要素を格納した新しい配列を生成します。undefined を返します。-1 を返します。true または false で返します。-1 を返します。Array Iterator を返します。このオブジェクトは配列中の各添字のキーを保持します。-1 を返します。length を返します。true を返します。length を返します。Array Iterator オブジェクトを返します。このオブジェクトは、配列中の各添字の値を保持します。Array Iterator オブジェクトを返します。このオブジェクトは、配列中の各添字の値を保持します。次の例では、 msgArray を長さ 0 で生成し、 msgArray[0] と msgArray[99] に値を設定、その後配列の length が 100 である事を確認しています。
let msgArray = []
msgArray[0] = 'Hello'
msgArray[99] = 'world'
if (msgArray.length === 100) {
console.log("配列の length は 100 です。")
}
以下では、文字列の 2 次元配列としてチェスボードを生成しています。最初の動きは 'p' を board[6][4] から board[4][4] にコピーすることでなされます。古い位置 [6][4] は空白にされます。
let board = [
['R','N','B','Q','K','B','N','R'],
['P','P','P','P','P','P','P','P'],
[' ',' ',' ',' ',' ',' ',' ',' '],
[' ',' ',' ',' ',' ',' ',' ',' '],
[' ',' ',' ',' ',' ',' ',' ',' '],
[' ',' ',' ',' ',' ',' ',' ',' '],
['p','p','p','p','p','p','p','p'],
['r','n','b','q','k','b','n','r'] ]
console.log(board.join('\n') + '\n\n')
// キングの前のポーンを 2 つ前へ移動
board[4][4] = board[6][4]
board[6][4] = ' '
console.log(board.join('\n'))
出力を以下に示します。
R,N,B,Q,K,B,N,R P,P,P,P,P,P,P,P , , , , , , , , , , , , , , , , , , , , , , , , , , , , p,p,p,p,p,p,p,p r,n,b,q,k,b,n,r R,N,B,Q,K,B,N,R P,P,P,P,P,P,P,P , , , , , , , , , , , , , , , , , ,p, , , , , , , , , , p,p,p,p, ,p,p,p r,n,b,q,k,b,n,r
values = []
for (let x = 0; x < 10; x++){
values.push([
2 ** x,
2 * x ** 2
])
}
console.table(values)
結果は次のようになります。
0 1 0 1 2 2 2 4 8 3 8 18 4 16 32 5 32 50 6 64 72 7 128 98 8 256 128 9 512 162
(最初の列は要素の添字です)
| 仕様書 | 初回発行 |
|---|---|
| {{SpecName('ESDraft', '#sec-array-objects', 'Array')}} | ECMAScript 1 |
{{Compat("javascript.builtins.Array")}}