【JavaScript】filter()で配列や連想配列から条件を満たす新たな配列を作成する！

エンジニアに特化した転職エージェント！

・IT/Web系エンジニアの経験者の方
・どこの転職エージェントを利用しようか迷っている方

それなら、キッカケエージェントにご相談！

キッカケエージェントでは、少数精鋭のエージェントが、エンジニアの経験やスキル、志向性などをカウンセリングし、的確なアドバイスを提供します！

また、徹底した企業へのヒアリングにより、最適なマッチングを実現し、今では内定率が一般的なエージェントの2倍以上となっています！

転職エージェントに迷っている方、まずは無料でキャリア相談から！

エンジニア特化の転職支援【キッカケエージェント】

(この記事は2022年10月28日に投稿されました。)

JavaScriptで配列から条件を満たす新たな配列を作成する方法としてfilter()があります。

filter()とは、配列から条件を満たすデータ(値)を抽出し、新しい配列を作成するメソッドになります。

条件を満たすデータを抽出することから、「条件を満たす値が格納された新たな配列」を返り値として返すようになります。

そしてfilter()は、条件に合わせてデータを抽出するだけでなく、他のオブジェクトと比較をとってフィルターをかけるということもできます。

また、filter()でパラメータとして使用するコールバック関数の引数を変更することができるため、利便性がとても高いです。

そのため、配列の中からこの条件を満たす値だけを取り出したいと思った場合はfilter()を使用しましょう。

今回はJavaScriptのfilter()で配列や連想配列から条件を満たす新たな配列を作成する方法について紹介していきます。

この記事はこんな方におすすめ

filter()とは

filter()とは、配列から条件を満たす値を取りだして新しい配列を作成するメソッドになります。

配列の中から条件に合う値を厳選し、厳選した値を新たな配列に格納するイメージになります。

filter()の書き方

filter()の書き方は下記のようになります。

対象の配列.filter(コールバック関数, [オブジェクト]);

1	対象の配列.filter(コールバック関数, [オブジェクト]);

対象の配列の後ろにfilter()と追記し、必須パラメータを1つ指定します。

また、任意なパラメータを1つ指定することができます。

filter()のパラメータ

filter()のパラメータは下記のようになります。

コールバック関数(必須):
指定した配列に対して行いたい処理を関数で指定する
オブジェクト(任意):
コールバック関数で使用するためのオブジェクト(文字列や配列など)を指定する

filter()は必須なパラメータとして「コールバック関数」を指定します。

そして任意なパラメータとして「オブジェクト」を指定することができます。

filter()の返り値

filter()の返り値は「条件を満たす値が格納された新たな配列」となります。

filter()で配列から条件を満たす新たな配列を作成するサンプルコード

filter()で配列から条件を満たす新たな配列を作成するサンプルコードをご紹介します。

ここでは、下記の2つのパターンでreduce()を使用します。

配列に値が存在する場合
配列に値が存在しない場合

配列に値が存在する場合

配列の値が存在する場合にfilter()を使用します。

⚫︎ Main.js

console.log('● 対象の配列-1');
var intNum = [12, 13, 14, 15, 100, 120];
console.log(intNum);

console.log('● filter()使用後-1');
var num_flt1 = intNum.filter(function(value) {
    return value % 2 == 0;
})
console.log(num_flt1);

console.log('● 対象の配列-2');
var strNum = ['12', '13', '14', '15', '100', '120'];
console.log(strNum);

console.log('● filter()使用後-2');
var num_flt2 = strNum.filter(function(value) {
    return value != '100';
})
console.log(num_flt2);

console.log('● 対象の配列-1');

var intNum = [12, 13, 14, 15, 100, 120];

console.log(intNum);

console.log('● filter()使用後-1');

var num_flt1 = intNum.filter(function(value) {

return value % 2 == 0;

})

console.log(num_flt1);

console.log('● 対象の配列-2');

var strNum = ['12', '13', '14', '15', '100', '120'];

console.log(strNum);

console.log('● filter()使用後-2');

var num_flt2 = strNum.filter(function(value) {

return value != '100';

})

console.log(num_flt2);

実行結果

filter()によって配列から条件を満たす値を格納した新たな配列が作成されています。

そのため、数値が格納されている配列には偶数の値を、格納している配列が表示されています。

そして、文字列が格納されている配列には、「100」以外の値を格納している配列が表示されています。

配列に値が存在しない場合

続いて、配列に値が存在しない場合にfilter()を使用します。

⚫︎ Main.js

console.log('● 対象の配列');
var num = [];
console.log(num);

console.log('● filter()使用後');
var num_flt = num.filter(function(value) {
    return value % 2 == 0;
})
console.log(num_flt);

console.log('● 対象の配列');

var num = [];

console.log(num);

console.log('● filter()使用後');

var num_flt = num.filter(function(value) {

return value % 2 == 0;

})

console.log(num_flt);

実行結果

配列に値が存在しないため、filter()条件を満たす新しい配列を作成することができません。

そのため、空の配列が表示されています。

filter()で連想配列から条件を満たす新たな配列を作成するサンプルコード

filter()で連想配列から条件を満たす新たな配列を作成するサンプルコードをご紹介します。

filter()は連想配列には直接使用することはできません。

そのため、キーと値を別々の配列に分けて使用する必要があります。

キーから条件を満たす新たな配列を作成する場合

filter()で連想配列のキーから条件を満たす別の配列を作成します。

連想配列のキーを取り出す場合はObject.keys()を使用します。

⚫︎ Main.js

console.log('● 対象の連想配列');
var num = {
    'un': 1, 
    'duex': 2,
    'trois': 3,
    'quatre': 4,
    'cinq': 5
    };
console.log(num);

console.log('● キーを取り出す');
var num_keys = Object.keys(num)
console.log(num_keys);

console.log('● filter()使用後');
var num_flt = num_keys.filter(function(value) {
    return value != 'un';
})
console.log(num_flt);

console.log('● 対象の連想配列');

var num = {

'un': 1,

'duex': 2,

'trois': 3,

'quatre': 4,

'cinq': 5

};

console.log(num);

console.log('● キーを取り出す');

var num_keys = Object.keys(num)

console.log(num_keys);

console.log('● filter()使用後');

var num_flt = num_keys.filter(function(value) {

return value != 'un';

})

console.log(num_flt);

実行結果

filter()によってObject.keys()で取り出した連想配列のキーから条件を満たす新たな配列を作成しています。

そのため、「un」の文字列以外のキーを格納した配列が表示されています。

値から条件を満たす新たな配列を作成する場合

filter()で連想配列の値から条件を満たす新たな配列を作成します。

連想配列の値を取り出す場合はObject.values()を使用します。

⚫︎ Main.js

console.log('● 対象の連想配列');
var num = {
    'un': 1, 
    'duex': 2,
    'trois': 3,
    'quatre': 4,
    'cinq': 5
    };
console.log(num);

console.log('● 値を取り出す');
var num_vals = Object.values(num)
console.log(num_vals);

console.log('● filter()使用後');
var num_flt = num_vals.filter(function(value) {
    return value > 3;
})
console.log(num_flt);

console.log('● 対象の連想配列');

var num = {

'un': 1,

'duex': 2,

'trois': 3,

'quatre': 4,

'cinq': 5

};

console.log(num);

console.log('● 値を取り出す');

var num_vals = Object.values(num)

console.log(num_vals);

console.log('● filter()使用後');

var num_flt = num_vals.filter(function(value) {

return value > 3;

})

console.log(num_flt);

実行結果

filter()によってObject.values()で取りした連想配列の値から条件を満たす新しい配列を作成しています。

そのため、「3以上」の値を格納した配列が表示されています。

filter()で多次元配列から条件を満たす新たな配列を作成する場合

filter()で多次元配列から条件を満たす新たな配列を作成します。

2次元配列の場合

2次元配列に対してfilter()を使用します。

⚫︎ Main.js

console.log('● 対象の2次元配列');
var num = [
    [12, 13, 14, 15, 16], 
    [17, 18, 19, 20, 21],
    [22, 23, 24, 25, 26]
    ];
console.log(num);

console.log('● filter()使用後-1');
var num_flt1 = num[2].filter(function(value) {
    return value != 0;
})
console.log(num_flt1);

console.log('● filter()使用後-2');
var num_flt2 = num.map(function(value) {
    var num_flt_2_i = value.filter(function(value2) {
        return value2 % 2 != 0;
    })
    return num_flt_2_i
})
console.log(num_flt2)

console.log('● 対象の2次元配列');

var num = [

[12, 13, 14, 15, 16],

[17, 18, 19, 20, 21],

[22, 23, 24, 25, 26]

];

console.log(num);

console.log('● filter()使用後-1');

var num_flt1 = num[2].filter(function(value) {

return value != 0;

})

console.log(num_flt1);

console.log('● filter()使用後-2');

var num_flt2 = num.map(function(value) {

var num_flt_2_i = value.filter(function(value2) {

return value2 % 2 != 0;

})

return num_flt_2_i

})

console.log(num_flt2)

実行結果

filter()によって2次元配列から条件を満たす新たな配列を作成しています。

また、map()の中にfilter()を使用すると、2次元配列に格納されている全ての値から条件を満たす新たな2次元配列を作成することができます。

3次元配列の場合

3次元配列に対してfilter()を使用します。

⚫︎ Main.js

console.log('● 対象の3次元配列');
var num = [
    [[15, 16, 17, 18, 19], [20, 21, 22, 23, 24],[25, 26, 27, 28, 29]],
    [[30, 31, 32, 33, 34], [35, 36, 37, 38, 39],[40, 41, 43, 44, 45]]
    ];
console.log(num);

console.log('● filter()使用後-1');
var num_flt1 = num[1][2].filter(function(value) {
    return value % 2 == 0;
})
console.log(num_flt1);

console.log('● filter()使用後-2');
var num_flt2 = num.map(function(value1) {
    var num_flt_2_1 = value1[0].filter(function(value) {
        return value % 2 == 0;
    })
    return num_flt_2_1
})
console.log(num_flt2)

console.log('● filter()使用後-3');
var num_flt3 = num.map(function(value1) {
    var num_flt3_2 = value1.map(function(value2) {
        var num_flt3_1 = value2.filter(function(value3) {
            return value3 % 2 == 0;
        })
        return num_flt3_1
    })
    return num_flt3_2
})
console.log(num_flt3)

console.log('● 対象の3次元配列');

var num = [

[[15, 16, 17, 18, 19], [20, 21, 22, 23, 24],[25, 26, 27, 28, 29]],

[[30, 31, 32, 33, 34], [35, 36, 37, 38, 39],[40, 41, 43, 44, 45]]

];

console.log(num);

console.log('● filter()使用後-1');

var num_flt1 = num[1][2].filter(function(value) {

return value % 2 == 0;

})

console.log(num_flt1);

console.log('● filter()使用後-2');

var num_flt2 = num.map(function(value1) {

var num_flt_2_1 = value1[0].filter(function(value) {

return value % 2 == 0;

})

return num_flt_2_1

})

console.log(num_flt2)

console.log('● filter()使用後-3');

var num_flt3 = num.map(function(value1) {

var num_flt3_2 = value1.map(function(value2) {

var num_flt3_1 = value2.filter(function(value3) {

return value3 % 2 == 0;

})

return num_flt3_1

})

return num_flt3_2

})

console.log(num_flt3)

実行結果

filter()によって3次元配列から条件を満たす新たな配列を作成しています。

また、こちらもmap()の中にfilter()を使用すると、3次元配列に格納されている全ての値から条件を満たす新たな3次元配列を作成することができます。

filter()でオブジェクトと比較して条件を満たす新たな配列を作成する場合

filter()でオブジェクトと比較して条件を満たす新たな配列を作成する場合は、パラメータに「オブジェクト」を指定します。

オブジェクトを指定することで、他の配列やデータを条件に使用することができます。

オブジェクトとして指定したデータはコールバック関数内で「this」として使用します。

⚫︎ Main.js

console.log('● 対象の配列');
var num = [12, 13, 14, 15, 100, 120];
console.log(num);

var obj = [15, 19, 20, 31];
console.log('● filter()使用後');
var num_flt = num.filter(function(value) {
        return value >= this[3];
    
},obj);
console.log(num_flt);

console.log('● 対象の配列');

var num = [12, 13, 14, 15, 100, 120];

console.log(num);

var obj = [15, 19, 20, 31];

console.log('● filter()使用後');

var num_flt = num.filter(function(value) {

return value >= this[3];

},obj);

console.log(num_flt);

実行結果

filter()によってオブジェクトと比較して、条件を満たす新たな配列が作成しています。

そのため、objの「31」より大きい値を格納した新たな配列が表示されています。

filter()でコールバック関数で指定する引数を変更する場合

これまでコールバック関数の引数は1つ指定していましたが、実は3つまで引数を取得することができます。

引数が多くなると、値以外にも指定できる部分が増えてくるため、filter()の利便性がとても高くなります。

そのため、ここではコールバック関数を下記の2つのパターンでご紹介していきます。

コールバック関数の引数を2つ指定する場合
コールバック関数の引数を3つ指定する場合

コールバック関数の引数を2つ指定する場合

コールバック関数の引数を2つ指定する場合にfilter()を使用してみます。

2つ目の引数は「インデックス」を指定することができます。

インデックスを指定することで、配列に格納されている値のインデックスを指定して処理を行うことが可能になります。

⚫︎ Main.js

console.log('● 対象の配列');
var num = [12, 13, 14, 15, 100, 120];
console.log(num);

var obj = [1004, 12, 799, 123, 56, 90];
console.log('● filter()使用後');
var num_flt = num.filter(function(value, index) {
    return value >= this[index]
}, obj)
console.log(num_flt);

console.log('● 対象の配列');

var num = [12, 13, 14, 15, 100, 120];

console.log(num);

var obj = [1004, 12, 799, 123, 56, 90];

console.log('● filter()使用後');

var num_flt = num.filter(function(value, index) {

return value >= this[index]

}, obj)

console.log(num_flt);

実行結果

filter()のコールバック関数の引数を2つ指定することで、インデックスを指定しながら条件を満たす新しい配列を作成することができます。

そのため、元の配列の値(「オブジェクトの値 <= 元の配列の値」の場合)が格納された新たな配列が表示されています。

コールバック関数の引数を3つ指定する場合

コールバック関数の引数を3つ指定する場合にfilter()を使用してみます。

3つ目の引数は「配列」を指定することができます。

配列を指定することで、指定した配列の値を操作することが可能になります。

⚫︎ Main.js

console.log('● 対象の配列');
var num = [12, 13, 14, 15, 100, 120];
console.log(num);

console.log('● filter()使用後');
var num_flt = num.filter(function(value, index, array) {
    
    if(value % 3 == 0) {
        array[index] = 1000
        return value;
    }
})
console.log(num_flt);

console.log('● 元の配列');
console.log(num)

console.log('● 対象の配列');

var num = [12, 13, 14, 15, 100, 120];

console.log(num);

console.log('● filter()使用後');

var num_flt = num.filter(function(value, index, array) {

if(value % 3 == 0) {

array[index] = 1000

return value;

}

})

console.log(num_flt);

console.log('● 元の配列');

console.log(num)

実行結果

filter()のコールバック関数の引数を3つ指定することで新しい配列を作成しつつ、元の配列も変更しています。

そのため、こちらも同様に配列の番号が偶数の場合は「1000倍」された値を、奇数の場合は「100倍」された値を格納した新たな配列が表示されています。

そして、元の配列の偶数番号の値には「1」を、奇数番号の値には「10000」が格納されています。

filter()を使用した実際のケース

filter()を使用した実際のケースについてご紹介します。

例えば、年齢のボタンを押すと、ボタンに書かれた年齢のリストを表示するような画面を作成してみます。

⚫︎ index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>filler</title>
<script src="main.js"></script>
</head>
<body>
    <h1>年齢フィルター</h1>
    <div class= "btnArea">
        <button class= 'btn' data-age="20">20代</button>
        <button class= 'btn' data-age="30">30代</button>
        <button class= 'btn' data-age="40">40代</button>
    </div>
    <div class = "personArea">
    </div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>filler</title>

</head>

<body>

<h1>年齢フィルター</h1>

</div>

</div>

</body>

</html>

⚫︎ main.js

var list = [
        {name: '田中', old: 20},
        {name: '御子柴', old: 31},
        {name: '安倍', old: 50},
        {name: '鈴木', old: 29},
        {name: '多田', old: 18},
        {name: '木村', old: 35},
        {name: '中居', old: 47},
        {name: '山本', old: 48}
    ]
    var btn = document.querySelectorAll('.btn')
    var divArea = document.querySelector('.personArea')
    btn.forEach(function(element) {
        element.addEventListener('click', function() {
        var list_age = parseInt(this.getAttribute('data-age'))

        var list_filt = list.filter(function(value) {
            if(value.old >= list_age && value.old < list_age + 10) {
                return value;
            } 
        })
        filterList(list_filt)
    }) 
})

function filterList(ele) {
    listReset()
    ele.forEach(function(value, index) {
        var num = 0
        num = index + 1
        var id = 'listEle' + num
        var new_element = document.createElement('li');
        new_element.setAttribute('id', id);
        new_element.textContent = value.name + ': ' +　value.old + '歳'
        divArea.appendChild(new_element) 
    })
}
function listReset() {
    document.querySelector('.personArea').innerHTML = ``;
}

var list = [

{name: '田中', old: 20},

{name: '御子柴', old: 31},

{name: '安倍', old: 50},

{name: '鈴木', old: 29},

{name: '多田', old: 18},

{name: '木村', old: 35},

{name: '中居', old: 47},

{name: '山本', old: 48}

]

var btn = document.querySelectorAll('.btn')

var divArea = document.querySelector('.personArea')

btn.forEach(function(element) {

element.addEventListener('click', function() {

var list_age = parseInt(this.getAttribute('data-age'))

var list_filt = list.filter(function(value) {

if(value.old >= list_age && value.old < list_age + 10) {

return value;

}

})

filterList(list_filt)

})

function filterList(ele) {

listReset()

ele.forEach(function(value, index) {

var num = 0

num = index + 1

var id = 'listEle' + num

var new_element = document.createElement('li');

new_element.setAttribute('id', id);

new_element.textContent = value.name + ': ' +　value.old + '歳'

divArea.appendChild(new_element)

})

}

function listReset() {

document.querySelector('.personArea').innerHTML = ``;

}

実行結果

filter()を利用して年齢のフィルター画面を作成しています。

そのため、年齢のボタンを押すと、各年齢層の名前と年齢がリストとして表示されるようになります。

また、今回はcreateElement()を使用してliタグの要素を作成しています。

もし、createElement()について詳しく知りたい場合は下記の記事をご参考ください。

Sossyの助太刀ブログ

12月 17, 2022

【JavaScript】createElement()で新しいHTML要素を作成する！

https://sossy-blog.com/useful/7643/

コールバック関数を使用するメソッドの一覧

filter()以外にもコールバック関数を使用するメソッドが存在します。

そのため、ここではコールバック関数を使用するメソッドの一覧についてご紹介します。

map()

map()とは、指定した配列から新しい配列を作成するメソッドになります。

⚫︎ Main.js

console.log('● 対象の配列');
var num = [12, 13, 14, 15, 100, 120];
console.log(num);

console.log('● map()使用後');
var num_map = num.map(function(value) {
    
    value = Math.pow(value, 2)
    
    return value;
})
console.log(num_map);

console.log('● 対象の配列');

var num = [12, 13, 14, 15, 100, 120];

console.log(num);

console.log('● map()使用後');

var num_map = num.map(function(value) {

value = Math.pow(value, 2)

return value;

})

console.log(num_map);

実行結果

map()によって指定した配列から新たな配列が作成されています。

そのため、指定した配列の値にそれぞれ2乗した値を格納した新しい配列が表示されています。

もし、map()について詳しく知りたい場合は下記の記事をご参考ください。

Sossyの助太刀ブログ

10月 22, 2022

【JavaScript】map()で指定した配列や連想配列から新たな配列を作成する！

https://sossy-blog.com/useful/6285/

reduce()

reduce()とは、配列から単一の値を作成するメソッドになります。

⚫︎ Main.js

console.log('● 対象の配列');
var num = [12, 13, 14, 15, 100, 120];
console.log(num);

console.log('● reduce()使用後');
var num_redu = num.reduce(function(value1, value2) {
    
    return value1 - value2;
})
console.log(num_redu);

console.log('● 対象の配列');

var num = [12, 13, 14, 15, 100, 120];

console.log(num);

console.log('● reduce()使用後');

var num_redu = num.reduce(function(value1, value2) {

return value1 - value2;

})

console.log(num_redu);

実行結果

reduce()によって指定した配列から単一の値を作成しています。

今回のは値の引き算になるため、「-250」が表示されています。

もし、reduce()について詳しく知りたい場合は下記の記事をご参考ください。

Sossyの助太刀ブログ

10月 25, 2022

【JavaScript】reduce()で配列や連想配列から単一の値を作成する！

https://sossy-blog.com/useful/6639/

sort()

sort()とは、配列の値を並び替えるメソッドになります。

⚫︎ Main.js

console.log('● 対象の配列');
var num = [19, 13, 14, 15, 190, 120];
console.log(num);

console.log('● sort()使用後');
var num_sort = num.sort(function(value1, value2) {
    return value1 - value2
})
console.log(num_sort);

console.log('● 対象の配列');

var num = [19, 13, 14, 15, 190, 120];

console.log(num);

console.log('● sort()使用後');

var num_sort = num.sort(function(value1, value2) {

return value1 - value2

})

console.log(num_sort);

実行結果

sort()によって、配列の値を並び替えています。

今回は、降順に設定しているため、配列が小さい順に並び替わっています。

もし、sort()について詳しく知りたい場合は下記の記事をご参考下さい。

Sossyの助太刀ブログ

10月 29, 2022

【JavaScript】sort()で指定した配列や連想配列の値を並び替える！

https://sossy-blog.com/useful/6746/

find()

find()とは、配列から条件に合う要素を取り出すメソッドになります。

⚫︎ Main.js

console.log('● 対象の配列');
var num = [1, 2, 3, 4, 5, 6];
console.log(num);

console.log('● find()使用後');
var num_find = num.find(function(value) {
    return value == 5
})
console.log(num_find);

console.log('● 対象の配列');

var num = [1, 2, 3, 4, 5, 6];

console.log(num);

console.log('● find()使用後');

var num_find = num.find(function(value) {

return value == 5

})

console.log(num_find);

実行結果

find()によって、配列から条件に合う要素を取り出しています。

今回は、条件が「5」であるため、配列の要素に格納されている「5」が表示されています。

もし、find()について詳しく知りたい場合は下記の記事をご参考下さい。

Sossyの助太刀ブログ

11月 03, 2022

【JavaScript】find()で配列や連想配列から条件を満たす要素を取得する！

https://sossy-blog.com/useful/6944/

some()

some()とは、配列のいずれかの要素が条件を満たしているかどうかを確認するメソッドになります。

満たしている場合は「true」を、満たしていない場合は「false」を返すようになります。

⚫︎ Main.js

console.log('● 対象の配列');
var num = [189, 173, 194, 105, 197, 120];
console.log(num);

console.log('●　some()使用後-1');
var some1 = num.some(function(value) {
    return value < 106;
})
console.log(some1);

console.log('●　some()使用後-2');
var some2 = num.some(function(value) {
    return value < 100;
})
console.log(some2);

console.log('● 対象の配列');

var num = [189, 173, 194, 105, 197, 120];

console.log(num);

console.log('●　some()使用後-1');

var some1 = num.some(function(value) {

return value < 106;

})

console.log(some1);

console.log('●　some()使用後-2');

var some2 = num.some(function(value) {

return value < 100;

})

console.log(some2);

実行結果

some()によって、配列のいずれかの要素が条件を満たしているかどうかを確認しています。

そのため、「106より小さい」という条件では「105」の要素が満たしているため「true」が表示されています。

また、「100より小さい」という条件では全ての要素が満たしていないため「false」が表示されています。

もし、some()について詳しく知りたい場合は下記の記事をご参考下さい。

Sossyの助太刀ブログ

1月 22, 2023

【JavaScript】some()で配列や連想配列のいずれかの要素が条件を満たすか調べる！

https://sossy-blog.com/useful/7960/

forEach()

forEach()とは、配列の要素に対して順番に処理を行うメソッドになります。

⚫︎ Main.js

console.log('● 対象の配列');
var numStr = ['189', '173', '194', '105', '197', '120'];
console.log(numStr);

console.log('●　forEach()使用後');
numStr.forEach(function(value) {
    console.log('要素: ' + value);
})

console.log('● 対象の配列');

var numStr = ['189', '173', '194', '105', '197', '120'];

console.log(numStr);

console.log('●　forEach()使用後');

numStr.forEach(function(value) {

console.log('要素: ' + value);

})

実行結果

forEach()によって、配列の要素に対して順番に処理を行っています。

そのため、それぞれの配列の要素の前に「要素:」という文字列が連結して表示されています。

もし、forEach()について詳しく知りたい場合は下記の記事をご参考下さい。

Sossyの助太刀ブログ

2月 18, 2023

【JavaScript】forEach()で配列や連想配列の要素に対して順番に処理を行う！

https://sossy-blog.com/useful/8103/

まとめ

⚫︎ filter()とは配列から条件に合う値のみを抽出し、新たな配列を作成するメソッドである

⚫︎ filter()は下記のようなパラメータを指定して使用する
・コールバック関数(必須)
・オブジェクト(任意)

⚫︎ 配列に値が存在する場合にfilter()を使用すると、条件に合う値のみを抽出し、新たな配列を作成する

⚫︎ 配列に値が存在しない場合にfilter()を使用すると、空の配列を返す

⚫︎ 連想配列対してfilter()は直接使用できないため、キーと値を別々にして使用する

⚫︎ filter()は多次元配列から条件に合う値を取り出し、新しい配列を作成することができる
(新しい多次元配列を返り値として返したい場合はmap()とfilter()を組み合わせて使用する)

⚫︎ filter()のパラメータに「オブジェクト」を指定することで、オブジェクトと比較して条件を満たす新たな配列を作成することができる

⚫︎ filter()のコールバック関数の引数を2つ指定すると、インデックスを指定しながら条件を満たす新たな配列を作成できる

⚫︎ filter()のコールバック関数の引数を3つ指定すると、条件を満たす新たな配列を作成しながら、元の配列の値を操作できる

⚫︎ コールバック関数を使用するメソッドはfilter()以外にも下記のようなメソッドがある
・map()
(配列に対して処理を行い、新たな配列を作成する)
・reduce()
(配列を単一の値にする)
・sort()
(配列の値を並び替える)
・find()
(列から条件に合う要素を取り出す)
・some()
(配列のいずれかの要素が条件を満たしているかどうかを確認する)
・forEach()
(配列の要素に対して順番に処理を行う)

filter()とは

filter()の書き方

filter()のパラメータ

filter()の返り値

filter()で配列から条件を満たす新たな配列を作成するサンプルコード

配列に値が存在する場合

配列に値が存在しない場合

filter()で連想配列から条件を満たす新たな配列を作成するサンプルコード

キーから条件を満たす新たな配列を作成する場合

値から条件を満たす新たな配列を作成する場合

filter()で多次元配列から条件を満たす新たな配列を作成する場合

2次元配列の場合

3次元配列の場合

filter()でオブジェクトと比較して条件を満たす新たな配列を作成する場合

filter()でコールバック関数で指定する引数を変更する場合

コールバック関数の引数を2つ指定する場合

コールバック関数の引数を3つ指定する場合

filter()を使用した実際のケース

コールバック関数を使用するメソッドの一覧

map()

reduce()

sort()

find()

some()

forEach()

まとめ

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル