コラム：配列の様々なメソッド
目次
説明
『配列』には様々なメソッドがあります。その中で、『反復メソッド』と呼ばれる関数を引数に取る、少し高度なメソッドを中心にここでは紹介します。
『Array.isArray()』
引数が配列かどうかを確認します。配列なら『true』を、配列でないなら『false』を戻します。
以下、結果を、コンソール（［F12］→「コンソール」タブ）に出力します。
var test1 = [1, 2, 3];
var res1 = Array.isArray(test1);
var test2 = {a: 1, b: 2, c: 3};
var res2 = Array.isArray(test2);
console.log(res1 + "\n" + res2);
【結果】
true false
『forEach()』
配列中のそれぞれの要素について関数を呼び出します。
array.forEach(function(x, i, a) {
// 配列の各要素ごとに呼び出される処理
});
引数の関数の『x』は配列の各要素、『i』は何番目の要素かの数値、『a』は配列自身になります。
以下、配列の各要素をコンソール（［F12］→「コンソール」タブ）に出力します。
var array = [11, 22, 33];
array.forEach(function(x, i) {
console.log(i + ' : ' + x);
});
【結果】
0 : 11 1 : 22 2 : 33
『function(x, i)』のように、関数の引数は『(x, i, a)』の全てを書く必要はありません。値しか使わない場合は、『function(x)』でも構いません。
以下、『ES2015』の『アロー関数』を利用して、似たような処理を書いてみます。
var array = [11, 22, 33];
array.forEach((x, i) => {console.log(i + ' : ' + x)});
【結果】
0 : 11 1 : 22 2 : 33
『filter()』
配列中の要素をフィルタリングして、新しい配列を生成します。
array.filter(function(x, i, a) {
// 配列の各要素ごとに呼び出される処理
return true;
});
引数の関数の『x』は配列の各要素、『i』は何番目の要素かの数値、『a』は配列自身になります。
引数の関数が『true』を戻した要素だけを集めた、新しい配列を生成します。
以下、配列をフィルタリングして、コンソール（［F12］→「コンソール」タブ）に出力します。
var array = [11, 22, 33, 44, 55, 66];
var array2 = array.filter(function(x) {
if (x % 2 === 0) {
return true; // 偶数
}
});
console.log(array2);
【結果】
[22, 44, 66]
以下、『ES2015』の『アロー関数』を利用して、似たような処理を書いてみます。
var array = [11, 22, 33, 44, 55, 66]; var array2 = array.filter(x => x % 2 === 0); console.log(array2);
【結果】
[22, 44, 66]
『map()』
配列内のすべての要素に対して関数を実行して、その戻り値の配列を生成します。
array.map(function(x, i, a) {
// 配列の各要素ごとに呼び出される処理
return '新しい値';
});
引数の関数の『x』は配列の各要素、『i』は何番目の要素かの数値、『a』は配列自身になります。
引数の関数の戻り値を集めた、新しい配列を生成します。
以下、配列から新しい配列を生成して、コンソール（［F12］→「コンソール」タブ）に出力します。
var array = [11, 22, 33, 44, 55, 66];
var array2 = array.map(function(x) {
return x * 10;
});
console.log(array2);
【結果】
[110, 220, 330, 440, 550, 660]
以下、『ES2015』の『アロー関数』を利用して、似たような処理を書いてみます。
var array = [11, 22, 33, 44, 55, 66]; var array2 = array.map(x => x * 10); console.log(array2);
【結果】
[110, 220, 330, 440, 550, 660]
『配列』のメソッドは、他にもたくさんあります。以下を参考にしてください。
サンプルの入手
以下は、今回出てきたサンプルです。
ZIPでまとめてダウンロード （右クリックから保存してください）
『sample1.html』（サンプル）を表示
プログラムの中身を見たい場合は、それぞれのHTMLファイルをブラウザで開いたあと、右クリックをして『ソースの表示』を選択してください。
メモ帳で、ファイルの中身を見ることができます。
