javascriptのコードの意味について

現在JavaScriptでリアルタイムフィルタを作っています。
使っているエディタはVScodeです。
参考にしたソースコードは下記のリンクになります。
HTMLテーブルでリアルタイム検索とフィルター処理を実行する方法

上記を参考にして作ったのが以下のコードになります。

HTML

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="main.css">
    <script type="text/javascript" src="main.js" charset="UTF-8"></script>
    <title>リアルタイムフィルター</title>
    <body>
      <div class="flame">
        <div class="title">
          <h1>リアルタイムフィルター</h1>
          <p>入力した文字を含まない要素は非表示となります。</p>
        </div>
        <input id="kensaku_word" onkeyup="searchTable()" type="text">
        <ul class="photos" id="my_table">
          <li class="photo">
            <img src="images/bird.jpg" alt="鳥ちゃん" class="image"> 
            <p>キーワード</p>
            <p>鳥 とり tori</p>
          </li>
          <li class="photo">
            <img src="images/slamdank.jpg" alt="スラムダンク" class="image"> 
            <p>キーワード</p>
            <p>スラムダンク slamdank</p>
          </li>
          <li class="photo">
            <img src="images/canada_natural.jpg" alt="カナダの自然" class="image"> 
            <p>キーワード</p>
            <p>自然 しぜん shizenn</p>
          </li>
          <li class="photo">
            <img src="images/modan.jpg" alt="モダンな家" class="image"> 
            <p>キーワード</p>
            <p>家 いえ ie</p>
          </li>
        </ul>
      </div>
      
    </body>
  </head>
</html>

css

html{
  height: 100%;
  position: relative;
  margin: 0;
}
body{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  margin: 0;
  overflow: scroll;
  height: 100vh;
}
li{
  list-style: none;
}
.flame{
  width: auto;
}
#kensaku_word{
  width: 800px;
  border-color: aqua;
  border-radius: 5px;
  height: 30px;
  padding: 0;
  box-sizing: border-box;
}
.photos{
  display: flex;
  padding: 0;
  flex-wrap: wrap;
}
.photo{
  border: 1px solid black;
  padding: 10px;
  margin-top: 20px;
  width: 44%;
  margin-right: 20px;
}
.image{
  width: 100%;
  height: auto;
}
.photo:last-child{
  margin-right: 0;
}

jvascript

function searchTable(){
    let input,filter, found, table, li, p, i ,j;
    input = document.getElementById("kensaku_word");
    filter = input.value.toLowerCase();
    table = document.getElementById("my_table");
    li = table.getElementsByTagName("li");
    for(i = 0; i < li.length; i++) {
        p = li[i].getElementsByTagName("p");
        for(j = 0; j < p.length; j++) {
            if(p[j].innerHTML.toLowerCase().indexOf(filter) > -1){
                found = true;
            }
        }
            if (found){
                li[i].style.display = "";
                found = false;
            }else {
                li[i].style.display = "none";
            }
        }
    }

これで問題なくリアルタイムフィルターは作ることができたのですが、今回の質問の内容は、javascriptの中の

if(p[j].innerHTML.toLowerCase().indexOf(filter) > -1){
                found = true;
            }

の部分です。
入力した文字を小文字に変換し、検索して、合う文字があったら found = ture;が実行されるのは分かりました（この解釈が間違ってたらご指摘お願います。）。ただindexOf(filter)の後の> -1)の意味が全く分かりません。

①値を何も入れない場合、検索もされず、文字が入っていない時に文字を消去するボタンを押すと何も表示されなくなる。
②-2以下の数字にすると画像は消えないが、検索もされなくなる。
③0以上にしたら何も値を入れていない時と同じ挙動になる。

この3つの挙動は確認しました。しかし、なぜこの数字でこの挙動なのか分かりませんでした。どなたかご教授願います。

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

回答1件

ベストアンサー

【String.prototype.indexOf() - JavaScript | MDN】
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf

indexOf() メソッドは、呼び出す String オブジェクト中で、 fromIndex から検索を始め、指定された値が最初に現れたインデックスを返します。値が見つからない場合は -1 を返します。

投稿2021/02/27 05:19

kei344

総合スコア69596

k-hayashi

2021/02/27 05:57

>値が見つからない場合は -1 を返します。ということは、僕の質問内容を日本語に起こしたら、値を入力しない、もしくは値が見つかった場合はfound = true;を実行するって解釈でいいですか？

kei344

2021/02/27 09:45

間違っています。「値を入力しない場合はfound = true;」になりません。

k-hayashi

2021/02/27 23:15

「> -1」だから値が入ってない0も含まれるんじゃないんですか？

ozwk

2021/02/27 23:39

> 指定された値が最初に現れたインデックスを返します。 0が返るときは「0番目(先頭)にあった」の意です

k-hayashi

2021/02/28 00:20

値が入っていない時は何も動作しない。値が入った瞬間-1なのかどうかでその後の動作が決まるということですか？

think49

2021/02/28 03:52 編集

> 値が入っていない時は何も動作しない。「何に」値が入っていないのか、を詳しく説明したほうが良いと思います。少なくとも、プロパティ値、返り値に「値がない時」はありません。検証用のコードを書いて、各々のコードをコンソール出力してみると見えてくるものがあると思います。 ※空文字は console.log() で空文字を出力してしまって見づらいので、typeof演算子や JSON.stringify() を通して読まないと見づらいと思いますが…。

think49

2021/02/28 04:28

https://jsfiddle.net/xcp9edqL/ 参考コード

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