【JavaScript】配列の値をフィルタリングしよう

今回はJavaScriptの配列(Array)で、値をフィルタリングする(抽出する)方法をご紹介します!

どのようなことができるか?

例えば、、

  • 生徒の中で点数が80点以上の生徒を取得
  • 名前に”太郎”という文字が含まれる人を取得
  • 名前の長さが4文字以上の人を取得

のように複数の値の中から、ある条件に一致する値を取得することができます。

フィルタリングする感じだね!

実際にやってみよう!

filter()メソッドを使うことで配列から値を抽出することができます!

filter()メソッドは条件がtrueになった値だけ抽出して戻り値として、そのフィルタリングされた値が返ってきます。

const result = [フィルタリングしたい配列].filter(配列の値 =>  条件);

console.log(result) // 条件がtrueになった値だけの配列

例1:名前の長さが4文字以上の人を取得してみよう。

4名の名前が入った配列があります。

この中から名前の長さが4文字以上の名前だけを取得してみましょう!

const users = ["Mike", "Bob", "Catherine", "Michael"];

文字列の長さは lengthで取得が可能です!

const users = ["Mike", "Bob", "Catherine", "Michael"];

const filteredUsers = users.filter(user => user.length > 4);

console.log(filteredUsers); // ["Catherine","Michael"]

コレデ、キャサリンとマイケルだけシュトクデキタネ!!!

例2:テストの点数が80点以上、かつ、名前に”太郎”が含まれる人を取得してみよう

今回のユーザの値はこちらです。

const users = [
  {
    name: "山田太郎",
    score: 82,
  },
  {
    name: "佐々木二郎",
    score: 90,
  },
  {
    name: "宮本太郎",
    score: 72,
  },
  {
    name: "山太郎介",
    score: 100,
  }
];

今回の条件は、

  • テストの点数が80点以上
  • 名前に”太郎”が含まれる

ですので、山田太郎山太郎介が取得できれば成功です。

そして、今回の条件はこのように記載できます。

score > 80 && name.includes("太郎")

文字列.includes("対象の文字列")で対象の文字列が、文字列に含まれているかを調べることができます。

こちらの記事で紹介しております。

【JavaScript】ある文字列に指定の文字が含まれているか調べてみよう

これらをもとに実装をするとこのように実装ができます。

const users = [..] // 省略
const filteredUsers = users.filter(user => {
  return user.score > 80 && user.name.includes("太郎");
});

console.log(filteredUsers); // [{ name: "山田太郎", score: 82 }, { name: "山太郎介", score: 100 }]

取得できましたね!

最後に

ある条件のもと値を抽出したい時はこのように実装してみてください!!

今回の例を実装したソースコードをこちらに記載しておりますので、

こちらで動かしながら、動作を確認してみてください!

See the Pen 【JavaScript】Sample of Array.prototype.filter() by Syohei Yamaki (@syohei-yamaki) on CodePen.