Vue
Vue（Javascript）でfilterを使って配列から条件にあったデータだけ抽出する方法
いつもご利用ありがとうございます。
この記事には広告が掲載されており、その広告費によって運営しています。
PR
Vue（Javascript）で filter を使って配列から条件にあったデータだけ抽出する方法についてまとめました。
これからやること
人の名前とカテゴリーがある連想配列から、「イケメン」カテゴリーの人だけを取り出す関数を書きたいと思います。
結論（filter を使ってイケメンだけを抽出する）
コードから。
<template>
<!-- 結果の表示をする -->
<div>{{ afterFilter }}</div>
</template>
<script>
export default {
data() {
return {
//人の名前とカテゴリーの配列
people: [
{
category: "ikemen",
name: "佐藤健",
},
{
category: "ikemen",
name: "横浜流星",
},
{
category: "ikemen",
name: "小栗旬",
},
{
category: "busu",
name: "ore",
},
{
category: "busu",
name: "omae",
},
],
}
},
computed: {
afterFilter() {
//filterをする
return this.people.filter(person => person.category === "ikemen")
},
},
}
</script>このコードだと、表示はこうなります。
[ { "category": "ikemen", "name": "佐藤健" }, { "category": "ikemen", "name": "横浜流星" }, { "category": "ikemen", "name": "小栗旬" } ]見事 ikemen だけが抽出されました。
解説
filter は配列にしか使えません
配列以外に使うと
Error in render: "TypeError: Cannot read properties of undefined (reading 'filter')"このようにエラーが出て、画面何も映らなくなります。がビーン。
配列のデータを１個ずつにして、その中で if 文して return している
afterFilter() {
//１個ずつになったperson、personのcategoryがikemenかどうかを検証している
const filterData = this.people.filter((person) =>
person.category === "ikemen");
},これはつまり、
afterFilter() {
const filterData = this.people.filter((person) => {
if (person.category === "ikemen") {
return person;
}
});
return filterData;
},とやっていることは同じです。
if で同じカテゴリーかどうかを検証して return していて、
if 文に該当して、return された person 全部が const filterData に入ります。
person の部分はなんでも良い
this.people.filter(x => x.category === 'ikemen')this.people.filter(a => a.category === 'ikemen')a でも x なんでも良いです。
プログラミング全般的によく書かれる返り値というやつです。
どうすれば理解が深まるか？
とりあえず filter の関数の中で console.log をしてみましょう。
afterFilter() {
const filterData = this.people.filter((person) => {
console.log(person)//personが一個一個出力される
});
return filterData;
},person が一個一個が出力されましたか？
このように{}の中で自由にコードを書くことができます。
const filterData = this.people.filter(person => {
console.log(person) //personが一個一個出力される
person.category = "ikemen" //personのcategoryを全員ikemenに書き換える
return person.category === "ikemen"
//上の書き方は
// if(person.category === 'ikemen'){
// return person
// }
//と同じ結果になる
})出力結果
[ { "category": "ikemen", "name": "佐藤健" }, { "category": "ikemen", "name": "横浜流星" }, { "category": "ikemen", "name": "小栗旬" }, { "category": "ikemen", "name": "ore" }, { "category": "ikemen", "name": "omae" } ]無事、全員 ikemen になりました！
感動の締めである！！
⇨Javascript（Vue.js）で文字列の最初の１文字目が特定の文字かどうかを判別する方法
PR
まとめ
filter について書いてみました。
苦情、誤りに関する指摘は下の Twitter の DM から頂ければ幸いです。
それでは！
フィードバックのお願い
この記事のフィードバックがありましたらYoutubeの適当な動画にコメントしていただいたり、お問い合わせからご連絡ください。
