配列(Array)

[up] [prev] [next]

一覧

Array(), concat(), concat(), copyWithin(), delete, entries(), every(), fill(), filter(), find(), findIndex(), for (...), forEach(), from(), in, includes(), indexOf(), isArray(), join(), keys(), length, map(), of(), pop(), push(), reduce(), reduceRight(), reverse(), shift(), slice(), some(), sort(), splice(), toString(), toLocaleString(), unshift(), values()

配列の作成

array = [e1, e2, ...]

e1, e2, ...を要素とする配列を作成します。配列のインデックスは 0 から始まります。

JavaScript
var arr = ["Red", "Green", "Blue"];
console.log(arr);                     // => ["Red", "Green", "Blue"]
console.log(arr[0]);                  // => "Red"
console.log(arr[1]);                  // => "Green"
console.log(arr[2]);                  // => "Blue"
array = new Array()
array = new Array(n)
array = new Array(e1, e2, ...)

配列を作成するのに、以前は new Array() を使用していましたが、今ではあまり使用されません。

JavaScript
var arr1 = new Array();     // 要素が0個の配列を作成
var arr2 = new Array(3);    // 要素が3個の空配列を作成
var arr3 = new Array("Red", "Green", "Blue");  // var arr3 = ["Red", "Green", "Blue"]と等価
◆ Array.from(arrayLike[, mapFunc, [thisArg]])

ES2015(ES6) から追加されたもので、String, Set, Map などの配列ライクなオブジェクトや反復可能オブジェクト arrayLike から新しい配列を作成します。

JavaScript
var str = "ABC";
var arr1 = Array.from(str);
console.log(arr1);                  // => ["A", "B", "C"]

var set = new Set([123, "ABC"]);
var arr2 = Array.from(set);
console.log(arr2);                  // => [123, "ABC"]

var map = new Map([[1, 2], [2, 4], [4, 8]]);
var arr3 = Array.from(map);
console.log(arr3);                  // => [[1, 2], [2, 4], [4, 8]]

mapFunc は、配列を作成する際に各要素に対して実行されるマップ関数です。thisArg にはマップ関数で this で参照される値を指定します。

JavaScript
var arr = Array.from([1, 2, 3], function(x) { return(x * 2); });
console.log(arr);                  // => [2, 4, 6]
◆ Array.of(e1, e2, ...)

ES2015 で追加されたメソッドで、可変引数 e1, e2 ... を受け取り、新しい配列を作成します。ES2015(ES6) で定義されたもので、IE11 ではサポートされていません。

JavaScript
var arr = Array.of(1, 2, 3);
console.log(arr);                  // => [1, 2, 3]

new Array() とほぼ同じ動作ですが、引数が単一の数値の場合、new Array() は指定個数分の空配列を返すのに対し、Array.of() は常に引数の個数分の要素を持つ配列を返します。

JavaScript
var arr1 = new Array(3);
console.log(arr1);                  // => [empty, empty, empty]

var arr2 = Array.of(3);
console.log(arr2);                  // => [3]

多次元配列

以下のようにして多次元の配列も扱うことができます。

JavaScript
var arr = [];
for (i = 0; i > 3; i++) {
  arr[i] = [];
  for (j = 0; j > 4; j++) {
    arr[i][j] = i * 100 + j;
  }
}
console.log(arr[2][3]);                  // => 203

配列の長さ

array.length

配列要素の個数を得るには length プロパティを参照します。

JavaScript
var arr = ["Red", "Green", "Blue"];
console.log(arr.length);                  // => 3

length に 0 を代入することで、配列の要素をすべて削除することができます。

JavaScript
arr.length = 0;

配列のループ

◆ for (...)

下記の様にして配列の各要素に対して処理を行うことができます。

JavaScript
var arr = ["Red", "Green", "Blue"];
for (var i = 0; i < arr.length; i++) {
  console.log(arr[i]);                  // => "Red", "Green", "Blue"
}

下記の様に記述することもできます。

JavaScript
var arr = ["Red", "Green", "Blue"];
for (var i in arr) {
  console.log(arr[i]);                  // => "Red", "Green", "Blue"
}
array.forEach (callback[, this])

配列の各要素を引数にして callback を実行します。this はコールバック関数の中で this として参照される値です。コールバックの引数には、要素値(value)、要素のインデックス(index)、配列自体(array)が渡されます。

JavaScript
var arr = ["Red", "Green", "Blue"];
arr.forEach(function(value, index, array) {
  console.log(value);                  // => "Red", "Green", "Blue"
});
array.entries()
array.keys()
array.values()

array の各要素について、entries() は key と value からなるイテレータ、keys() は key のみからなるイテレータ、values() は value のみからなるイテレータを返します。ES2015(ES6) で追加された機能で、IE11 ではサポートされていません。

JavaScript
var arr = ["Red", "Green", "Blue"];
for (var elem of arr.entries()) {
  console.log(elem[0] + ":" + elem[1]);   // => "0:Red", "1:Green", "2:Blue"
}
for (var key of arr.keys()) {
  console.log(key);                       // => 0, 1, 2
}
for (var value of arr.values()) {
  console.log(value);                      // => "Red", "Green", "Blue"
}
array.map(callback[, this])

配列の各要素に対して callback を実行し、callback の戻り値からなる配列を返します。this はコールバック関数の中で this として参照される値です。コールバックの引数には、要素値(value)、要素のインデックス(index)、配列自体(array)が渡されます。下記の例は、配列要素の各要素を2倍にした配列を返します。ES5.1 で定義されたもので、IE9 から利用可能です。

JavaScript
var arr1 = [1, 2, 3, 4, 5];
var arr2 = arr1.map(function(value, index, array) {
  return value * 2;
});
console.log(arr2);                  // => [2, 4, 6, 8, 10]
array.reduce(callback[, initial])
array.reduceRight(callback[, initial])

配列の各要素に対して callback を実行し、最終的なアキュムレータの値を返します。コールバックの引数には、アキュムレータ(acc)、要素値(cur)、要素のインデックス(index)、配列自体(array)が渡されます。reduce() は要素の左から右へ、reduceRight() は右から左へむけて呼び出します。最初にコールバックが呼ばれた時、initial が指定されていればアキュムレータは initial が渡されます。initial が指定されていない場合は一つ目の要素の値がアキュムレータ値となり、二つ目の要素からコールバックが呼ばれます。二回目以降のコールバックでは、アキュムレータには前回のコールバックの戻り値が渡されます。最後のコールバックの戻り値が reduce() の戻り値となります。下記の例は、アキュムレータにそれまでの最大値を覚えておきながら、配列の中の最大値を返却します。ES5.1 で定義されたもので、IE9 から利用可能です。

JavaScript
var arr = [4, 3, 8, 2, 6];
var max = arr.reduce(function(acc, cur, index, array) {
  console.log(acc, cur, index, array);    // => 4 3 1 [4, 3, 8, 2, 6]
                                          // => 4 8 2 [4, 3, 8, 2, 6]
                                          // => 8 2 3 [4, 3, 8, 2, 6]
                                          // => 8 6 4 [4, 3, 8, 2, 6]
  return (acc < cur) ? cur : acc;
});
console.log(max);                  // => 8

配列の検査

array.indexOf(e1)

配列の中に e1 とマッチする要素が最初に出現するインデックスを返します。見つからない場合は -1 を返します。

JavaScript
var arr = ["Red", "Green", "Blue"];
console.log(arr.indexOf("Red"));       // => 0
console.log(arr.indexOf("Green"));     // => 1
console.log(arr.indexOf("Blue"));      // => 2
console.log(arr.indexOf("Yellow"));    // => -1
array.includes(e1)

ES2016(ES7) で追加されたメソッドで、要素にマッチするものの有無を true/false で返却します。indexOf() よりも直観的に有無を調べることができます。

JavaScript
var arr = ["Red", "Green", "Blue"];

if (arr.indexOf("Green") != -1) { ... }     // 古い書き方
if (arr.includes("Green")) { ... }          // ES2016以降の新しい書き方
◆ Array.isArray(value)

ES5.1 で追加されたメソッドで、value が配列か否かを true/false で返します。

JavaScript
console.log(Array.isArray("ABC"));           // false
console.log(Array.isArray(["A", "B", "C"]);  // true
index in array

該当のインデックスの要素が存在するかどうかを調べるには「インデックス in 配列」を用います。

JavaScript
var arr = ["Red", "Green", "Blue"];
console.log(2 in arr);                  // => true
console.log(3 in arr);                  // => false
array.every(callback[, this])
array.some(callback[, this])

every() は配列の各要素に対して callback を実行し、callback の戻り値がすべて真であれば、真を返します。this はコールバック関数の中で this として参照される値です。コールバックの引数には、要素値(value)、要素のインデックス(index)、配列自体(array)が渡されます。下記の例は、配列要素がすべて 80以上であることを確認しています。ES5.1 で定義されたもので、IE9 から利用可能です。

JavaScript
var arr = [89, 87, 93, 65, 88];
var bool = arr.every(function(value, index, array) {
  return (value >= 80);
});
console.log(bool);                  // => false

some() は、callback の戻り値がひとつでも真であれば真を返します。下記の例は、配列要素がひとつでも 90以上であることを確認しています。

JavaScript
var arr = [89, 87, 93, 65, 88];
var bool = arr.some(function(value, index, array) {
  return (value >= 90);
});
console.log(bool);                  // => true
array.find(callback[, this])
array.findIndex(callback[, this])

find() は配列の各要素に対して callback を実行し、callback の戻り値が最初に真となった要素の値を返します。this はコールバック関数の中で this として参照される値です。コールバックの引数には、要素値(value)、要素のインデックス(index)、配列自体(array)が渡されます。下記の例は、配列要素の中で最初に 90以上の要素を返します。ES5.1 で定義されたもので、IE9 から利用可能です。

JavaScript
var arr = [89, 87, 93, 65, 88];
var value = arr.find(function(value, index, array) {
  return (value >= 90);
});
console.log(value);                  // => 93

findIndex() は見つかった要素のインデックスを返します。

JavaScript
var arr = [89, 87, 93, 65, 88];
var index = arr.findIndex(function(value, index, array) {
  return (value >= 90);
});
console.log(index);                  // => 2

配列の連結

array.concat(array2, ...)

arrayarray2 を連結した配列を返します。array は変更されません。引数に複数指定することも可能です。

JavaScript
var arr1 = ["Red", "Green"];
var arr2 = ["Blue", "Yellow"];
var arr3 = arr1.concat(arr2);
console.log(arr3);              // => ["Red", "Green", "Blue", "Yellow"]
array.join([separator])

array の各要素の値を separator で連結した文字列を返します。separator を省略した場合は通常カンマ(,)で連結されますが、JavaScript のバージョンによって動作が異なるので省略しない方が無難です。array は変更されません。

JavaScript
var arr = ["2000", "12", "31"];
var str = arr.join("/");
console.log(str);              // => "2000/12/31"

配列要素の取り出しと追加

array.unshift(e1, e2, ...) (N4)
array.push(e1, e2, ...) (N4)

unshift() は array の先頭に e1, e2, ... の配列要素を加えます。push() は array の最後に配列要素を加えます。戻り値は JavaScript のバージョンによって異なります。

JavaScript
var arr = ["Green"];
arr.unshift("Red");         // => ["Red", "Green"]
arr.push("Blue");           // => ["Red", "Green", "Blue"]
array.shift() (N4)
array.pop() (N4)

shift() は array の最初の要素を削除します。pop() は array の最後の要素を削除します。array 自身が変更されます。戻り値は削除した値となります。

JavaScript
var arr = ["Red", "Green", "Blue"];
arr.shift();                   // => ["Green", "Blue"]
arr.pop();                     // => ["Green"]
array.splice(start, n, e1, e2, ...) (N4)

0 から数えて、start 番目から n 個の要素を削除し、その代わりに e1, e2, ...を値とする要素を埋め込みます。戻り値は JavaScript のバージョンによって異なります。

JavaScript
var arr = ["A", "B", "C", "D", "E", "F", "G"];
arr.splice(2, 3, "X", "Y", "Z");
console.log(arr);              // => ["A", "B", "X", "Y", "Z", "F", "G"]
array.slice(start [, end])

0 から数えて、start 番目~ end - 1 番目までの要素を抜き出した配列を返します。end を省略した場合は最後までの要素を返します。array は変化しません。

JavaScript
var arr = ["A", "B", "C", "D", "E", "F", "G"];
console.log(arr.slice(2, 4));    // => ["C", "D"]
◆ delete array[n]

要素を削除するには delete を用います。この場合、arr[1] は undefined になりますが、arr[0] や arr[2] はそのまま残ります。配列要素を削除するには、array.splice() を用いるのが一般的です。

JavaScript
var arr = ["Red", "Green", "Blue"];
delete arr[1];
console.log(arr);                     // => ["Red", empty, "Blue"]
console.log(arr[0]);                  // => "Red"
console.log(arr[1]);                  // => undefined
console.log(arr[2]);                  // => "Blue"
array.filter(callback[, this])

配列の各要素に対して callback を実行し、callback の戻り値が真であるものの要素からなる配列を返します。this はコールバック関数の中で this として参照される値です。コールバックの引数には、要素値(value)、要素のインデックス(index)、配列自体(array)が渡されます。下記の例は、配列要素から80以上のものを抜き出しています。ES5.1 で定義されたもので、IE9 から利用可能です。

JavaScript
var arr1 = [89, 87, 93, 65, 88];
var arr2 = arr1.filter(function(value, index, array) {
  return (value >= 80);
});
console.log(arr2);                  // => [89, 87, 93, 88]

配列の並べ替え

array.sort([func])

array をソートしてその結果の配列を返します。array 自身がソートされます。func で比較関数を指定することも可能です。比較関数では負数、0、正数によって順序を返すようにします。

JavaScript
var arr = [3, 7, 8, 1];
arr.sort();
console.log(arr);                  // => [1, 3, 7, 8]

ソート関数を指定することもできます。ソート関数では等しければ 0 を、小さければ負の値を、大きければ正の値を返します。下記の例では、大文字・小文字を無視して文字列をソートしています。

JavaScript
function hikaku(a, b) {
  var str1 = a.toUpperCase();
  var str2 = b.toUpperCase();
  if (str1 == str2) { return 0; }
  if (str1 > str2) { return -1; }
  if (str1 < str2) { return 1; }
}

var arr = ["a", "x", "B", "y", "c", "Z"];
arr.sort(hikaku);
console.log(arr);           // => ["a", "B", "c", "x", "y", "Z"]
array.reverse()

array を逆順に並べ替えてその結果の配列を返します。array 自身が並べ替えられます。

JavaScript
var arr = ["Red", "Green", "Blue"];
arr.reverse();
console.log(arr);           // => ["Blue", "Green", "Red"]

配列から文字列への変換

array.toString()

配列を文字列に変換します。

JavaScript
var arr = [1, 2, 3, "A", "B", "C"];
arr.toString();        // => "1,2,3,A,B,C"
array.toLocaleString([locales[, options]])

配列をロケールに応じた文字列に変換します。

JavaScript
var arr = [1, 'A', new Date('31 Dec 1999 14:59:59 UTC')];
var str = arr.toLocaleString('ja', {timeZone: "Asia/Tokyo"});
console.log(str);        // => "1,A,1999/12/31 23:59:59"
arr.toString();

配列要素の変更

array.fill(value[, start[, end]])

0から数えて start番目から end - 1番目の要素の値を value に置換します。array 自身を書き換えます。start が省略された場合は 0番目から、end が省略された場合は最後までを置換します。ES2015(ES6) で追加された機能で、IE11 ではサポートされていません。

JavaScript
var arr = ["0", "1", "2", "3", "4", "5"];
arr.fill("A", 2, 5);
console.log(arr);           // => ["0", "1", "A", "A", "A", "5"]
array.copyWithin(target[, start[, end]])

start番目から end - 1番目の要素を、target 番目からの要素と置き換えます。array 自体を書き換えます。start が省略された場合は 0番目から、end が省略された場合は最後までをコピーします。下記の例では、0から数えて8番目から 10-1=9番目の要素を、2番目からの要素にコピーしています。ES2015(ES6) で追加された機能で、IE11 ではサポートされていません。

JavaScript
var arr = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
arr.copyWithin(2, 8, 10);
console.log(arr);    // => ["0", "1", "8", "9", "4", "5", "6", "7", "8", "9"]

[up] [prev] [next]
Copyright (C) 1996-2019 杜甫々
改訂版初版:2001年5月20日、最終更新:2019年2月24日
http://www.tohoho-web.com/js/array.htm