JavaScript、find、Filter

JavaScriptのfindとFilterメソッド

findメソッドについて

find()メソッドは、提供されたテスト関数を満たす配列内の最初の要素の値を返します。

const foods = [1, 2, 3, 4, 5, 6,7,8,9,10];
    const foodNumber = foods.find((food) => {
     return food > 9;
    });

    console.log(foodNumber);

//=> 10

このように10が出力されます。
配列から条件に一致した最初の値を返します。

少し複雑なfind文

const teams = [
    { name : 'バルセロナ' },
    { name : 'レアル', id : 1},
    { name : 'パリ' },
    { name : 'マンU', id : 10}
 ];

const result = teams.find(function(team){
  return team.name === "マンU"
});

console.log(result);

配列.find((引数)　=>{
return 条件;
)};

findメソッドは、配列のそれぞれの添字に対して一度ずつ、callback関数(他の関数に引数として渡される関数で、外側の関数で何らかの処理やアクションを実行すること)を実行し、callback関数がtrueな値を返すまで繰り返します。その場合、findは直ちにその要素の値を返します。そうでなければ、findはundefinedを返します。

Filterメソッドについて

filter()メソッドは、与えられた関数によって実装されたテストに合格した全ての配列からなる新しい配列を生成します。

    const foods = [1, 2, 3, 4, 5, 6,7,8,9,10];
    const foodNumber = foods.filter((food) => {
     return food > 5;
    });

    console.log(foodNumber);

//=> 6,7,8,9,10

このように配列から条件に一致した値をすべて返します。

配列.filter((引数)=>{
return 条件;
});

###文字列の中から条件に合った文字列を抽出する

const teams = ["team1", "team2", "team3"];
const superTeams = teams.filter(function(value) {
  return value === "team1";
});
console.log(superTeams);

//=> team1

###引数
配列の各要素に対して実行するテスト関数です。この関数がtrueを返した要素は残され、falseを返した要素は取り除かれます。

###返り値
テストに合格した要素からなる新しい配列です。テストに合格した要素がなかった場合は、空の配列が返されます

まとめ

findメソッドのところは少し複雑なと表現しましたが、自分としては読むのに時間が
かかってしまいました。もう少し、時間を短縮できるようにしていくことが課題になります。フィードバックやご指摘があれば言っていただけると幸いです。よろしくお願い致します。