配列（Array）
配列の作成
array = [e1, e2, ...]
e1, e2, ...を要素とする配列を作成します。配列のインデックスは 0 から始まります。
const 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() を使用していましたが、今ではあまり使用されません。
const arr1 = new Array(); // 要素が0個の配列を作成 const arr2 = new Array(3); // 要素が3個の空配列を作成 const arr3 = new Array("Red", "Green", "Blue"); // const arr3 = ["Red", "Green", "Blue"]と等価
Array.from(arrayLike[, mapFunc, [thisArg]])
ES2015(ES6) から追加されたもので、String, Set, Map などの配列ライクなオブジェクトや反復可能オブジェクト arrayLike から新しい配列を作成します。
const str = "ABC"; const arr1 = Array.from(str); console.log(arr1); // => ["A", "B", "C"] const set = new Set([123, "ABC"]); const arr2 = Array.from(set); console.log(arr2); // => [123, "ABC"] const map = new Map([[1, 2], [2, 4], [4, 8]]); const arr3 = Array.from(map); console.log(arr3); // => [[1, 2], [2, 4], [4, 8]]
mapFunc は、配列を作成する際に各要素に対して実行されるマップ関数です。thisArg にはマップ関数で this で参照される値を指定します。
const 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 ではサポートされていません。
const arr = Array.of(1, 2, 3);
console.log(arr); // => [1, 2, 3]
多次元配列
以下のようにして多次元の配列も扱うことができます。
const arr = [];
for (var i = 0; i < 3; i++) {
arr[i] = [];
for (var j = 0; j < 4; j++) {
arr[i][j] = i * 100 + j;
}
}
console.log(arr[2][3]); // => 203
配列の長さ
array.length
配列要素の個数を得るには length プロパティを参照します。
const arr = ["Red", "Green", "Blue"];
console.log(arr.length); // => 3
length に 0 を代入することで、配列の要素をすべて削除することができます。
arr.length = 0;
配列のループ
for (...)
下記の様にして配列の各要素に対して処理を行うことができます。
const arr = ["Red", "Green", "Blue"];
for (var i = 0; i < arr.length; i++) {
console.log(arr[i]); // => "Red", "Green", "Blue"
}
下記の様に記述することもできます。
const arr = ["Red", "Green", "Blue"];
for (var i in arr) {
console.log(arr[i]); // => "Red", "Green", "Blue"
}
下記の様に記述することもできます。
const arr = ["Red", "Green", "Blue"];
for (var n of arr) {
console.log(n); // => "Red", "Green", "Blue"
}
array.forEach (callback[, this])
配列の各要素を引数にして callback 関数を実行します。this はコールバック関数の中で this として参照される値です。コールバックの引数には、要素値(value)、要素のインデックス(index)、配列自体(array)が渡されます。
const arr = ["Red", "Green", "Blue"];
arr.forEach(function(value, index, array) {
console.log(value); // => "Red", "Green", "Blue"
});
callback はアロー関数を用いて下記の様にも記述できます。
const arr = ["Red", "Green", "Blue"];
arr.forEach((value, index, array) => {
console.log(value);
});
array.entries()
array.keys()
array.values()
array の各要素について、entries() は key と value からなるイテレーター、keys() は key のみからなるイテレーター、values() は value のみからなるイテレーターを返します。ES2015(ES6) で追加された機能で、IE11 ではサポートされていません。
const 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 から利用可能です。
const arr1 = [1, 2, 3, 4, 5];
const arr2 = arr1.map(function(value, index, array) {
return value * 2;
});
console.log(arr2); // => [2, 4, 6, 8, 10]
array.reduce(func, initial)
配列の各要素に対して関数 func を実行します。関数の引数には、アキュムレータ(acc)、要素値(value)、要素のインデックス(index)、配列自体(array) が渡されます。initial を指定した場合、1回目の関数呼び出し時の acc の値は initial となります。initial を省略した場合、最初の要素に対する関数は呼ばれず、最初の要素の値を acc として 2個目の要素に対する関数が呼ばれます。次回以降は関数の戻り値を acc として次の要素に対する関数が呼ばれ、最後の要素に対する関数の戻り値が reduce() の戻り値となります。下記の例では各要素を2倍した合計を求めています。
const arr = [100, 200, 300];
const n = arr.reduce((acc, value, index, array) => {
console.log(`acc:${acc} value:${value} index:${index} array:${array}`);
return acc + value * 2;
}, 0);
console.log(n);
// => acc: 0 value:100 index:0 array:100,200,300
// => acc: 200 value:200 index:1 array:100,200,300
// => acc: 600 value:300 index:2 array:100,200,300
// => 1200
initial の 0 を指定しない場合は、100 + 200*2 + 300*2 = 1100 となり、1200 とはならない点に注意してください。
const arr = [100, 200, 300];
const n = arr.reduce((acc, value, index, array) => {
console.log(`acc:${acc} value:${value} index:${index} array:${array}`);
return acc + value * 2;
});
console.log(n);
// => acc: 100 value:200 index:1 array:100,200,300
// => acc: 500 value:300 index:2 array:100,200,300
// => 1100
array.reduceRight(callback[, initial])
要素を右から順に処理していく以外は reduce() と同様です。
const arr = [100, 200, 300];
const n = arr.reduceRight((acc, value, index, array) => {
console.log(`acc:${acc} value:${value} index:${index} array:${array}`);
return acc + value * 2;
}, 0);
console.log(n);
// => acc:0 value:300 index:2 array:100,200,300
// => acc:600 value:200 index:1 array:100,200,300
// => acc:1000 value:100 index:0 array:100,200,300
// => 1200
配列の検査
array.indexOf(elm)
配列の中に elm とマッチする要素が最初に出現するインデックスを返します。見つからない場合は -1 を返します。
const 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.lastIndexOf(elm)
配列の中に elm とマッチする要素が最後に出現するインデックスを返します。見つからない場合は -1 を返します。
const arr = [3, 5, 8, 5, 1];
console.log(arr.lastIndexOf(5)); // => 3
array.includes(elm)
ES2016(ES7) で追加されたメソッドで、elm にマッチする要素の有無を true/false で返却します。indexOf() よりも直観的に有無を調べることができます。
const arr = ["Red", "Green", "Blue"];
if (arr.indexOf("Green") != -1) { ... } // 古い書き方
if (arr.includes("Green")) { ... } // ES2016以降の新しい書き方
Array.isArray(value)
ES5.1 で追加されたメソッドで、value が配列か否かを true/false で返します。
console.log(Array.isArray("ABC")); // false
console.log(Array.isArray(["A", "B", "C"]); // true
index in array
該当のインデックスの要素が存在するかどうかを調べるには index in array を用います。
const 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 から利用可能です。
const arr = [89, 87, 93, 65, 88];
const bool = arr.every(function(value, index, array) {
return (value >= 80);
});
console.log(bool); // => false
some() は、callback の戻り値がひとつでも真であれば真を返します。下記の例は、配列要素がひとつでも 90以上であることを確認しています。
const arr = [89, 87, 93, 65, 88];
const bool = arr.some(function(value, index, array) {
return (value >= 90);
});
console.log(bool); // => true
array.find(callback[, this])
array.findLast(callback[, this])
array.findIndex(callback[, this])
array.findLastIndex(callback[, this])
find() は配列の各要素に対して callback を実行し、callback の戻り値が最初に真となった要素の値を返します。this はコールバック関数の中で this として参照される値を必要に応じて指定します。コールバックの引数には、要素値(value)、要素のインデックス(index)、配列自体(array)が渡されます。下記の例は、配列要素の中で最初に見つかった 90以上の要素の値を返します。find() と findIndex() は ES5.1 で追加されました。
const arr = [89, 87, 93, 92, 88];
const value = arr.find((value, index, array) => {
return value >= 90;
});
console.log(value); // => 93
findIndex() は見つかった要素のインデックスを返します。
const arr = [89, 87, 93, 92, 88];
const index = arr.findIndex((value, index, array) => {
return value >= 90;
});
console.log(index); // => 2
findLast() と findLastIndex() は配列を末尾から検索する点が異なります。ES2023 で追加されました。
const arr = [89, 87, 93, 92, 88]; console.log(arr.findLast((value, index, array) => value >= 90)); // => 92 console.log(arr.findLastIndex((value, index, array) => value >= 90)); // => 3
配列の連結
array.concat(array2, ...)
array と array2 を連結した配列を返します。array は変更されません。引数に複数指定することも可能です。
const arr1 = ["Red", "Green"];
const arr2 = ["Blue", "Yellow"];
const arr3 = arr1.concat(arr2);
console.log(arr3); // => ["Red", "Green", "Blue", "Yellow"]
array.join([separator])
array の各要素の値を separator で連結した文字列を返します。separator を省略した場合は通常カンマ（,）で連結されますが、JavaScript のバージョンによって動作が異なるので省略しない方が無難です。array は変更されません。
const arr = ["2000", "12", "31"];
const str = arr.join("/");
console.log(str); // => "2000/12/31"
配列要素の取り出しと追加
array.at(n)
ES2022 でサポートされました。配列の n 番目(0～)の要素を取り出します。負数を指定すると最後から数えて n番目(1～)の要素を取り出します。
const arr = ["Red", "Blue", "Green"]; consolg.log(arr.at(0)); // => "red" console.log(arr.at(1)); // => "Blue" console.log(arr.at(-1)); // => "Green"
array.unshift(e1, e2, ...)
array.push(e1, e2, ...)
unshift() は array の先頭に e1, e2, ... の配列要素を加えます。push() は array の最後に配列要素を加えます。戻り値は JavaScript のバージョンによって異なります。
const arr = ["Green"];
arr.unshift("Red"); // => ["Red", "Green"]
arr.push("Blue"); // => ["Red", "Green", "Blue"]
array.shift()
array.pop()
shift() は array の最初の要素を削除します。pop() は array の最後の要素を削除します。array 自身が変更されます。戻り値は削除した値となります。
const arr = ["Red", "Green", "Blue"]; arr.shift(); // => ["Green", "Blue"] arr.pop(); // => ["Green"]
array.splice(start, n, e1, e2, ...)
0 から数えて、start 番目から n 個の要素を削除し、その代わりに e1, e2, ...を値とする要素を埋め込みます。array 自体が変更されます。戻り値は置換された要素の配列となります。
const arr1 = ["A", "B", "C", "D", "E", "F", "G"]; const arr2 = arr1.splice(2, 3, "X", "Y", "Z"); console.log(arr1); // => ['A', 'B', 'C', 'D', 'E', 'F', 'G'] console.log(arr2); // => ['C', 'D', 'E']
array.toSpliced(start, n, e1, e2, ...)
0 から数えて、start 番目から n 個の要素を削除し、その代わりに e1, e2, ...を値とする要素を埋め込んだものを返します。array は変更されません。
const arr1 = ["A", "B", "C", "D", "E", "F", "G"]; const arr2 = arr1.toSpliced(2, 3, "X", "Y", "Z"); console.log(arr1); // => ['A', 'B', 'C', 'D', 'E', 'F', 'G'] console.log(arr2); // => ['A', 'B', 'X', 'Y', 'Z', 'F', 'G']
array.slice(start [, end])
0 から数えて、start 番目～ end - 1 番目までの要素を抜き出した配列を返します。end を省略した場合は最後までの要素を返します。array は変化しません。
const 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() を用いるのが一般的です。
const 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 から利用可能です。
const arr1 = [89, 87, 93, 65, 88];
const arr2 = arr1.filter(function(value, index, array) {
return (value >= 80);
});
console.log(arr2); // => [89, 87, 93, 88]
配列の並べ替え
array.sort([func])
array をソートしてその結果の配列を返します。array 自身がソートされます。func で比較関数を指定することも可能です。比較関数では負数、0、正数によって順序を返すようにします。
const arr = [3, 7, 8, 1];
arr.sort();
console.log(arr); // => [1, 3, 7, 8]
ソート関数を指定することもできます。ソート関数では等しければ 0 を、小さければ負の値を、大きければ正の値を返します。下記の例では、大文字・小文字を無視して文字列をソートしています。
function hikaku(a, b) {
const str1 = a.toUpperCase();
const str2 = b.toUpperCase();
if (str1 == str2) { return 0; }
if (str1 > str2) { return -1; }
if (str1 < str2) { return 1; }
}
const arr = ["a", "x", "B", "y", "c", "Z"];
arr.sort(hikaku);
console.log(arr); // => ["a", "B", "c", "x", "y", "Z"]
array.toSorted([func])
array をソートしてその結果の配列を返します。array 自身はソートされません。他の機能は sort() と同様です。
const arr = [3, 7, 8, 1]; console.log(arr.toSorted()); // => [1, 3, 7, 8] console.log(arr); // => [3, 7, 8, 1]
array.reverse()
array を逆順に並べ替えてその結果の配列を返します。array 自身が並べ替えられます。
const arr = [1, 2, 3];
arr.reverse();
console.log(arr); // => [3, 2, 1]
array.toReversed()
array を逆順に並べ替えてその結果の配列を返します。array 自身は並べ替えられません。
const arr = [1, 2, 3]; console.log(arr.toReversed()) // => [3, 2, 1] console.log(arr); // => [1, 2, 3]
配列から文字列への変換
array.toString()
配列を文字列に変換します。
const arr = [1, 2, 3, "A", "B", "C"];
arr.toString(); // => "1,2,3,A,B,C"
array.toLocaleString([locales[, options]])
配列をロケールに応じた文字列に変換します。
const arr = [1, 'A', new Date('31 Dec 1999 14:59:59 UTC')];
const 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 ではサポートされていません。
const arr = ["0", "1", "2", "3", "4", "5"];
arr.fill("A", 2, 5);
console.log(arr); // => ["0", "1", "A", "A", "A", "5"]
array.with(index, value)
0から数えて index 番目の要素を value に置換したものを返します。array は変更されません。
const arr1 = ["0", "1", "2", "3", "4", "5"]; const arr2 = arr1.with(3, "X"); console.log(arr1); // => ['0', '1', '2', '3', '4', '5'] console.log(arr2); // => ['0', '1', '2', 'X', '4', '5']
array.copyWithin(target[, start[, end]])
start番目から end - 1番目の要素を、target 番目からの要素と置き換えます。array 自体を書き換えます。start が省略された場合は 0番目から、end が省略された場合は最後までをコピーします。下記の例では、0から数えて8番目から 10-1=9番目の要素を、2番目からの要素にコピーしています。ES2015(ES6) で追加された機能で、IE11 ではサポートされていません。
const 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"]
array.flat(depth)
ES2019(ES10) で追加された機能で、多次元配列を低次元の配列にフラット化します。depth には何次元までの配列をフラット化するかを指定します。
const arr = [[[1, 2], [3, 4]], [5, 6]];
console.log(arr.flat(2)); // => [1, 2, 3, 4, 5, 6]
array.flatMap(callback)
ES2019(ES10) で追加された機能で、配列に対して map() を行い、結果として得られた多次元配列を flat() でフラット化します。
const arr = ["Blue Green", "Red Yellow"];
console.log(arr.flatMap(x => x.split(" "))); // => ["Blue", "Green", "Red", "Yellow"]
分割代入
ES2015(ES6)では、分割代入という機能がサポートされました。... を用いることにより z に 10 と 20 の残りの要素である [30, 40, 50] を代入することができます。
[x, y] = [10, 20]; // x=10, y=20 [x, y, ...z] = [10, 20, 30, 40, 50]; // z=[30, 40, 50]
スプレッド構文
ES2015(ES6)で追加された構文で、配列名に ... をつけることで、配列要素をカンマで連結した構文に展開されます。
args = [10, 20, 30];
func(...args); // func(10, 20, 30)