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

JavaScriptでハッシュのキーを取得するには？Object.keys()メソッドの使い方

JavaScriptでは、ハッシュは一般的にオブジェクトとして表現されます。オブジェクトが持つすべてのキー（プロパティ名）を取得したい場合、最も簡単で推奨される方法がObject.keys()メソッドです。このメソッドは、指定したオブジェクトの列挙可能なプロパティ名を文字列の配列として返します。

基本構文

Object.keys(オブジェクト名)

戻り値はキー名の配列になるため、そのまま配列操作メソッド（forEachやmapなど）と組み合わせて使えるのも大きな利点です。

サンプルコード

以下は、ボタンをクリックするとハッシュ（オブジェクト）のキーを画面に表示する例です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   }
   .result {
      font-size: 20px;
      font-weight: 500;
   }
</style>
</head>
<body>
<h1>JavaScriptでハッシュのキーを取得する</h1>
<div style="color: green;" class="result"></div>
<button class="Btn">表示</button>
<h3>上のボタンをクリックするとハッシュのキーが表示されます</h3>
<script>
   let resEle = document.querySelector(".result");
   let obj = {
      firstName: "Rohan",
      lastName: "Sharma",
      age: 22,
   };
   document.querySelector(".Btn").addEventListener("click", () => {
      resEle.innerHTML += "オブジェクトのキーは " + Object.keys(obj);
   });
</script>
</body>
</html>

コードのポイント

  • obj：firstName・lastName・age の3つのプロパティを持つオブジェクト（ハッシュ）です。
  • Object.keys(obj)：実行すると ["firstName", "lastName", "age"] という配列が返されます。
  • ボタンのクリックイベント内で取得したキーの配列を画面に出力しています。

実行結果

上記のコードを実行すると、次のような画面が表示されます。

JavaScriptでハッシュのキーを取得するには？Object.keys()メソッドの使い方

「表示」ボタンをクリックすると、オブジェクトのキー一覧が出力されます。

JavaScriptでハッシュのキーを取得するには？Object.keys()メソッドの使い方

補足：for...inループでも取得できる

Object.keys()以外にも、for...inループを使えばキーを1つずつ取り出すことができます。

for (let key in obj) {
   if (obj.hasOwnProperty(key)) {
      console.log(key); // firstName, lastName, age が順に出力される
   }
}

hasOwnProperty()によるチェックを行うことで、プロトタイプチェーン上の継承されたプロパティを除外し、オブジェクト自身のキーだけを確実に処理できます。単純にキーの一覧が配列として必要な場合は、Object.keys()を使うのが最もシンプルで安全です。

  1. JavaScript配列で要素を検索する方法を徹底解説！find()メソッドの使い方

    JavaScriptで配列の中から特定の要素を検索したい場面は非常に多くあります。本記事では、最もよく使われるfind()メソッドを中心に、実際に動作するサンプルコードとともに分かりやすく解説します。 find()メソッドとは find()メソッドは、配列の各要素に対して指定したテスト関数（コールバック関数）を実行し、条件を満たした最初の要素の値を返します。条件に一致する要素が存在しない場合は undefined を返します。 基本構文 arr.find(callback(element[, index[, array]])[, thisArg]) callback: 各要素をテストする関数

  2. 複数の値でJavaScript配列の要素を検索する方法

    JavaScriptである配列（arr）が、別の配列（arr1）の複数の値・すべての要素を含んでいるかどうかを確認したい場面はよくあります。そんなときは、every()メソッドとincludes()メソッドを組み合わせることで、シンプルに判定できます。以下はそのサンプルコードです。 コード例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content=