【JavaScript】繰り返し処理をする時の便利メソッド(forEach,map,filter編)

はじめに

for文を書く時に、もっとスッキリ書けないのかな..
って思う事ありますよね。

便利な繰り返しのメソッドを紹介しますので、
スッキリとしたコードを書く参考にしていただければ幸いです。

対象読者

・ES2015をこれから使っていきたい
・for文をスッキリ書きたい

注意点
これから紹介する記法は主にES2015以降の記法です。
レガシーブラウザに対応させる場合は、トランスパイラ（Babel等）を使用し、
ES5記法にトランスパイルをおこなってください。
（参考記事）
https://qiita.com/mizchi/items/3bbb3f466a3b5011b509#%E3%81%84%E3%81%BE%E3%81%99%E3%81%90es2015%E3%82%92%E4%BD%BF%E3%81%86
https://qiita.com/hietahappousai/items/9570da4b9275425489b2

forEach

配列から、ひとつひとつを取り出して
何かしらの処理をしたい時ありますよね。

例えば、for文で書くとこんな感じです。

const companies = ['google', 'apple', 'facebook'];

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

これをforEachで書き直すと、

const companies = ['google', 'apple', 'facebook'];

companies.forEach( function (company) {
    console.log(company);
});

// アロー関数を使用した場合
companies.forEach(company => console.log(company));

こう書くことができます。

書き方

配列.forEach( コールバック関数 )

コールバック関数の第一引数に順番に要素が入り、コールバックの処理を行っていきます。

詳しい仕様はこちら
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

余談ですが、コールバック関数は必ずしも無名関数でなくとも良いので、
以下のような使い方もできます。

const companies = ['google', 'apple', 'facebook'];

function print(company) {
    console.log(company);
}

companies.forEach(print);

簡単な処理なのであんまり恩恵を感じませんが、
for文に比べるとだいぶすっきりしましたね!

map

例えば偶数が入った、配列が用意されていて、
それを半分にして新しい配列に入れたい時。

for文で書くと

const evenNumbers = [2,4,6];
const halfNumbers = [];

for(let i =0; i < evenNumbers.length; i++) {
    halfNumbers.push(evenNumbers[i] / 2);
}

console.log(halfNumbers);

こうなりますよね。

これもMapを使うことにより、スッキリ書く事ができます。

const evenNumbers = [2,4,6];
const halfNumbers = evenNumbers.map(function (evenNumber) {
    return evenNumber / 2;
})
console.log(halfNumbers);


// アロー関数を使用した場合
const typeArrow = evenNumbers.map( evenNumber => evenNumber / 2);
console.log(typeArrow);

書き方

新しい配列 = 配列.map( コールバック関数 )

先程のforEachとよく似ていますが、
mapはコールバック関数を実行した後、新しい配列として返す事ができます。

returnを書き忘れるとundefinedが返ってくるので、
書き忘れに注意してくださいね!

詳しい仕様はこちら
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

filter

複数のオブジェクトが入っている、配列があったとして
その中から同じプロパティのものを新しい配列にいれるという事をしようと思います。
今回は企業一覧から本社がカリフォルニアの企業を取り出してみたいと思います。

const companies = [
    {name: 'google', location:'カリフォルニア' },
    {name: 'apple', location:'カリフォルニア' },
    {name: 'facebook', location:'カリフォルニア'},
    {name: 'amazon', location:'ワシントン'}
]

const filteredCompanies = [];

for (var i = 0; i < companies.length; i++) {
    if (companies[i].location === 'カリフォルニア')　{
        filteredCompanies.push(companies[i]);
    }
}

console.log(filteredCompanies);

for文で書くとこんな感じですね。

filterを使うとこんな感じで書けます。

const companies = [
    {name: 'google', location:'カリフォルニア' },
    {name: 'apple', location:'カリフォルニア' },
    {name: 'facebook', location:'カリフォルニア'},
    {name: 'amazon', location:'ワシントン'}
]
const filteredCompanies = companies.filter(function(company) {
    return company.location === 'カリフォルニア';
});
console.log(filteredCompanies);


// アロー関数を使用した場合
const typeArrow = companies.filter(company => company.location === 'カリフォルニア');
console.log(typeArrow);

書き方

新しい配列 = 配列.filter( コールバック関数 )
// コールバック関数のreturnに条件式を書く。

returnに書いた条件式に一致した中身のみを新しい配列に入れてくれます。

ちなみに条件式は複数設定する事ができるので、

const companies = [
    {name: 'google', location:'カリフォルニア', id: 1},
    {name: 'apple', location:'カリフォルニア', id: 2 },
    {name: 'facebook', location:'カリフォルニア', id: 3},
    {name: 'amazon', location:'ワシントン', id: 4}
]

const filteredCompanies = companies.filter(function(company) {
    return company.location === 'カリフォルニア' && company.id===1;
});
console.log(filteredCompanies);


// アロー関数を使用した場合
const typeArrow = companies.filter(company => company.location === 'カリフォルニア' && company.id===1);
console.log(typeArrow);

こういった使い方も出来ます。

詳しい仕様はこちら
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

次回はfind,every,some,reduce編書きます。