JavaScriptの配列、宣言、追加、削除、結合、要素数、ループなども解説|JavaScript入門講座(6)

JavaScript
この記事は約11分で読めます。

はじめに

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

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

  • 配列の基本とはどのようなもの?
    ・配列の宣言
    ・要素とインデックス
     配列の要素の参照
     配列の要素への代入
     配列の要素数の取得
    ・配列内への全要素へのアクセス
     for文
     for in 文
     for of 文
    ・配列のメソッド
     forEach メソッド
    ・配列のその他のメソッド
  • 二次元配列とはどのようなもの?

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

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

配列の基本

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

配列の宣言

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

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);

上述のコードの解説

  1. constで宣言した変数 array にnew演算子で配列を宣言して、値を代入
  2. constで宣言した変数 array1 にArray配列で配列を宣言して、値を代入
  3. constで宣言した変数 array2 に直接、値を[]内に書いて配列を宣言して、値を代入
  4. console.log(typeof array);でarrayのデータ型をコンソールに出力、 (結果:object)
  5. console.log(typeof array1);でarary1のデータ型をコンソールに出力、 (結果:object)
  6. console.log(typeof array2);でarary2のデータ型をコンソールに出力、 (結果:object)

要素とインデックス

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

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

配列の要素の参照

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

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

上述のコードの解説

 前に宣言した配列arrayのインデックス2の値(前から数えて3番目)、array1の配列のインデックス4の値(前から数えて5番目)、array2の配列のインデックス0の値(最初の値)をコンソールに出力、 結果(4, 9, 2)

配列の要素への代入

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

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

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

上述のコードの解説

  1. 配列要素 array2[1](array2配列の2番目の要素)に数値18を代入
  2. 配列要素 array2[3](array2配列の4番目の要素)に数値5を代入
  3. 配列要素 array2[5](array2配列の6番目の要素)に数値1を代入
  4. 配列array2)をコンソールに出力 結果((6) [2, 18, 4, 5, 9, 1])
    array2の2番目の要素 7 ⇒ 18
    array2の4番目の要素 4 ⇒ 5
    array2の6番目の要素 10 ⇒ 1
    に変更されていることが分かります。

配列の要素数の取得

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

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

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

上述のコードの解説

 console.log(array2.length);でarray2配列の要素の数をコンソールに出力
(結果:6)

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

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

for文

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

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

上述のコードの解説

 letで宣言した変数 i に初期値として0をセットし、i と配列の要素数より1少ない値(array2.length-1)とを比較して、少ないか等しい場合には、console.log(array2[i]);を実行し、i++ で i に1を足して、比較条件を満たしている間はconsole.log(array2[i]);を実行し続ける。
【結果】
2
18
4
5
9
1

for in 文

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

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

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

上述のコードの解説

 letで宣言した変数 index にしたがって、array2要素の初めから終わりまで{}内の実行文であるconsole.log(array2[index]);を実行。
(結果)
2
18
4
5
9
1

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

 for of 文

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

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

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

上述のコードの解説

 letで宣言した変数 value にしたがって、array2要素おの初めから終わりまで{}内の実行文であるconsole.log(array2[index]);を実行。
(結果)
2
18
4
5
9
1

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

配列のメソッド

forEach メソッド

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

 【構文】

配列名.forEach( コールバック関数(要素の値) )
 前に宣言したarray2配列に対して、forEach メソッドを使って、配列の全要素にアクセスしてみましょう。
 
array2.forEach(function(value){
console.log(value)
});

上述のコードの解説

 array2 のforEachメソッドを使い、配列に含まれる要素を先頭から順に取り出しコールバック関数を呼び出し、コールバック関数は、現在取り出されている要素の値を引数にして呼び出されますので、そこで、配列の各要素をconsole.log(value)でコンソールに出力。
(結果)
2
18
4
5
9
1

配列のその他のメソッド

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

配列のメソッド意味配列のメソッド意味
unshift配列の先頭に要素を追加 shift配列の先頭から要素を取り除く
push配列の末尾に要素を追加pop配列の末尾から要素を取り除く
concat()配列を結合 join()配列の要素を文字列として結合
indexOf()要素の値からインデックスを取得splice()配列の任意の場所に要素を削除、追加
slice()第1引数で指定した要素から、第2引数で指定した要素までを返すmap()配列の要素全てに対し、引数に指定した関数の処理を行ってその結果の配列を返えす
reverse()配列の要素を逆順に入れ替えsort()配列要素のソート

 これらのメソッドの中から 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の全要素に対して2倍して3を加えることを実施し、それをarray4に代入
console.log(array4); //配列array3をコンソールに出力
console.log(array2.slice(1,5)); //配列array2のインデックス1から5までの3文字に抜き出しその配列をコンソールに出力

上述のコードの解説

  1. 配列array2の先頭に数値12を追加
    配列array2をコンソールに出力、 結果((7) [12, 2, 18, 4, 5, 9, 1])
  2. 配列array2の末尾の数値を取り除く
    配列array2をコンソールに出力、 結果((6) [12, 2, 18, 4, 5, 9])
  3. 配列array2にarrayを結合したものを新たにarray3とする。
    配列array3をコンソールに出力、 結果((12) [12, 2, 18, 4, 5, 9, 2, 7, 4, 6, 9, 10])
  4. 配列array2の全要素に対して2倍して3を加えることを実施し、それをarray4に代入
    配列array4をコンソールに出力、 結果((6) [27, 7, 39, 11, 13, 21])
  5. 配列array2のインデックス1から5までの3文字に抜き出しその配列をコンソールに出力
    結果((4) [2, 18, 4, 5])

二次元配列

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

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

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

列/行1(0)2(1)3(2)4(3)5(4)
1(0)ABCDE
2(1)abcde
3(2)
4(3)

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

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])

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

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

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

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

おわりに

 如何だったでしょうか?

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

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

以上です。

 

コメント

タイトルとURLをコピーしました