JavaScriptのSetに値が存在するかどうかを確認する方法|has()メソッドの使い方
JavaScriptのSetオブジェクトには、指定した値がセット内に存在するかどうかを調べるためのhas()メソッドが用意されています。このメソッドは、値が見つかればtrue、見つからなければfalseを返します。
基本的な使い方
has()メソッドは、引数として調べたい値を1つ受け取り、その値がSet内に存在するかをブール値(true / false)で返します。以下のコード例を見てみましょう。
コード例
let mySet = new Set();
mySet.add(1);
mySet.add(2);
mySet.add(1); // 重複しているため追加されない
mySet.add(3);
mySet.add("a");
console.log(mySet);
console.log(mySet.has(55));
console.log(mySet.has(""));
console.log(mySet.has({}));
console.log(mySet.has(1));
console.log(mySet.has("a"));
出力結果
Set { 1, 2, 3, 'a' }
false
false
false
true
true
実行結果の解説
Setは重複する値を自動的に排除するため、1を2回add()しても、セットには{ 1, 2, 3, 'a' }という4つの要素だけが格納されます。
has()メソッドの判定結果について詳しく見てみます。
mySet.has(55)→false:セットに55は存在しないため。mySet.has("")→false:空文字列はセットに追加されていないため。mySet.has({})→false:オブジェクトは参照(同一性)で比較されるため、新しい空オブジェクトは既存の要素と一致しません。mySet.has(1)→true:1はセットに存在するため。mySet.has("a")→true:文字列"a"はセットに存在するため。
注意点:オブジェクトの比較について
Setでは、プリミティブ型(数値や文字列など)は値で比較されますが、オブジェクトは参照の同一性で比較されます。そのため、中身が同じでも別々に生成されたオブジェクトは異なるものと判断されます。次の例を見てください。
const obj = { name: "太郎" };
const mySet = new Set();
mySet.add(obj);
console.log(mySet.has(obj)); // true(同じ参照)
console.log(mySet.has({ name: "太郎" })); // false(別の参照)
このように、オブジェクトをhas()で正しく検索したい場合は、追加したときと同じインスタンス(参照)を使う必要があります。
まとめ
Set.prototype.has()メソッドを使えば、セット内に特定の値が存在するかどうかを簡単かつ高速に確認できます。要素の検索は内部的にハッシュテーブルで行われるため、配列のincludes()よりも効率的に動作します。大量のデータから重複を排除しつつ高速な存在チェックを行いたい場合に、Setとhas()の組み合わせは非常に有効です。
-
JavaScriptでテキストボックスの入力値を取得して表示する方法
JavaScriptでは、valueプロパティを使ってテキストボックスに入力された値を取得し、innerHTMLを使うことでその値を段落(<p>要素)に表示することができます。この仕組みは、フォームの入力内容をリアルタイムに画面へ反映させたい場合などによく使われる基本的なテクニックです。 コード例 以下が実際のサンプルコードです。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
-
JavaScriptでhref属性の値を取得する方法|jQueryのattr()メソッド活用ガイド
Web開発では、アンカータグ(<a>)に設定されたリンク先URL、つまりhref属性の値を取得したい場面がよくあります。この記事では、jQueryのattr()メソッドを使って、簡単にhrefの値を取得する方法を解説します。対象となるHTMLの例たとえば、以下のようなアンカータグがあったとします。<a class=demo title=get the url href=./mainPage.jsp/1245>href value at console</a>ここで必要なのは、テキスト部分ではなく、URLそのもの、すなわちhref属性の値「./mainPage