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

JavaScriptのArray.values()メソッドの使い方をわかりやすく解説

Array.values()メソッドとは

JavaScriptのArray.prototype.values()メソッドは、配列の各インデックスに格納された値を順番に取り出せる、新しいArray Iterator（配列イテレータ）オブジェクトを返します。

引数は不要で、呼び出すだけでイテレータを取得できます。返されたイテレータに対してnext()メソッドを呼び出すと、{value: 値, done: 真偽値}という形式のオブジェクトが1つずつ返され、配列の要素を先頭から順に処理することができます。

構文

arr.values()

パラメータと戻り値

  • パラメータ：なし
  • 戻り値：配列の各インデックスの値を含む、新しいArray Iteratorオブジェクト

使用例1：ボタンクリックで値を表示する

次の例では、ボタンをクリックすると、配列の最初の値が画面に表示されます。

<!DOCTYPE html>
<html>
<body>
<h2>デモ見出し</h2>
<p>ボタンをクリックして値を表示します。</p>
<button onclick="display()">結果</button>
<p id="test"></p>
<script>
    function display() {
        var arr = ['p', 'q', 'r'];
        var res = arr.values();
        document.getElementById("test").innerHTML = res.next().value;
    }
</script>
</body>
</html>

実行結果

JavaScriptのArray.values()メソッドの使い方をわかりやすく解説

「結果」ボタンをクリックすると、配列の最初の要素である「p」が表示されます。

JavaScriptのArray.values()メソッドの使い方をわかりやすく解説

使用例2：数値配列から値を取得する

続いて、数値の配列に対してvalues()メソッドを使用した例を見てみましょう。

<!DOCTYPE html>
<html>
<body>
<h2>ランキングポイント</h2>
<p>クリックしてポイントを表示します。</p>
<button onclick="display()">結果</button>
<p id="test"></p>
<script>
    function display() {
        var points = ['10', '20', '30', '40', '50'];
        document.getElementById("test").innerHTML = (points.values()).next().value;
    }
</script>
</body>
</html>

実行結果

JavaScriptのArray.values()メソッドの使い方をわかりやすく解説

「結果」ボタンをクリックすると、最初のポイントである「10」が表示されます。

JavaScriptのArray.values()メソッドの使い方をわかりやすく解説

補足：for...ofループとの組み合わせ

values()が返すイテレータは反復可能（iterable）なオブジェクトなので、for...ofループと組み合わせれば、配列のすべての値を簡単に取り出すこともできます。

const arr = ['a', 'b', 'c'];
for (const value of arr.values()) {
  console.log(value); // a, b, c の順に出力される
}

なお、通常の配列はデフォルトでこのイテレータを持っているため、arr[Symbol.iterator]()とarr.values()は同じ動作になります。配列の値だけを扱いたい場合に、keys()（インデックスを返す）やentries()（キーと値のペアを返す）と使い分けると便利です。

  1. JavaScriptのArray.prototype.sort()メソッドの使い方をサンプルコードで解説

    Array.prototype.sort()は、JavaScriptで配列の要素を並べ替えるための組み込みメソッドです。アルファベット順・数値順といった並び方に加えて、昇順・降順も自由に指定でき、配列操作の中でも特に使用頻度の高いメソッドの一つです。 ただし重要なポイントとして、sort()メソッドはデフォルトではすべての要素を文字列に変換してから比較します。そのため、数値の配列を意図したとおりに並べ替えたい場合は、比較関数を引数として渡す必要があります。 以下は、Array.prototype.sort()メソッドの基本的な使い方を示すサンプルコードです。 サンプルコード <!DOC

  2. JavaScriptのArray.prototype.flat()メソッドとは？配列を指定した深さで平坦化する方法

    Array.prototype.flat()メソッドとはJavaScriptのArray.prototype.flat()メソッドは、ネストされた配列を指定した深さまで再帰的に平坦化（フラット化）するためのメソッドです。元の配列を変更することはなく、平坦化された新しい配列を作成して返します。引数には平坦化の深さ（depth）を数値で指定します。省略した場合はデフォルトで「1」が適用され、「Infinity」を指定すればすべての階層のネストを完全に展開することも可能です。コード例以下は、Array.prototype.flat()メソッドを使用したサンプルコードです。<!DOCTYPE h