配列｜1から始めるJavaScript#9

どうもRyokutyaです。
今回は配列について説明していきます。
配列は変数と少しにていますので理解しやすかもしれませんね。

配列

変数と定数を説明した時「箱」のようなものと例えましたね。
配列はその「箱」が電車のように連結したものを想像してください。
複数のデータを1つにまとめて管理することができます。

配列の宣言

配列の使い方は定数の時と同じで宣言することで使うことができます。

let 配列名=[];

変数の時と少し違うのは、イコールの右辺に[]があることです。
上記のようにすることで、データの項目数が0個の配列ができます。（空の配列）
空の配列にはデータをいくつでも格納することが可能です。

let 配列名=[date1,date2,date3];

このようにすることで初めからデータが入った状態の配列を宣言することも可能です。

配列は情報を1つにまとめて管理できるため似た様なジャンルのデータをまとめて扱うときに便利です。
例えば動物に関するデータを変数ですると・・・

let animal1='dog';
let animal2='cat';
let animal3='bird';
let animal4='lion';
let animal5='tiger';

このように動物の数だけ変数を用意しないといけませんが、配列を利用すると、

let animal=['dog','cat','bird','lion','tiger'];

このように一行で表すことができます。

データの利用方法

配列に格納されたデータは利用できなければ意味がありませんよね。
変数の時は変数に格納されたデータを利用したい場合は変数名を記述すれば利用できましたが配列の場合、配列名を記述しただけでは使えません。

配列名[インデックス番号]

配列に格納されたデータを利用した場合はこのように記述します。
インデックス番号は連結した箱の番号だと思ってください。
前から順に0,1,2・・・とナンバリングされています。
一番最初の番号が0であることに注意してください。

let animal1='dog';
console.log( animal1 );//dog

let animal=['dog','cat','bird','lion','tiger'];
condole.log( animal[0] );//dog
condole.log( animal[2] );//bird
condole.log( animal[4] );//tiger

for…of文

for…of文はfor文の一種で繰り返し処理を行います。
普通のfor文と違い配列に使用することができます。
for…of文は配列の中に格納されている全てのデータを取り出し順番に繰り返し処理を行います。

配列に格納された全てのデータに同じ処理をしたい時に使用します。

for(let 変数名 of 配列名){
配列に格納されているデータに実行したい処理;

この説明だけでは少しわかりにくいと思いますので、少し例を見ていきましょう。

let animal=['dog','cat','bird','lion','tiger'];
for( let name of animal ){
  console.log(name);
}
//dog
//cat
//bird
//lion
//tiger

上記の例は、配列（animal）に格納されているデータを順番にコンソール画面に表示するプログラムです。
配列（animal）に格納されたデータを前から順番に取り出し、変数（name）に格納しています。
処理部分（　console.log(name)　)の部分でコンソール画面に変数（name）を表示しています。

イメージとしては上の図のような感じです。
インデックス番号0を変数（name）に格納し処理を実行→処理が終わると最初に戻りインデックス番号1を変数（name）に格納し処理を実行→処理が終わると・・・を繰り返して行い最後のインデックス番号のデータを終えるまで行います。

このように配列に格納された全てのデータに同じ処理を行いたい場合はfor..of文を使用すると便利です。

データの追加/削除

配列のデータに変更を加えるメソッドはいろいろありますが、ここでは主に配列にデータを追加するメソッドとデータを削除するメソッドを紹介していきます。

.pop（）

.pop（）は配列の最後尾に格納されたデータを削除します。

.push（）

.push（）は（）の中に記述したデータを配列の最後尾に追加します。

let animal=['dog','cat','bird','lion','tiger'];
animal.push('rabbits');//配列の最後にrabbitsが追加されます。
//dog,cat,bird,lion,tiger,rabbits

animal.push('fox','chick');//カンマで区切ることで複数を一度に追加することも可能
//dog,cat,bird,lion,tiger,rabbits,fox,chick

.shift（）

.shift（）は配列の一番前に格納されたデータを削除します。

.unshift（）

.unshift（）は（）の中に記述したデータを配列の一番前に追加します。

let animal=['dog','cat','bird','lion','tiger'];
animal.unshift('rabbits');//配列の最初にrabbitsが追加されます。
//rabbits,dog,cat,bird,lion,tiger

animal.unshift('fox','chick');//カンマで区切ることで複数を一度に追加することも可能
//fox,chick,rabbits,dog,cat,bird,lion,tiger

おわりに

今回は配列について説明しました。
配列はデータをひとまとめにできるため、多くのデータを管理するのにとても便利です。
変数を1つ1つ作っていくとややこしくなりますし、変数名が多くなってくるといくらわかりやすい変数名にしていも何のデータを格納していたかわけがわからなくなってしまいます。
また変数をたくさんつくるより配列でまとめた方が処理が軽くなります。
次回は連想配列について説明していきたいと思います。
今回はこのあたりで(^^)/