bokunonikki.net
JP / EN

JavaScriptのfilterを使って条件に一致するものを抜き出す

Fri Feb 19, 2021
Fri Feb 19, 2021

やりたいこと

のび太君には数人の友達がいます。のび太君は新しくできた友達の特徴が知りたいと思いました。けれど、友達の特徴が記載されているのは、生徒名簿だけです。

しかし、生徒名簿には全校生徒900人が記載されています。手作業で調べていては、明日のピクニックには間に合いません。

なので、のび太君は、これを解決するためにJavaScriptを作って、スクリプトを書くことにしました。

学校から持ってきたデータ

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!-- のび太君のデータ -->
const nobitaData = {
  'friends': [
    'スネ夫',
    'ドラえもん',
    'ジャイアン'
  ]
};

<!-- 生徒名簿 -->
const studentList = 
[
  {
    'trait': '金持ち',
    'name': 'スネ夫'
  }
  ,
  {
    'trait': '猫型ロボット',
    'name': 'ドラえもん'
  }
  ,
  {
    'trait': 'ガキ大将',
    'name': 'ジャイアン'
  }
  ,
  {
    'trait': 'マドンナ',
    'name': 'しずかちゃん'
  }
  ,
  {
    'trait': '勉強できる',
    'name': '出木杉くん'
  },
  {
    'trait': 'よくある名字',
    'name': '田中くん'
  },
  {
    'trait': 'ジャイアンの妹',
    'name': 'ジャイ子'
  }
];

やってみる

ちょっと、ふざけた感じに書きましたが、実際のプログラムでもありありな条件だと思います。

さぁ、どうしますか?

まず、filterメソッドが使えそうですね。

たた、filterだけだとすべての友達を調べるのは無理ですよね。空の配列を用意して、For Loopで回して、さっき作った空の配列にpushしたらなんとかできそうな気がしますね。

とういうことで、こんなんでどうでしょう。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
const nobitaNoFriends = nobitaData.friends;
let friendInClass = [];
for (let i = 0; i < nobitaNoFriends.length; i++) {
  studentList.filter(function (human) {
    if (human.name === nobitaNoFriends[i]) {
      friendInClass.push(human);
    }
  });
}
console.log(friendInClass);

できました。

1
2
3
4
5
[
  { trait: '金持ち', name: 'スネ夫' },
  { trait: '猫型ロボット', name: 'ドラえもん' },
  { trait: 'ガキ大将', name: 'ジャイアン' }
]

改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで

See Also