JavaScriptの多次元配列や配列のループ処理を学ぶ

JavaScriptの配列を理解することで脱初心者してみましょう！

今回は配列でもループ処理や多次元配列について解説します。一つずつきちんと理解することでプログラミングの幅が広がるようになりますので、じっくりと学ぶようにしましょう。

配列の基本をおさらい

プログラミングにおける配列とは複数の要素のデータ集合であり、ほぼすべてのプログラム言語で使用されています。JavaScriptも例外なく配列がありますので、おさらいとして下記サンプルコードを見てみましょう。

var array1 = new Array('サッカー', 'バスケ', 'テニス');
var array2 = ['サッカー', 'バスケ', 'テニス'];
 
console.log( array1 );
console.log( array2 );

出力結果は「[ 'サッカー', 'バスケ', 'テニス' ] 」が2行続けて表示されます。

配列の宣言の仕方は上記のようにnewを使った方法もしくは配列リテラル（[]）を使った方法の2つあります。

配列は複数の要素をひとまとめにでき、複数の変数を持たなくても良いことから利便性が高いと言えます。

今回の例では3つの要素でしたが、100個や200個の要素を保持する場合には配列を使ったほうが短いコードで済むことがわかるかと思います。

多次元配列の処理方法

配列には多次元配列があり、特に2次元配列は広く使われています。宣言の仕方は下記のようになります。

var array = [
    ['サトウ', 'タニグチ'],
    ['ヤマダ', 'ナイトウ']
];

たとえば、学校のクラスごとの名前を保持するとします。この場合に2次元配列での情報を格納することで便利に管理することができます。

複数のクラスがあった場合、一つずつ配列を宣言してもいいかもしれませんが煩雑になりやすいです。一つにまとめることで見やすく、アクセスもしやすいので使えるようになりましょう。

ループを使った配列処理を覚えよう！

配列の宣言ができましたら、ループを使った配列処理を覚えましょう。主にforEach、filter、map、reduceがありますので、それぞれの特徴を理解して実行できるようにしましょう。

forEachを使った繰り返し処理

foreachは配列の繰り返し処理として、よく使用されています。使い方としては下記になるので見てみましょう。

var array = [
    ['サトウ', 'タニグチ'],
    ['ヤマダ', 'ナイトウ']
];

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

表示結果は「[ 'サトウ', 'タニグチ' ] [ 'ヤマダ', 'ナイトウ' ]」となります。

サンプルでは2次元配列を例にしましたが、1次元配列でも同様の使い方でできます。

forEachは配列内のデータを順番に見ていき、指定処理を繰り返してくれます。配列のループ処理の基本であり、多く使われますので覚えておきましょう。

filterを使って任意の要素を抽出

filterは配列の要素を抽出してくれます。こちらもまずはサンプルコードを見てみましょう。

var numbers = [8,6,2,1,4,9,6,7,5];
 
var result = numbers.filter( function( value ) {
    return value > 4;
})

console.log( result );

表示結果は「[ 8, 6, 9, 6, 7, 5 ]」となります。

この例では4以上の数字のみを抽出するようにしました。コールバック関数の引数valueが現在見ている要素となります。上記コードでは最初に 8 を見て、次に 6, 9 と続きます。

コールバック内でtrueと評価されるものが対象となり、今回の例では4より上の数値が対象です。コールバック内では返り値を指定すること、新しい配列を生成する事もポイントです。

データ抽出は検索や一致などの処理で使われ、業務でも多く求められる技術ですので、覚えておくようにしましょう。

mapを使って新しい配列を作成

forEachと似て配列の繰り返しループしますが具体的な違いがあります。それは新しく配列を生成してくれることです。

こちらもサンプルコードを見てみましょう。

var numbers = [1,2,3,4,5,6,7,8,9];
 
var result = numbers.map(function( value ) {
     return value * value;
});
 
console.log( result );

実行結果は「[ 1, 4, 9, 16, 25, 36, 49, 64, 81 ]」となります。

forEachはコールバック関数内で返り値を設定する必要がありませんが、mapは返り値を指定しなければなりません。上記例では返り値の結果を新しい配列に生成しています。

reduceで順々にループ処理する

reduceは配列内の要素と要素をかけ合わせたり、ひとまとめにしたりしたい場合などに利用されます。

たとえば配列内の数値をすべて足して和を求めたい場合は下記のように書くといいでしょう。

var numbers = [1,2,3,4,5,6,7,8,9];
 
var total = numbers.reduce(function(previousValue, currentValue, index, array) {
    return previousValue + currentValue;
});

console.log(total);

表示結果は 45 となります。

コールバック関数の引数が多く難しいかもしれませんが、previousValueが今までの結果、currentValueが現在見ている要素となります。

indexは現在のどこの配列を指しているかであり、arrayはreduceしているデータ自身を指します。indexとarrayは省略しても問題ありません。

また、reduceにはinitialValueという引数が存在し、指定した場合previousValueの値がinitialValueと同じ値になります。サンプルコードではコールバック後の10がinitialValueです。

var numbers = [1,2,3,4,5,6,7,8,9];
 
var total = numbers.reduce(function(previousValue, currentValue, index, array) {
    return previousValue + currentValue;
}, 10);

console.log(total);

上記サンプルコードの場合は 55 が表示結果となります。previousValueの初期値が10であり、1から9を順々に足しての結果です。

初期値を設定したい場合はinitialValueを利用しましょう。