配列

配列とは何？
配列はたいてい「リストのようなオブジェクトである」と説明され、単一のオブジェクト内に複数の値をリストとして持っています。配列オブジェクトは変数に格納され、その他の型と同様に扱われます。異なるのはリスト内の値に個別にアクセスすることができ、繰り返しを用いて全ての値に同じことをするといった、リストとして便利で効率的に扱うことができます。商品とその価格の一覧を配列に保持し、その値をループして合計額を計算しつつ請求書にそれぞれの価格を表示して一番下に合計額を表示することもできるでしょう。

もし配列がなかったとしたら、別々の変数にそれぞれの値を格納しなければならず、各変数を表示するのと計算するので別々に呼び出さなければならなかったでしょう。こうなると、書き出すのがとても長く、非効率的でエラーを起こしやすいプログラムとなるでしょう。例えば、10 個の項目を請求書に出すだけでも最悪ですが、それが 100 個や 1000 個だったらどうでしょう。この記事の最後に実例としてやってみましょう。

前回までの記事と同様に、JavaScript コンソールに配列の基礎となるコード例をブラウザーの開発者コンソールに入力しながら学びましょう。

配列を作る
配列を作るには、角括弧の中にカンマで区切ったリストの形式で項目を並べます。

買い物リストを配列に保持したいとき、次のようにします。下のコードをコンソールに入力してみましょう。

let shopping = ['パン', '牛乳', 'チーズ', 'ハム', '麺'];
shopping;

この例では、配列の各項目は文字列ですが、配列には何でも格納することができることを頭に入れておきましょう。文字列、数値、オブジェクト、その他の変数、さらには別の配列ですら格納することができます。そして混ぜ合わせることも。すべて同じデータ型である必要はありません。

let sequence = [1, 1, 2, 3, 5, 8, 13];
let random = ['tree', 795, [0, 1, 2]];

いくつか配列を作ってみましょう。それから先に進みます。
配列の項目を取得し変更する
配列の各項目は文字列中の文字を取得したときのように列で角括弧 ([]) を使用して取得することができます。

次のコードをコンソールに入力してください。

shopping[0];

// "パン"という値が戻ります
そして、配列中の項目は単に新しい値を代入することで変更することが出来ます。

shopping[0] = 'タヒーニ';
shopping;

// ショッピングリストは[ "タヒーニ", "牛乳", "チーズ", "ハム", "麺" ]に変更されています。

注: 前にも言いましたが、重要なことなのでもう一度言います。コンピューターは 0 から数を数えます！

配列の中に配列があるとき、その配列は多次元配列と呼ばれます。配列中の配列に含まれる項目には角括弧を繋げて書くことでアクセスすることができます。例えば、先ほどの例で出てきた random 変数に格納された配列の 3番目の項目のさらに 3番目の項目を取得するには以下のようにします。

random[2][2];

移動する前に、配列の例をいくつか変更してみてください。遊んでみて、何が動いて何がそうでないかを見てください
配列の長さを調べる
ある配列の長さ (いくつの項目が配列中に存在するか) を知るには、文字列の (文字の) 長さを調べた時と全く同じようにします。lengthプロパティを使用して長さを取得することができます。

sequence.length;

// 7 が返る
このプロパティはいろいろな使われ方をするのですが、最もよく使われるのは、配列中の全項目をループするために使用されます。次の例を見てください。

let sequence = [1, 1, 2, 3, 5, 8, 13];
for (let i = 0; i < sequence.length; i++) {
console.log(sequence[i]);
}

ループについてはそのうち (Looping code の記事で) しっかりと学ぶ機会があるでしょうが、ここで簡単に説明すると上のコードは次のように動きます。

配列中の項目 0 番よりループを開始します。
ループを配列の長さと同じ数になったら、繰り返しを終了します。これで配列中の要素がいくつであっても動くようになります。今回の場合は、項目の番号が 7 のときに終了します(ループでカバーしたい最後の項目番号は 6 なので、これで問題ありません)。
そして、各項目を console.log() メソッドを使用してブラウザーのコンソールに出力しています。

便利な配列メソッド
このセクションでは、文字列を配列にしたり、配列を文字列にしたり、配列に項目を追加したり、ちょっと便利な配列関連のメソッドを見てみましょう。

文字列と配列を相互に変換する
データが長い長い文字列の中に含まれていて、それを使いやすい形に分割して操作したいときがあります。例えばデータを表形式で表示するというようなときです。それにはsplit()メソッドが使用できます。このメソッドは文字列を分割するのに使用する文字を引数として取り、文字列をその文字で区切った部分文字列の配列に分割します。

注: 実際のところ、これは配列ではなく文字列のメソッドです。しかし、ここで紹介するのが一番だと思い取り上げています。

それではどのように動くか試してみましょう。まずは文字列をコンソールに作ります。

let myData = '札幌,仙台,東京,名古屋,大阪,博多';

この文字列をカンマで区切ります。

let myArray = myData.split(',');
myArray;

そして、できた配列の長さを見てみて下さい。そして、その中身を見てみましょう。

myArray.length;
myArray[0]; // 配列の最初の項目
myArray[1]; // 配列の二番目の項目
myArray[myArray.length-1]; // 配列の最後の項目

join() メソッドを使うことで、逆のことができます。

let myNewString = myArray.join(',');
myNewString;

配列を文字列にするもう一つの方法は、toString() メソッドを使うことです。引数を取らない toString() は join() と比べ簡単でしょうが、制限があります。join() を使えば、他の区切り文字を指定することもできます (4. の例をカンマ以外の他の文字を指定して試してください)。

let dogNames = ['ポチ','ハチ','タロウ','モコ'];
dogNames.toString(); //ポチ,ハチ,タロウ,モコ

項目の追加と削除
まだ配列への項目の追加と削除をやっていませんでしたね。次はこれをやりましょう。先ほどの例にあった myArray 配列を使用します。先ほどの例をまだ実行していなければ、以下のコードをコンソールに入力して配列を作ってください。

let myArray = ['札幌', '仙台', '東京', '名古屋', '大阪', '博多'];

まず、配列の最後に項目を追加したり、最後の項目を削除するには、それぞれ push() と pop() を使います。

先に push() を使ってみます。配列の最後に項目を追加するには 1 つ以上の項目を引数に指定します。

myArray.push('横浜');
myArray;
myArray.push('神戸', '広島');
myArray;

メソッドの呼び出しが終わると、新しい配列の長さが返ります。もし新しい配列の長さを変数に格納したければ、次のようにできます。

let newLength = myArray.push('京都');
myArray;
newLength;

配列の最後の要素を削除するには pop() を呼び出すだけです。

myArray.pop();

メソッドの呼び出しが終わると、削除された項目それ自体が返ります。

let removedItem = myArray.pop();
myArray;
removedItem;

unshift() と shift() はそれぞれ push() や pop() と同様の動作ですが、配列の末尾ではなく先頭において動作します。

まずは、unshift() を次のように実行します。

myArray.unshift('奈良');
myArray;

今度は shift() でやってみましょう！

let removedItem = myArray.shift();
myArray;
removedItem;

ｈｔｔｐｓ：／／developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Arrays