JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのSet.values()メソッドの使い方と実例解説

JavaScriptにおける Set オブジェクトの values() メソッドは、その Set が現在保持しているすべての値を格納したイテレーターオブジェクトを返します。返されたイテレーターに対して next() メソッドを呼び出すことで、要素を先頭から順番に1つずつ取り出すことができます。

なお、keys() メソッドは values() のエイリアス（別名）として定義されており、どちらも同じイテレーターを返します。これは Map オブジェクトとの API 一貫性を保つために設けられています。

構文（シンタックス）

values() メソッドの基本的な構文は次のとおりです。

setObj.values()

引数は不要で、呼び出すだけで Set 内の値を走査するためのイテレーターオブジェクトが取得できます。

使用例

以下のコードでは、4つの文字列を追加した Set オブジェクトを作成し、values() で取得したイテレーターから next() を使って値を順に出力しています。

<html>
<head>
   <title>JavaScript Example</title>
</head>
<body>
   <script type="text/javascript">
      const setObj = new Set();
      setObj.add('Apples');
      setObj.add('Oranges');
      setObj.add('Bananas');
      setObj.add('Grapes');
      var valuesObject = setObj.values();
      for(i=0; i<setObj.size; i++) {
         document.write(valuesObject.next().value);
         document.write("<br>");
      }
   </script>
</body>
</html>

このコードでは、setObj.size（Set の要素数）をループ回数の基準にして、next().value で各要素の値を取り出しています。

実行結果

上記のコードをブラウザで実行すると、Set に追加した順序で次のように表示されます。

Apples
Oranges
Bananas
Grapes

補足：for...of によるより簡潔な書き方

実際の開発では、for...of 構文を使うことで、同じ処理をより簡潔に記述できます。

const setObj = new Set(['Apples', 'Oranges', 'Bananas', 'Grapes']);
for (const value of setObj) {
   console.log(value);
}

Set オブジェクト自体がデフォルトで値のイテレーターを持つため、values() を明示的に呼び出さなくても直接反復処理が可能です。

  1. JavaScriptの関数呼び出しの基本！()を使ってコードを実行する方法

    JavaScriptにおける関数の呼び出し（インボケーション）とはJavaScriptでは、一度定義した関数は、関数名の後ろに () を付けることで呼び出すことができます。これを「関数の呼び出し（インボケーション）」と呼びます。関数は定義しただけでは実行されません。呼び出しを行って初めて、関数定義の中括弧 { } 内に記述されたコードが実際に実行されます。以下は、JavaScriptで関数を呼び出す方法を実装したサンプルコードです。サンプルコード<!DOCTYPE html> <html lang="en"> <head> <met

  2. JavaScriptのNumber()関数とは？使い方とサンプルコードを解説

    JavaScriptのNumber()関数は、引数として渡された値やオブジェクトを、それに対応する数値へ変換するための関数です。真偽値や文字列型の数字、さらにはDateオブジェクトなども数値に変換できるため、データ型の変換処理において非常に便利な組み込み関数の一つです。例えば、Number(true)は「1」、Number(false)は「0」を返します。また、数字のみで構成された文字列「149」を渡せば数値の149に変換され、new Date()で生成した日付オブジェクトを渡すと、1970年1月1日からの経過ミリ秒数が返されます。以下に、Number()関数の動作を確認できるサンプルコードを