.filter() メソッドの復習

Bykaori

今日は.filter()について復習する。
実は先日取り組んだThe Odin Projectの課題で、
.map()をネストしすぎて訳がわからなくなってしまったので、
Arrayメソッドを復習することにした。

まず、個人的にはこのメソッドとかファンクションとか、
そういう言葉の定義が苦手で頭に入ってこないのだが、なんとなく見た目から
()がついているので、これもfunctionということでいいのだろうか？

大きなくくりではfunctionと言ってもいいが、これはJavascriptに内蔵されたArray（配列[ ]）専用のfunctionで、Arrayと一緒でないと呼べない「Array Methods（配列メソッド）」とのこと。

.filter()の使い方は覚えている。
ただこの先、他のArray Methodsと比較しやすいように、ポイントを押さえておく。

.filter()メソッド

ポイント１：　Arrayの中身を１つずつ順番に見ていく
ポイント２：　与えられた条件に対してtrueかfalseの判定をする
ポイント３：　Trueと判定されたものだけで新しいArrayを作る
ポイント４：　元々のArrayは変更されない

Example Code:

JavaScript
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// Filter even numbers
const evenNumbers = numbers.filter(function(number) {
  return number % 2 === 0;
});

console.log(evenNumbers); // Output: [2, 4, 6, 8, 10]
console.log(numbers); // Outputはオリジナルのまま: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

Arrayの中身がobjectだったら？

10歳以上のオスのplatypusの情報が欲しい、だったらこうなる。

JavaScript
const platypuses = [
  { name: 'Perry', age: 11, gender: 'male' },
  { name: 'Mary', age: 9, gender: 'female' },
  { name: 'B.B', age: 13, gender: 'male' },
  { name: 'Ollie', age: 6, gender: 'male' },
  { name: 'Yammy', age: 5, gender: 'female' },
  { name: 'Milo', age: 8, gender: 'male' },
  { name: 'Emma', age: 12, gender: 'female' },
  { name: 'Luna', age: 7, gender: 'female' }
];

// Filter platypuses older than 10 years and male
const olderThan10AndMale = platypuses.filter(function(platypus) {
  return platypus.age > 10 && platypus.gender === 'male';
});

console.log(olderThan10AndMale);
// Output: [{ name: 'Perry', age: 11, gender: 'male' }, { name: 'B.B', age: 13, gender: 'male' }]

ここまでは順調。
でも調べていたら知らなかったこと出てきた！

ポイント５：　falseだったもの、””（値が入っていないもの）、undefinedやnullは単純にSkipされて、新しいArrayには含まれないというだけ。

この特性を利用して、.filter(Boolean)を使うと
値が入っていなかったり壊れているものを削除して、キレイな新しいArrayを作ることができるとある。

JavaScript
const values = [null, 1, undefined, 0, '', 'hello', false, 42];

const truthyValues = values.filter(Boolean);

console.log(truthyValues);
// Output: [1, 'hello', 42]

そこで見たコード例がこちら。
え？ゼロも消されてしまうの？
消したいものをはっきりさせるにはやはり明記した方が安心かも。

JavaScript
const values = [null, 1, undefined, 0, '', 'hello', false, 42];

const keepValuesYouWant = values.filter(function(value) {
  return value !== null && value !== undefined;
});

console.log(keepValuesYouWant);
// Output: [1, 0, '', 'hello', false, 42]

ObjectのArrayから、条件に合うplatypusの名前だけ欲しいときは？

JavaScript
const platypuses = [
  { name: 'Perry', age: 11, gender: 'male' },
  { name: 'Mary', age: 9, gender: 'female' },
  { name: 'B.B', age: 13, gender: 'male' },
  { name: 'Ollie', age: 6, gender: 'male' },
  { name: 'Yammy', age: 5, gender: 'female' },
  { name: 'Milo', age: 8, gender: 'male' },
  { name: 'Emma', age: 12, gender: 'female' },
  { name: 'Luna', age: 7, gender: 'female' }
];

// Filter platypuses older than 10 years and male
const olderThan10AndMale = platypuses.filter(function(platypus) {
  return platypus.age > 10 && platypus.gender === 'male';
});

console.log(olderThan10AndMale);
// Output: [{ name: 'Perry', age: 11, gender: 'male' }, { name: 'B.B', age: 13, gender: 'male' }]

先ほど見た上記のケースで、
{ name: ‘Perry’, age: 11, gender: ‘male’ },{ name: ‘B.B’, age: 13, gender: ‘male’ }
ではなく、
[“Perry”, “B.B”]という名前だけ欲しいという場合はどうするか？

.filter()は”true”かどうかだけしか見ていないので、
“true”と判定されたものに手を加えたい場合には
他のメソッドを使う必要がある。

その場合は・・・
次回取り上げるテーマ「.map()」を使う！

というわけで今日はここまで。

MDNのページ、改めて見てみると発見がある。
最初は難しい言い回しばかりで、
説明文中の言葉の意味がわからず全くついていけなかったが、
今見ると、ちょっと分かる部分が増えていて嬉しい。

類似投稿