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

JavaScriptのarray.keys()メソッドの使い方と実行例をわかりやすく解説

JavaScriptのarray.keys()メソッドとは

JavaScriptのarray.keys()メソッドは、配列のキー（インデックス番号）を格納したArray Iteratorオブジェクトを返すメソッドです。戻り値はイテレータであるため、for...of文などを使って順番に値を取り出して利用します。

構文

array.keys()

引数は不要で、呼び出された配列の各要素のインデックス（0から始まる番号）を持つイテレータが返されます。

サンプル1：車種リストのキーを表示する

次の例では、「Crossover」「Convertible」「Hatchback」「SUV」という4つの車種名が入った配列から、keys()メソッドで各要素のキーを取り出し、画面に表示しています。

<!DOCTYPE html>
<html>
<body>
    <h2>Car Variants</h2>
    <p id="test"></p>
    <script>
        var arrStud = ["Crossover", "Convertible", "Hatchback", "SUV"];
        var res = arrStud.keys();
        for (val of res) {
            document.getElementById("test").innerHTML += val + "<br>";
        }
    </script>
</body>
</html>

出力結果

JavaScriptのarray.keys()メソッドの使い方と実行例をわかりやすく解説

配列の先頭から順に「0」「1」「2」「3」というインデックス番号が、1行ずつ改行されて表示されます。このように、keys()は配列の中身（値）ではなく、位置を示すキーだけを順に返すのが特徴です。

サンプル2：ボタンクリックでキーだけを表示する

続いて、数値が格納された配列に対してkeys()を使用する例です。ページを開いた時点では配列の中身が表示され、ボタンをクリックすると値の代わりにキー（インデックス）の一覧へと切り替わります。

<!DOCTYPE html>
<html>
<body>
    <h2>Ranking Points</h2>
    <p>Click the button to display only the keys</p>
    <button onclick="display()">Result</button>
    <p id="test"></p>
    <script>
        var pointsArr = [10, 20, 30, 40, 50, 60, 70, 80, 90, 1000];
        document.getElementById("test").innerHTML = pointsArr;
        function display() {
            var res = pointsArr.keys();
            for (val of res) {
                document.getElementById("test").innerHTML += val + "<br>";
            }
        }
    </script>
</body>
</html>

出力結果

初期状態では、配列に格納された数値がそのまま表示されています。

JavaScriptのarray.keys()メソッドの使い方と実行例をわかりやすく解説

ここで「Result」ボタンをクリックすると――

JavaScriptのarray.keys()メソッドの使い方と実行例をわかりやすく解説

クリック後は、配列の要素（値）ではなく、キーとなる「0」から「9」までのインデックス番号の一覧に置き換わって表示されることが確認できます。

array.keys()を使う際のポイントまとめ

  • 元の配列は変更されない： keys()は新しいイテレータを返すだけで、対象の配列自体には一切影響を与えません。
  • さまざまな方法で反復処理できる： for...of文のほか、スプレッド構文（[...arr.keys()]）やArray.from()を使えば、キーの配列としてまとめて取得することも可能です。
  • 疎な配列（sparse array）にも対応： 空のスロットがある配列でも、欠けているインデックスもキーとして扱われます。Object.keys()との挙動の違いに注意しましょう。
  • 関連メソッド： 値を取得したい場合はvalues()、キーと値のペアを取得したい場合はentries()を使用します。
  • ブラウザ対応： 主要なモダンブラウザでサポートされています（Internet Explorerは非対応のため注意が必要です）。
  1. JavaScriptにおける配列の分割代入（Destructuring）の基本と使い方

    分割代入（Destructuring）とは、配列から値を取り出して個別の変数に展開するための構文です。ES2015（ES6）で導入されたこの機能を使うと、配列の各要素を簡潔かつ読みやすく変数に割り当てることができます。 配列の分割代入のサンプルコード 以下は、JavaScriptで配列の分割代入を行うコード例です。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport&quo

  2. JavaScriptのObject.keys().map()とArray.map()の違いを徹底解説

    JavaScriptにおいて、Array.map()は配列の各要素に関数を適用し、その結果を新しい配列として返すメソッドです。一方、オブジェクトには直接map()メソッドが用意されていないため、Object.keys().map()という形で、まずObject.keys()を使ってオブジェクトのキーを配列として取得し、そこにmap()を適用するのが一般的なテクニックとなります。 この記事では、両者の使い方の違いを、実際に動作するサンプルコードと実行結果をもとにわかりやすく解説します。 サンプルコード 以下は、Object.keys().map()とArray.map()の動作を比較できるJa