最近Reactのリアルタイム検索(入力されるたびに検索かけるやつ)を実装した際に使用したメソッドのメモ。

・Object.valuesについて

これはオブジェクト内のプロパティの値のみを配列として返すメソッドになります。

const user = {
  name: "Tom",
  age: 30,
};

// userのプロパティの値が配列に格納
const userValues = Object.values(user);

// ["Tom", 30]
console.log(userValues);

・someについて

配列内に指定された要素があるかのチェックをしてくれるメソッドになります。(true/falseが返ってくる)

// 先ほどのプロパティの値が入った配列を用意
const array = ["Tom", 30];

// 配列の中に Tom があるかのチェック → true
console.log(array.some((value) => value === "Tom");

// 配列の中に 30 があるかのチェック → true
console.log(array.some((value) => value === 30);

// 配列の中に サトテル があるかのチェック → false
console.log(array.some((value) => value === "サトテル");

・indexOfについて

文字列の中に、検索したい文字列が入っているかのチェックをしてくれます。
検索したいものが入っている場合 → 初めて出現したindexを返す。
検索したいものが入っていない場合 → -1 が返ってきます。

// Tom という文字列についてのチェック
const value = "Tom"

// Tom と入力しようとして、最初の T を入力したとこを想定
const input = "T";

// Tom の中に T はあるので → 0が返る(index番号)
console.log(value.indexOf(input));



// Tom　とは関係ない k を入力したとこを想定
const anotherInput = "k";

// Tom の中に k はないので→ -1 が返る
console.log(value.indexOf(anotherInput));

リアルタイム検索の際は、index番号は特に必要ないので
要素があるかどうか("-1"ではない)を確かめるだけでOKです。

注意点としてはTypeScriptを使用している際は、indexOfは文字列にしか使用できないのでtypeofを使用して型ガードをする必要があります。