2021.04.08

プログラミング

ES6で追加された配列ループメソッドをまとめる！！【forEach,map,filter,find,everyとsome】

はじめに

こんにちは。もっちゃんです！
ES6より追加されたループ処理のメソッドによって、ほとんどのfor文を直感的にスッキリに書けることが分かったのでアウトプットも兼ねて、記事にまとめてみることにしました。

※ES6は2015年から使えるようになった記法です。
対応していないブラウザもあるのでBabelなどのトランスパイラの使用をおすすめします。

これらのメソッドを使うメリット。
今回紹介していくメソッドはどれもfor文を使えば実装できます。
なのになんで、これらのメソッドを使うのか。
それは記述がスッキリすることで、誰にでも分かりやすくなるメリットがあります。

【例】配列をループさせて中身をconsole.logする処理を
for文と、forEachメソッドの両方で書いてみました。

○ for

const array = ["zero","one","two"];

for(let i =0; i < array.length; i++){
console.log( array[i]);
}

const array = ["zero","one","two"];

for(let i =0; i < array.length; i++){

console.log( array[i]);

}

○ forEach

const array = ["zero","one","two"];

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

const array = ["zero","one","two"];

array.forEach( function(element){

console.log(element);

});

記述自体はあまり短くなってないですが、array.lengthやi++などがない分、情報が洗練されていて分かりやすいですね！
これが、今回まとめたメソッドを使用するメリットになります。

今回まとめるメソッドの一覧

forEach
map
filter
find
everyとsome

全てのメソッドの基本形

//基本形
const array = [配列]

array.メソッド(コールバック関数)
// このコールバック関数内で行いたい処理を書きます

//基本形

const array = [配列]

array.メソッド(コールバック関数)

// このコールバック関数内で行いたい処理を書きます

forEach
forEachは、一番シンプルなループ処理メソッドです。
forEachが書けたら残りのメソッドは全て作れちゃいます

//例
//配列の中身を出力していく
array.forEach( function(element){
// elementには、配列の中身が渡ってきます
console.log(element);
});

//例

//配列の中身を出力していく

array.forEach( function(element){

// elementには、配列の中身が渡ってきます

console.log(element);

});

map
mapは、配列の要素全てに処理を行い、新しい配列として生成するときに使用します。

//例
// 配列の中身を倍して、新しい配列に格納する処理
const array = [1, 2, 3];

const newArray = array.map(function (element) {
return element * 2;
//return で処理を返しているところに注意です！！
});

//例

// 配列の中身を倍して、新しい配列に格納する処理

const array = [1, 2, 3];

const newArray = array.map(function (element) {

return element * 2;

//return で処理を返しているところに注意です！！

});

filter
filterは、配列の中身を特定の条件で絞り込むときに使用します。
コールバックの returnのあとには、条件式を記述します。

//例
// 配列の中から偶数の要素だけを取り出して新しい配列に格納する
const array = [1, 2, 3, 4, 5];

const newArray = array.filter(function (element) {
return element % 2 === 0;
});

//例

// 配列の中から偶数の要素だけを取り出して新しい配列に格納する

const array = [1, 2, 3, 4, 5];

const newArray = array.filter(function (element) {

return element % 2 === 0;

});

find
findは、配列の中から特定の要素を探し出すときに使用します。
return のあとには条件式を記述します。
filterと似ているんですが、大きな違いは
条件式がtrueとなった瞬間ループが終了するところです！
↓↓↓
複数の要素を抜き出すことはできませんが、
一意な要素を抜き出す際には、処理のオーバーヘッドを防いでくれる優秀なヤーツですね。

//例 上のfilterと同じ処理を行います。
const array = [1, 2, 3, 4, 5];

const newArray = array.find(function (element) {
return element % 2 === 0;
});
//この場合の newArrayの中身は 2 です。
//element % 2 === 0; が trueとなったところでループが終了しているからです。

//例上のfilterと同じ処理を行います。

const array = [1, 2, 3, 4, 5];

const newArray = array.find(function (element) {

return element % 2 === 0;

});

//この場合の newArrayの中身は 2 です。

//element % 2 === 0; が trueとなったところでループが終了しているからです。

every と some
everyとsomeはこれまでの４つとは少し違います。
違う点は、処理の戻り値として真偽値を返すところです
everyは、配列が条件をすべて満たす場合にtrueを返す
someは、配列が条件を１つでも満たす場合にtrueを返す
というようになってます。

every
配列の要素全てが、条件を満たしているかチェックしたいときに使用します。

//例
//配列の要素が全て偶数かチェックする
const array = [2, 4, 6, 8, 10];

const result = array.every(function (element) {
return element % 2 === 0;
});
if (result) {
console.log("OK");
}
//OK がコンソールに出力されます

//例

//配列の要素が全て偶数かチェックする

const array = [2, 4, 6, 8, 10];

const result = array.every(function (element) {

return element % 2 === 0;

});

if (result) {

console.log("OK");

}

//OK がコンソールに出力されます

some
配列の要素どれか１つでも、条件を満たしているかチェックしたいときに使用します。

//例
//配列に偶数が含まれているかチェックする
const array = [1, 2, 3, 4, 5, 6];

const result = array.some(function (element) {
return element % 2 === 0;
});
if (result) {
console.log("OK");
}
//OK がコンソールに出力されます