jsのfilter()の第二引数が何をしているのかよくわかりません

調べたところfilterの第二引数は配列のインデックス番号を入れるようですが、以下のコードのfilter(,this);がなんなのかよくわかりません。
どうしてthisを使わないといけないのでしょうか？

HTML
1<!DOCTYPE html>
2<html>
3  <head>
4    <title>Vue.js sample</title>
5    <meta charset="utf-8">
6    <link rel="stylesheet" href="style.css" >
7    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
8  </head>
9  <body>
10    <div id="app">
11      <input v-model="findWord">
12      <ul>
13        <li v-for="item in findItems"> {{ item }}</li>
14      </ul>
15    </div>
16
17    <script>
18      new Vue({
19        el: '#app',
20        data: {
21          findWord: '',
22          items:['桃太郎','花咲か爺さん','浦島太郎','かぐや姫','かちかち山']
23        },
24        computed: {
25          // this.findWordが変わったら、その文字が含まれるリストを算出する
26          findItems: function() {
27            if (this.findWord) {
28              return this.items.filter(function(value) {
29                return (value.indexOf(this.findWord) > -1);
30              },this);
31            } else {
32              // this.findWordが空のときは、リストをそのまま返す
33              return this.items;
34            }
35          }
36        }
37      })
38    </script>
39  </body>
40</html>
41

行動規範の内容に同意します

回答3件

ベストアンサー

functionキーワードで作った関数を実行した際、
関数の中身ではthisが再定義されます。

JavaScript
1return this.items.filter(function(value) {
2  return (value.indexOf(this.findWord) > -1);
3},this);

この中では確かに.filter(function(){})という感じで
functionを使って関数を定義していますね。
なのでthis.findWordと比較しようとしても、「は？お前何いってんの？thisにfindWordなんてあるわけねーだろ！」と叱られてしまいます。

まぁその回避の為に.filter()メソッドの第二引数にthis制御用の引数が定義されています。

IE11を見捨てて良いならES2015というバージョンで実装されたアロー関数を使えば問題ありません。
アロー関数にはargumentsやthisを再定義するという(邪魔になりうる)機能は存在しませんので、そのまま利用出来ます。

if文の使い方から若干シンプルにできそうなので多少リファクタリングして、
ES2015の書き方で統一するとこんな感じですね。
慣れない内は中々キモいですが行数が相当抑えられて読み書きしやすいコードになっています。

JavaScript
1new Vue({
2  el: '#app',
3  data: {
4    findWord: '',
5    items:['桃太郎','花咲か爺さん','浦島太郎','かぐや姫','かちかち山']
6  },
7  computed: {
8    findItems () {
9      if (!this.findWord) return this.items;
10      return this.items.filter(value =>
11        value.indexOf(this.findWord) > -1
12        || this.findWord.indexOf(value) > -1 // こんな風に双方向の方がよくね？
13      );
14    }
15  }
16})

投稿2019/05/20 08:29

miyabi-sun

総合スコア21158

退会済みユーザー

2019/05/21 05:31

回答ありがとうございます。わかりやすかったです！！ ES2015の書き方もきちんと学習しようと思います。回答ありがとうございました。

行動規範の内容に同意します

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

thisArg Optional
callback を実行するときに this として使う値です。

これですね。

ES6の書き方だと、アロー関数が適するシーンですね。

js
1              return this.items.filter((value) => {
2                return (value.indexOf(this.findWord) > -1);
3              });

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions#Description

2 つの理由から、アロー関数が導入されました。1 つ目の理由は関数を短く書きたいということで、2 つ目の理由は this を束縛したくない、ということです。

投稿2019/05/20 08:24

otolab

総合スコア765

退会済みユーザー

2019/05/21 05:32

回答ありがとうざいます！！

行動規範の内容に同意します

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/filter#Parameters

Callbackの第2引数は、フィルタしている配列のthisですが、filterの第2引数は、Callbackでthisとして使いたいものです。

この場合、filterするための検索キーの指定に使っていますよね

javascript
1          findItems: function() {
2            if (this.findWord) {
3              return this.items.filter(function(value) {
4                return (value.indexOf(this) > -1);
5              },this.findWord);
6            } else {
7              // this.findWordが空のときは、リストをそのまま返す
8              return this.items;
9            }
10          }