配列処理(filterメソッド)

はじめに

今回の記事は配列の便利メソッドfilterの記事になります。mapメソッドと絡めた問題も用意していますので、mapメソッドについて理解が浅い方はこちらの記事を参照して下さい。

fiterメソッドの基本
fiter内コールパック関数の引数は、mapメソッド同様最大３つの引数を設定できます。
第１引数は、配列の一つ一つの要素。第２引数は、index(０からの添字)。第３引数は配列自体。第３引数はめったに使われないと思います。

mapメソッドとの使い分けですが、fiterメソッドは(if文、比較演算子等で)与えた条件に適合する要素だけを抽出した新しい配列を返すといった手段で活用されます。

以下の例で確認しましょう。

const ary = [1, 2, 3, 4, 5];

const result1 = ary.filter((value) => {
  return value > 3;
});

const result2 = ary.filter((_, index) => {
  return index > 3;
});
console.log(result1);//[4,5]
console.log(result2);//[5]

fiterメソッドを用いた例題

①以下の連想配列(users)の中から、管理者権限(admin)を持っている(true)ユーザーに絞り込み、filteredUsersという変数に格納しなさい。

type Users = {
  id: number;
  admin: Boolean;
}[];

const users: Users = [
  { id: 1, admin: true },
  { id: 2, admin: true },
  { id: 3, admin: false },
  { id: 4, admin: true },
  { id: 5, admin: false },
];

解答

const filteredUsers = users.filter(({ admin }) => admin);

②次の連想配列(member)の中から35歳以上の名前(name)の値だけを抜き取った配列が返るような関数getNameOver35を作成しなさい。

type Members = {
  name: string;
  age: number;
  sex: "male" | "female";
}[];

const members: Members = [
  { name: "松井", age: 39, sex: "male" },
  { name: "今田", age: 34, sex: "female" },
  { name: "鈴木", age: 24, sex: "male" },
  { name: "山田", age: 56, sex: "male" },
  { name: "田中", age: 89, sex: "female" },
];

解答

type GetNameOver35<T extends Members, U> = (array: T) => U[];

const getNameOver35: GetNameOver35<Members, string> = (array) => {
  return array.filter(({ age }) => age > 35).map(({ name }) => name);
};
console.log(getNameOver35(members));

③以下のような重複値を含む配列arrの中から、重複値を除く互いに素な配列を作成しなさい。

const arr = [2, 4, 7, 5, 4];

解答

const coprimeArr = arr.filter((num, i, arrr) => {
  return arrr.indexOf(num) === i;
});
console.log(coprimeArr);//[2, 4, 7, 5]

④次の連想配列の中からnameプロパティをもったユーザーに絞り込み、getNameという変数に格納しなさいさい。

interface User {
  id: number;
  name?: string;
}

const users: User[] = [
  { id: 1, name: "豊臣" },
  { id: 2 },
  { id: 3, name: "織田" },
];

解答

const getName = users
  .filter((user: User) => "name" in user)
  .map((user) => user);