JavaScriptの配列、宣言、追加、削除、結合、要素数、ループなども解説｜JavaScript入門講座（６）

はじめに

　JavaScript入門講座の第六弾として、JavaScriptの配列、宣言、追加、削除、結合、要素数、ループについて紹介します。

　この記事を読むと次の疑問について知ることができます。

　JavaScript入門講座（5）では、JavaScript のデータ型（３）、真偽型、Simbol型、Null、undefindedについて解説してきました。

　ここでは、JavaScriptの配列、宣言、追加、削除、結合、要素数、ループについて深堀していきます。

配列の基本

　JavaScriptでは、配列はオブジェクト型データの１つであり、配列の中に多くのデータを入れることができます。

配列の宣言

　配列を宣言する方法は、３つほどあります。

const array = new Array(2,7,4,6,9,10); //new演算子で配列を宣言して、値をarrayに代入
const array1 = Array(2,7,4,6,9,10);//Array配列で配列を宣言して、値をarray1に代入
const array2 =[2,7,4,6,9,10];//直接、値を[]内に書いて配列を宣言して、値をarray2に代入
console.log(typeof array);
console.log(typeof array1);
console.log(typeof array2);

要素とインデックス

　配列の中のデータを、要素と呼び、それを参照すのにインデックスを用います。

　ここで注意しなければならないのが、インデックスは０から始まることです。

配列の要素の参照

　それでは、先に宣言した配列の中身を見てみましょう。

console.log(array[2], array1[4], array2[0])

配列の要素への代入

　配列の要素に違う値を代入してみましょう。

　ここで使う配列は、前に配列宣言したarry2=[2,7,4,6,9,10]です。

array2[1] = 18; //配列要素 array2[1]（array2配列の２番目の要素）に数値18を代入
array2[3] = 5;//配列要素 array2[3]（array2配列の４番目の要素）に数値5を代入
array2[5] = 1;//配列要素 array2[5]（array2配列の6番目の要素）に数値1を代入
console.log(array2); //配列array2)をコンソールに出力

配列の要素数の取得

　配列の要素の数を調べるには、lengthプロパティーで取得できます。

　ここでも、前に宣言したarray2を用いて、配列内の要素の数を求めてみましょう。

console.log(array2.length); //配列array2)をコンソールに出力

配列内への全要素へのアクセス

　配列内への全ての要素にアクセスするには、色々な方法がありますが、ここでは for ループ処理を紹介します。

for文

　ここでも、array2配列を使って、for 文でarray2の全要素にアクセスしてみましょう。

for (let i=0; i <= array2.length-1; i++){
console.log(array2[i]);
}

for in 文

　for in 文でもfor 文と同様に、配列の全要素にアクセスできます。

　前と同様に、array2配列を使って、for in 文でarray2の全要素にアクセスしてみましょう。

for (let index in array2){
console.log(array2[index]);
}

　for in 文では配列のインデックスを利用して、配列の全要素にアクセスしていることが分かります。

 for of 文

　for of 文でも for 文や for in 文と同様に、配列の全要素にアクセスできます。

　前と同様に、array2配列を使って、for of 文でarray2の全要素にアクセスしてみましょう。

for (let value of array2){
console.log(value);
}

　for of 文では配列の値そのものを呼び出して、配列の全要素にアクセスしていることが分かります。

配列のメソッド

forEach メソッド

　配列の forEach メソッドを使うと、配列内の全要素にアクセスすることができます。

　【構文】

array2.forEach(function(value){
console.log(value)
});

配列のその他のメソッド

　配列のメソッドには、forEach 以外にも色々メソッドがありますので、以下の載せておきます。

　これらのメソッドの中から unshift 、pop 、concat()、map()、slice()について、前に宣言した配列 array2 に対して、操作して見たいと思います。

array2.unshift(12); //配列array2の先頭に数値12を追加
console.log(array2); //配列array2をコンソールに出力
array2.pop(); //配列array2の末尾の数値を取り除く
console.log(array2); //配列array2をコンソールに出力
const array3 = array2.concat(array); //配列array2にarrayを結合したものを新たにarray3とする。
console.log(array3); //配列array3をコンソールに出力
const array4 = array2.map(function(value){
return value * 2 + 3;
});//配列array2の全要素に対して２倍して３を加えることを実施し、それをarray4に代入
console.log(array4); //配列array3をコンソールに出力
console.log(array2.slice(1,5)); //配列array2のインデックス1から5までの３文字に抜き出しその配列をコンソールに出力

二次元配列

　表のように２次元に広がっているデータを配列で作成できます。

　勿論、その上の３次元配列や３次元以上の多次元配列も、JavaScriptでは扱えますが、複雑になりますので、２次元配列について紹介します。

　例えば、次のような表データがあったとします。（カッコ内の数字は、インデックスを表します。）

　上記のような表データを配列で表すとすれば、次のように表すことができます。

const array2JiGen = [
["A", "B", "C", "D", "E"],
["a", "b", "c", "d", "e"],
["あ", "い", "う", "え", "お"],
["ア", "イ", "ウ", "エ", "オ"],
]

 この2次元配列から行の部分を参照するには、次のようにします。

console.log(array2JiGen[0])
console.log(array2JiGen[1])
console.log(array2JiGen[2])
console.log(array2JiGen[3])

　そして、縦の列を取り出したいのであれば、例として、３列目（インデックス：2）を取り出すには次のようにします。

const array5 = array2JiGen.map(function(value){
return value[2];
});
console.log(array5);

　表の各セルを取り出したいのであれば、例として、２行３列目の「c」、３行５列目の「な」、４行２列目の「カ」を取り出すには、次のようにします。

console.log(array2JiGen[1][2]);
console.log(array2JiGen[2][4]);
console.log(array2JiGen[3][1]);

おわりに

　如何だったでしょうか？

　配列の基本とはどのようなもの？、配列の宣言、要素とインデックス、配列の要素の参照、配列の要素への代入、配列の要素数の取得、配列内への全要素へのアクセス、for文、for in 文、for of 文、配列のメソッド、forEach メソッド、配列のその他のメソッド、二次元配列とはどのようなもの？などについて紹介してきました。

　この記事があなたにとって少しでもお役に立てればこれほど嬉しいことはありません。

以上です。