Angular 配列 findとfilterの使い分け方

findとfilterの使い方

配列で条件に合うときを見つけるには、
findメソッドを使います。
配列で条件に合うとき、
配列の要素をすべて返すときは、
filterメソッドを使います。

説明のため、
先にcourses配列を定義しておきます。
今回は、オブジェクト要素は３つ用意しています。
idは1から3まであります。
idが1のdescriptionは"Angular Core "、
idが2のdescriptionは"Angular Ngrx "、
idが2のdescriptionは"Angular RxJs "、
です。
具体的に使われている例として、
findとfilerの使い方を説明するためのものです。

const courses=[
    {
        id: 1,
        description: "Angular Core ",
        iconUrl: 'https://...',
        longDescription: "The Core modules ",
        category: 'BEGINNER',
        lessonsCount: 5
    },
    {
        id: 2,
        description: "Angular Ngrx ",
        iconUrl: 'https://...',
        longDescription: "Store, Effects, Router Store, Ngrx Entity",
        category: 'ADVANCED',
        lessonsCount: 3
    },
    {
        id: 3,
        description: "Angular RxJs",
        iconUrl: 'https:...',
        longDescription: "RxJs Observable, RxJs Operators",
        category: 'INTERMEDIATE',
        lessonsCount: 6
    }
  ];

findメソッドから説明します。
courses.find()のカッコ内に、
真偽値を返す、アロー式のコールバック関数、
(r)　=>　r.id===ID　を定義します。
関数が真の時、
courses.find()は、 配列のその最初の要素を返します。
ここでは、
オブジェクトのidが2の時、真となり、
console.log(course)で、
それに合ったオブジェトを表示します。

let ID = 2;
const course=courses.find((r)　=>　r.id===ID);
  
console.log(course);

{
  id: 2,
  description: 'Angular Ngrx ',
  iconUrl: 'https://...',
  longDescription: 'Store, Effects, Router Store, Ngrx Entity',
  category: 'ADVANCED',
  lessonsCount: 3
}

filterメソッドは、
courses.filter()のカッコ内に、
findメソッドと同じように、
真偽値を返す、アロー式のコールバック関数、
(r)　=>　r.id＞＝ID　を定義します。
関数が真の時、
courses.filter()は、
配列のそのすべての要素を返します。
オブジェクトのidが2と3の時、真となり、
console.log(course)で、
それに合った2つのオブジェトを表示します。

let ID=2
const course=courses.filter((r)=>r.id>=ID);

console.log(course);

[
  {
    id: 2,
    description: 'Angular Ngrx ',
    iconUrl: 'https://...',
    longDescription: 'Store, Effects, Router Store, Ngrx Entity',
    category: 'ADVANCED',
    lessonsCount: 3
  },
  {
    id: 3,
    description: 'Angular RxJs',
    iconUrl: 'https:...',
    longDescription: 'RxJs Observable, RxJs Operators',
    category: 'INTERMEDIATE',
    lessonsCount: 6
  }
]