Array

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 の位置にあります。そして、最後の要素のインデックスは 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'])

length と数値プロパティとの関係

JavaScript の配列の length プロパティと数値プロパティは関連しています。

配列の一部の組込みメソッド (例えば join(), slice(), indexOf(), など) は、配列の length プロパティの値はメソッドの呼び出し時の値を考慮します。

他にも (例えば push(), splice(), 等)、結果として配列の length プロパティを更新するメソッドがあります。

var fruits = []
fruits.push('バナナ', 'りんご', 'もも')

console.log(fruits.length) // 3

JavaScript の配列に、配列の添字として妥当なプロパティであり、かつ現在の配列の範囲の外にある添字を設定すると、エンジンは配列の length プロパティを更新します。

fruits[5] = 'マンゴー'
console.log(fruits[5])            // 'マンゴー'
console.log(Object.keys(fruits))  // ['0', '1', '2', '5']
console.log(fruits.length)        // 6

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

一方、 length プロパティの数を減らすと、要素が削除されます。

fruits.length = 2
console.log(Object.keys(fruits)) // ['0', '1']
console.log(fruits.length)       // 2

これらについては Array.length のページで詳しく解説します。

match の結果を利用して配列を作成

正規表現 (RegExp) と文字列の一致の結果から配列を生成することができます。この配列には、プロパティと、一致した者に関する情報を提供する要素を持ちます。このような配列は RegExp.exec(), String.match(), String.replace() から返されます。

これらのプロパティと要素を理解しやすくするために、以下の例と表を参照してください。

/ 1文字の d と、続く1文字以上の b と、続く1文字の d に一致します
// 一致した b およびそれに続く d を記憶します
// 大文字小文字は区別しません

const myRe = /d(b+)(d)/i
const myArray = myRe.exec('cdbBdbsbz')

この一致から返されるプロパティと要素は次の通りです。

コンストラクター

Array()

新しい Array オブジェクトを生成します。

静的プロパティ

get Array[@@species]

コンストラクター関数。派生オブジェクトを生成する時に使われます。

静的メソッド

Array.from()

配列風 (array-like) または反復可能 (iterable) オブジェクトから新しい Array インスタンスを生成します。

Array.isArray()

配列であれば true を、配列でなければ false を返します。

Array.of()

可変個の引数から、引数の個数や型に関わらず、新しい Array インスタンスを生成します。

インスタンスプロパティ

Array.prototype.length

配列内の要素数を反映します。

Array.prototype[@@unscopables]

with バインディングのスコープから除外されるプロパティ名を保持するシンボル。

インスタンスメソッド

Array.prototype.concat()

この配列に他の配列や値を結合して新しい配列を返します。

Array.prototype.copyWithin()

配列内で配列内の連続した要素をコピーします。

Array.prototype.entries()

新しい Array Iterator オブジェクトを返します。このオブジェクトは、配列中の各インデックスに対する key/value ペアを保持しています。

Array.prototype.every()

指定したテスト関数を配列中のすべての要素が満たした場合に true を返します。

Array.prototype.fill()

配列内の指定した開始位置から終了位置までの要素を固定値で埋めます。

Array.prototype.filter()

指定したフィルタリング関数が true を返す、配列中の要素を格納した新しい配列を生成します。

Array.prototype.find()

指定したテスト関数を満たす、配列中の要素の値を返します。1 個も見つからない場合は undefined を返します。

Array.prototype.findIndex()

指定したテスト関数を満たす、配列中の要素のインデックスを返します。1 個も見つからない場合は -1 を返します。

Array.prototype.forEach()

配列中のそれぞれの要素について関数を呼び出します。

Array.prototype.includes()

この配列が特定の要素を含むかどうか判定し、その結果を true または false で返します。

Array.prototype.indexOf()

指定された値と等しい値を持つ最初の (添字の一番小さい) 要素の添字を返します。見つからない場合、-1 を返します。

Array.prototype.join()

配列のすべての要素を結合した文字列を返します。

Array.prototype.keys()

新しい Array Iterator を返します。このオブジェクトは配列中の各添字のキーを保持します。

Array.prototype.lastIndexOf()

指定された値と等しい値を持つ最後の (添字の一番大きい) 要素の添字を返します。見つからない場合、-1 を返します。

Array.prototype.map()

配列内のすべての要素に対して与えられた関数を呼び出し、その結果を格納した新しい配列を生成します。

Array.prototype.pop()

配列から最後の要素を取り除き、返値として返します。

Array.prototype.push()

配列の最後に 1 個以上の要素を追加し、新しい配列の length を返します。

Array.prototype.reduce()

アキュムレーターと配列内のすべての要素に対して (左から右の順で) 関数を適用し、単一の値に還元します。

Array.prototype.reduceRight()

アキュムレーターと配列内のすべての要素に対して (右から左の順で) 関数を適用し、単一の値に還元します。

Array.prototype.reverse()

配列の要素の順番を逆転させます (最初の要素は最後に、最後の要素は最初になります)。

Array.prototype.shift()

配列から最初の要素を取り除き、その要素を返します。

Array.prototype.slice()

配列の一部を取り出して新しい配列として返します。

Array.prototype.some()

指定したテスト関数を配列中の少なくとも 1 個の要素が満たした場合に true を返します。

Array.prototype.sort()

配列内で要素を整列し、配列を返します。

Array.prototype.splice()

配列に対して複数の要素を追加したり取り除いたりします。

Array.prototype.toLocaleString()

配列とその要素を表すロケールに従った文字列を返します。Object.prototype.toLocaleString() メソッドを上書きします。

Array.prototype.toString()

配列とその要素を表す文字列を返します。Object.prototype.toString() メソッドを上書きしています。

Array.prototype.unshift()

配列の最初に 1 個以上の要素を追加し、配列の変更後の length を返します。

Array.prototype.values()

新しい Array Iterator オブジェクトを返します。このオブジェクトは、配列中の各添字の値を保持します。

Array.prototype[@@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 次元配列を生成する

以下では、文字列の 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

(最初の列は要素の添字です)

仕様書

ブラウザーの互換性

関連情報

• From the JavaScript Guide:
  • “Indexing object properties”
  • “Indexed collections: Array object”
• 型付き配列