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

はじめに

JavaScriptで繰り返し処理をする時に便利なメソッドを紹介致します。
良いコードを書く参考にしていただければ!

対象読者

・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

find

【出来ること】
・配列の中身から条件を満たす値を取得する

今回は例として、idが2の企業をとってくるという
コードを書きます。

for文で書いた場合

const companies = [
    { name: 'google', id: 1 },
    { name: 'facebook', id: 2 },
    { name: 'apple', id: 3 }
];

let company;

for (let i = 0; i < companies.length; i++) {
    if (companies[i].id === 2) {
        company = companies[i];
        break;
    }
}

console.log(company); // { name: 'facebook', id: 2 }

findをつかった場合

const companies = [
    { name: 'google', id: 1 },
    { name: 'facebook', id: 2 },
    { name: 'apple', id: 3 }
];

const company = companies.find(function(company) {
    return company.id === 2;
})
console.log(company); // { name: 'facebook', id: 2 }

// アロー関数で記述した場合
const company02 = companies.find( company => company.id === 2 );
console.log(company02); // { name: 'facebook', id: 2 }

ポイント

・コールバック関数のreturnに条件式を書く
・一番最初に条件にあった値が返される
・return書き忘れ注意、undefinedが返ってくるよ

【注意】
一番最初に条件にあった値が返されるので、

const companies = [
    { name: 'google', id: 1 },
    { name: 'facebook', id: 2 },
    { name: 'apple', id: 3 },
    { name: 'microsoft', id: 2 }
];

const company = companies.find(function(company) {
    return company.id === 2;
})
console.log(company); // { name: 'facebook', id: 2 }

// アロー関数の場合
const company02 = companies.find( company => company.id === 2 );
console.log(company02); // { name: 'facebook', id: 2 }
  

この場合はmicrosoftの値は取得できません。

every,some

【出来ること】
・everyは配列の中身が条件をすべて満たす場合にtrueを返す
・someは配列の中身が条件に一つでも一致すればtrueを返す

例として配列から車を運転出来る人を探すプログラムを書きます。

for文で書いた場合

const persons = [
    {name: '一郎', age: 18},
    {name: 'ニ郎', age: 14},
    {name: '三郎', age: 12}
];

// 18歳以上の人を探そう

// 全てが条件を満たしているかフラグ
let allPersonsOperationCar = true;

// 1つでも条件を満たしているかフラグ
let somePersonsOperationCar = false;

for (let i = 0; i < persons.length; i++) {
    const person = persons[i];
    if (person.age < 18) {
        allPersonsOperationCar = false;
    } else {
        somePersonsOperationCar = true;
    }
}

// 全員が18歳以上でないのでfalse
console.log(allPersonsOperationCar);// false

// 18歳以上の人が1以上いるのでtrue
console.log(somePersonsOperationCar);// true

every,someを使った場合

const persons = [
    {name: '一郎', age: 18},
    {name: 'ニ郎', age: 14},
    {name: '三郎', age: 12}
];

const allPersonsOperationCar = persons.every(function(person) {
    return person.age >= 18;
});

const somePersonsOperationCar = persons.some(function(person) {
    return person.age >= 18;
});

// 全員が18歳以上でないのでfalse
console.log(allPersonsOperationCar); //false

// 18歳以上の人が1以上いるのでtrue
console.log(somePersonsOperationCar); //true


//アロー関数の場合
const allPersonsOperationCar02 = persons.every(person => person.age >= 18);
const somePersonsOperationCar02 = persons.some(person => person.age >= 18);

// 全員が18歳以上でないのでfalse
console.log(allPersonsOperationCar02); //false

// 18歳以上の人が1以上いるのでtrue
console.log(somePersonsOperationCar02); //true

ポイント

・コールバック関数のreturnに条件式を書く
・真偽値が返される
・return書き忘れ注意、falseが返ってくるよ

まとめ

・findは配列の中身から条件を満たす値を取得する
・everyは配列の中身が条件をすべて満たす場合にtrueを返す
・someは配列の中身が条件に一つでも一致すればtrueを返す

スッキリ見やすいコードになると思いますので、
どんどん使って行きましょう・ω・

everyやsomeはフォームのバリデーションを行う際に、
便利だと思います(^^)

最後に

こちらの記事もどうぞ
【JavaScript】繰り返し処理をする時の便利メソッド(forEach,map,filter編)
https://qiita.com/KORPLUS/items/6739209e9bc716e6a8b5

次はreduce編書きます。