Edited at

【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編書きます。