javascriptで配列を扱う

こんばんは。きわさです。

javascriptで配列を扱う際に知っておきたいメソッドです。

map

配列から新たな配列を作成します。

function test1() {
    var array0 = [0x41,0x42,0x43,0x44,0x45,0x46];
    var array1 = array0.map(function(value, index, array) {
        return String.fromCharCode(value);
    });
    console.log(array1);  // ["A","B","C","D","E","F"]
    return;
}

map は渡した関数を配列の各要素に対して実行し、その戻り値の配列を返します。
渡した関数の引数 value, index, array はそれぞれ下記の値が格納されています。
value: 現在処理を行っている要素の値
index: 現在処理を行っている要素のindex
array: もとの配列
つまり、array0の場合は要素数が6なので、関数は6回呼ばれます。
1回目は、value に 0x41、index に 0、array に array0 が渡されます。
そして 0x41 に対応する “A” がarray1の1つ目の要素となります。

filter

配列の特定の要素を除いた配列を返します。

function test2() {
    var array0 = [0x41,0x42,0x43,0x44,0x45,0x46];
    var array2 = array0.filter(function(value, index, array) {
        return value % 2 == 0;
    });
    console.log(array2);  // [66, 68, 70]
    return;
}

filter は渡した関数を配列の各要素に対して実行し、その戻り値がtrueである要素の配列を返します。
渡した関数の引数等は map と同様です。
1回目は、value に 0x41、index に 0、array に array0 が渡されます。
そして value % 2 == 0 は偶数であれば true となる条件式です。
0x41(=65) は奇数なので false となるため、array2 には含まれません。
次の 0x42(=66) は偶数なので array2 の1つ目の要素となります。

forEach

配列の各要素に対して処理を実行します。

function test3() {
    var array0 = [0x41,0x42,0x43,0x44,0x45,0x46];
    var array3 = [];
    array0.forEach(function(value, index, array) {
        array3.push(value);
    });
    console.log(array3);  // [65, 66, 67, 68, 69, 70]
    return;
}

forEach は渡した関数を配列の各要素に対して実行します。
渡した関数の引数等は map と同様です。
1回目は、value に 0x41、index に 0、array に array0 が渡されます。
この関数では array3 に value を追加しているだけなので、
処理終了後には、array3 は、もとの array0 の要素すべてを含む配列となります。

Javascriptで配列を扱う場合は、この map、filter、forEach は良く使うことになると思うので、覚えておきたいところです。