Array - 配列
JavaScript における Array は配列オブジェクトを生成するためのクラスです。
以下のような構文で配列を宣言することができます。
let list = [];
カッコ [] が右辺で宣言されると Array オブジェクトが生成されます。
初期値もあわせて宣言するには以下のようにします。
let alphabet = [ 'a', 'b', 'c', 'd', 'e' ];
Array オブジェクトは Array クラスから生成されるのですが、以下の構文はあまり利用されません。
var example = new Array();
Array 型宣言
JavaScript では Array 型(配列型)の変数を宣言するには以下のようにします。
let example = [];
右辺のカッコ [] によって配列の変数宣言であることが自動で識別されます。
ただし、このように宣言された配列には初期値がありません。中のデータの数は 0 の状態です。
以下のコードで中身を知ることができます。
let example = []; console.log( example ); // Array [] console.log( example.length ); // 0
配列であることのみで変数を宣言すると、その変数の値は Array オブジェクトですがデータ数は 0 でデータがないことが分かります。
初期値
配列の変数宣言で初期値を設定することができます。
let alphabet = [ 'a', 'b', 'c', 'd', 'e' ];
上記の例では文字列データの配列を宣言していますが、数値や配列、オブジェクト、関数を配列にすることができます。JavaScript では別々のデータ型が混在した配列を宣言することもできます。
let alphabet = [ 'a', 100, [ 1, 2, 3 ], { name:"cat", age:3 }, function(){ return 0 }, 'b' ];
データの取得、追加と削除については以下のデータアイテムの追加と削除
を参照してください。
Array()
Array() によっても配列型の変数を宣言することができます。
var example = new Array();
しかし、この方法はあまり使用されません。
プロパティ（Property）
Array クラスには以下のプロパティがあります。
| プロパティ | 概要 |
|---|---|
| .length | 配列のデータ数 |
その他に以下のような [] 内に配列の位置を指定することでそのデータを取得するというプロパティもあります。
Array.prototype[ @@unscopables ];
.prototype
は省略することができ、以下のことを示しています。
let alphabet = [ 'a', 'b', 'c', 'd', 'e' ];
console.log( alphabet[2] ); // 'c'
配列の数え方は 0, 1, 2,.. です。2 を指定すると 3 番目のデータになります。
メソッド（Method）
Array クラスのメソッドには静的メソッドと呼ばれる Array に続いてメソッドを指定するものと、通常のオブジェクトのメソッドとして使用するインスタンスメソッドがある。
静的メソッド
| メソッド | 概要 |
|---|---|
| Array.from() | 第１引数の配列またはデータを配列として生成。第２引数として条件を与えることもできる |
| Array.isArray() | 引数が配列であるか／否かを返す |
| Array.of() | 引数から配列オブジェクトを生成 |
静的メソッドは以下のように Array.メソッド の形で使用します。
console.log( Array.isArray( ['a', 'b', 'c'] ) ); // true を返す
以下のインスタンスメソッドは通常のオブジェクトで利用するメソッドです。
インスタンスメソッド
| メソッド | 概要 |
|---|---|
| 検索 | |
| .at() | 指定番号に該当するデータを返す。負数は末尾からになる |
| .every() | 配列のデータが引数の条件を満たしているか／否かを返す。返り値は Boolean |
| .filter() | 引数で指定された条件を満たすデータを抽出して返す。指定にはロールバック関数またはアロー関数を使用する |
| .find() | 引数で指定された条件を満たす最初のデータを返す |
| .findIndex() | 引数で指定された条件を満たす最初のデータの配列番号を返す。なければ -1 を返す |
| .findLast() | 引数で指定された条件を満たす最後のデータを返す |
| .findLastIndex() | 引数で指定された条件を満たす最後のデータの配列番号を返す。なければ -1 を返す |
| .forEach() | 配列のデータを１つずつ取り出す |
| .includes() | 引数で指定されたデータが配列中にあるか／否か。 Boolean 値 |
| .indexOf() | 引数で指定されたデータの位置を示す番号を返す。なければ -1 を返す |
| .join() | 配列のデータを連結して文字列で返す |
| .keys() | 配列の順を示す番号だけをイテレーターで返す |
| .lastIndexOf() | 引数で指定されたデータの配列順を示す番号を返す。なければ -1 を返す |
| .some() | 引数で指定された関数に該当するか／否かを返す。Boolean 値 |
| .toString() | 配列を文字列として返す |
| .values() | 配列をイテレーターオブジェクトに変換 |
| 追加、削除 | |
| .pop() | 配列の最後のデータを削除して配列を返す |
| .push() | 配列の最後に引数のデータを追加する。配列の length で返す |
| .shift() | 配列から最初のデータを削除して返す |
| .unshift() | 先頭に引数で指定されたデータを追加する |
| .slice() | 引数で指定された箇所のデータを削除して返す。元のデータは影響を受けない |
| .splice() | 指定した箇所のデータを削除や新たなデータを追加、置き換え |
| .toSpliced() | 指定した箇所のデータを削除や新たなデータを追加、置き換え。元のデータは影響を受けない |
| 置換 | |
| .copyWithin() | 配列内のデータのコピーと置き換えを行う |
| .toLocaleString() | 指定したローケルにデータを変換する |
| .width() | 第１引数で指定する箇所を、第２引数で置換 |
| ソート | |
| .sort() | 配列データをソートする |
| .reverse() | 配列を反転させる |
| .toReversed() | 逆順にした配列を返す。元のデータは影響を受けない |
| .toSorted() | データをソートして返す。元のデータは影響を受けない |
| 特殊 | |
| .concat() | 配列の結合。元のデータは影響を受けない |
| .entries() | 配列番号とデータをイテレーターオブジェクトに置き換える。返り値は Iterator オブジェクト |
| .fill() | 配列を引数で指定した値で埋める |
| .flat() | 配列の中の配列（入れ子になった配列）をフラットに連結する |
| .flatMap() | .map()、.flat() という２つのメソッドの呼び出しを１回で済ませる |
| .map() | 引数で指定されたコールバック関数を反映した配列を返す |
| .reduce() | 引数で指定されたコールバック関数を配列に反映する。関数の第１引数はアキュムレーター、第２引数は配列データを表します |
| .reduceRight() | 配列の右（末尾）からコールバック関数反映する |
インスタンスメソッドは以下のように、Array インスタンスに使用します。
let alphabet = [ 'a', 'b', 'c', 'd', 'e' ];
let length_ = alphabet.push( 'f' ); // 6 を返す
インスタンスメソッドには他に
があります。
Array.prototype[@@iterator]()
これは配列にデータとして含まれる関数を実行するための構文です。
let array_func = [ 'a', example_func(){ return 0 }, 'b' ];
array_func[1]();
配列中の example_func(){ return 0 } が実行されます。
データアイテムの取得
配列のデータアイテムを取得するには、インデックスを指定する方法、for( values of array ){...} を使用して全体を検索する方法、indexOf メソッドなどを使用する方法があります。
インデックスによるデータアイテムの取得
インデックスとは、配列のデータアイテムごとに付けられた配列順を示す番号のことです。0 から始まり、データアイテムを示すときには [] を使用します。
data_item[ 0 ];
例えば、配列の３番めのデータアイテムを取得するには以下のようにします。
for で検索
制御構文 for を使ってデータアイテムを検索するには、インデックスから取得する方法とデータそのものを検索する場合が考えられます。
配列の全データを参照する方法には、forEach() メソッドがあります。
for( values of array ){...} で検索
for( values of array ){...} は配列のデータアイテムを順次参照できる繰り返し文です。
この例ではインデックスではなくデータを検索するようにしています。
indexOf()、find()、findIndex() メソッドによる検索
配列からデータを検索するための主なメソッドに indexOf()、find()、findIndex() があります。
indexOf() は扱えるのは文字列のみです。もしも連想配列といったオブジェクトの中身まで検索したい時は find()、findIndex() を使用します。
indexOf() メソッド
indexOf() は引数の条件から該当するデータのインデックス（配列番号）を返します。見つからなければ -1 を返します。
indexOf() は文字列のみを扱います。
let alphabet = [ 'a', 'b', 'c', 'd', 'e' ];
console.log( alphabet.indexOf( 'b' ) ); // 1 を返す
find()、findIndex() メソッド
配列中の連想配列データの中身を検索するには、find() または findIndex() を使用します。
find()、findIndex() はコールバック関数またはアロー関数によって配列中のオブジェクトの中身を検索することができます。
コールバック関数、アロー関数を使用して配列を検索し、true または false のみを返すメソッドに some()、every() があります。
詳しくは調べてみてください。
データアイテムの追加と削除
配列へのデータアイテムの追加方法には、インデックス length を利用する方法、メソッド push()、concat()、unshift() で追加する方法があります。
削除には、pop()、shift() があります。
インデックス length を利用する方法
インデックス length によるデータアイテムの追加方法は
を使用します。array[array.length]
length は配列のデータアイテムの数を示しますが、データアイテムごとの配列番号（インデックス）は 0 から始まりますので最後の配列番号は [length -1] となります。
は新たなデータ追加として機能します。array[length] = 'add_data'
この方法によるデータアイテムの追加は元の配列を変更します。
push()、concat() メソッド
配列にデータを追加するメソッド push()、concat() メソッドについてです。
push()、concat() メソッドどちらもデータを配列の最後尾に追加します。push() メソッドは元の配列を変更します。concat() メソッドは新たな配列として出力します。
concat() メソッドは複数のデータアイテムを追加することができます。
push() は元の配列データが変更されます。
もしも元の配列を残したい場合は concat() を使用した方がよいでしょう。
配列の先頭にデータを追加するには unshift() メソッドを使用します。unshift() メソッドは元の配列を変更します。
pop() メソッド
配列のデータを削除するメソッドに pop() があります。ただし、最後尾のデータのみの削除が可能です。
pop() は元の配列データが変更されます。返り値は削除したデータで、もしも配列にデータがない場合は -1 を返します。
配列の先頭にデータを削除するには shift() メソッドを使用します。shift() メソッドも元の配列を変更します。
配列の途中を残すには slice() メソッドを使用します。splice() メソッドは配列の途中の削除とデータの追加ができます。
slice() メソッド
slice() メソッドは配列の指定された範囲を残すメソッドです。
slice() メソッドで指定された範囲を残しその両側を削除します。第１引数が残す範囲の最初の配列番号で、第２引数は指定したいデータの( 配列番号 + 1 )になります。
delete コマンド
配列のデータを削除する方法に delete コマンドを使うことができます。この方法では削除されたデータは undefined になります。
この方法による削除は混乱を招く恐れがありますので注意が必要です。
splice() メソッド
splice() メソッドは配列の指定された範囲を削除したり、データを追加するメソッドです。
第１引数が削除する範囲の最初の配列番号で、第２引数は削除するデータ数、第３引数以降は削除する範囲に新たに追加するデータです。
splice() は上記の例から分かるように元の配列データが変更されます。
配列の置換
配列の置換には配列番号を指定してデータを代入する方法やデータを検索してデータを代入する方法があります。
ソート
並べ替え（ソート）を行うメソッドには sort() や reverse() があります。
sort() メソッドは正順に並べ替えを行います。ソートした配列を返しますが、元の配列も変更されます。
reverse() メソッドは逆順の並べ替えをします。
連想配列データの並べ替え
配列のデータが連想配列の場合はソートに利用する関数によって並べ替えができます。
もしも逆順に並べ替えるには関数を>
を<
に変更します。
上記の例では( a,b ) => a.name > b.name
を( a,b ) => a.name < b.name
のように変更します。
map()、filter() メソッド
map() メソッドはロールバック関数やアロー関数によって配列のデータを抽出したり加工したりすることができます。
filter() メソッドは配列から特定のデータを抽出します。ロールバック関数やアロー関数によって抽出方法を指定します。
map() メソッド
map() メソッドの例です。map() メソッドはロールバック関数やアロー関数を使い、配列のデータを抽出したり加工したりすることができます。
filter() メソッド
filter() メソッドの例です。filter() メソッドは配列から特定のデータを抽出します。ロールバック関数やアロー関数によって抽出方法を指定します。
配列とオブジェクト
実際に配列が使われるシーンはオブジェクトデータの配列かと思われます。
let students = [
{
name : "Jimmy",
age : 10
},
{
name : "Tom",
age : 10
}
];
外部から XML または JSON テキストデータを読み込む場合は、個々のデータはオブジェクト化して配列として一時的に記憶します。
このときにソートや置換など配列の操作が必要になります。
連想配列型によるクラス定義
連想配列型は、オブジェクトのためのクラス宣言ができます。クラス宣言は class または function を利用します。
function によるクラス宣言
まずは function によってクラス宣言をする方法です。この書き方はクラス宣言としては不十分とみなされており古い書き方です。
function Animal( name, food, average_life ){
this.name = name,
this.food = food,
this.average_life = average_life,
get_Name = function(){
return( this.name );
}
};
class によるクラス宣言
以下は class によるクラス宣言です。construtor() はデータの初期化を行います。
class Animal{
constructor( name, food, average_life ) {
this.name = name,
this.food = food,
this.average_life = average_life,
}
get_Name = function(){
return( this.name );
}
};
以上のようなクラス定義によって、新しいオブジェクトを生成できます。
var animal_elephant = new Animal( 'elephant', 'meet', 70 );
Animal.get_Name()
メソッドを使用すると以下のような返り値が取得できます。
alert( animal.get_Name() ); // 'elephant' が表示される
class についての詳しくはオブジェクト（クラスとインスタンス）
を参照してください。