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

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

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

例えば、、

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

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

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

実際にやってみよう！

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

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

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

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

例１：名前の長さが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"]

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

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

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

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

今回の条件は、

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

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

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

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

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

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

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

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

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

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

取得できましたね！