コラム:配列の様々なメソッド

目次

説明

『配列』には様々なメソッドがあります。その中で、『反復メソッド』と呼ばれる関数を引数に取る、少し高度なメソッドを中心にここでは紹介します。

参考

『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ファイルをブラウザで開いたあと、右クリックをして『ソースの表示』を選択してください。

メモ帳で、ファイルの中身を見ることができます。

Cronus Crown(クロノス・クラウン)のトップページに戻る
(c)2002-2018 Cronus Crown (c)1997-2018 Masakazu Yanai
このWebPageに関するご意見・お問い合わせは
サイト情報 弊社への連絡
までお願いします。