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

JavaScriptでオブジェクトに動的なプロパティキーを設定する方法【ES6対応】

以前は、オブジェクトに新しいプロパティを作成するには2段階のプロセスが必要でした。しかし、ES6の登場により、この作業は非常にシンプルになりました。現在ではたった1ステップで動的にプロパティを作成できます。本記事では、その方法をわかりやすく解説します。

従来の方法（2ステップ）

コード例

次の例では、プロパティをオブジェクト内で直接宣言するのではなく、オブジェクトの外側で宣言してから代入しています。このため、処理が2ステップに分かれてしまいます。

<html>
<body>
<script>
    let person = 'name';
    let student = {          // ステップ1：オブジェクトを作成
       id: 1,
    };
    student[person] = 'nani';  // ステップ2：後からプロパティを追加
    document.write(JSON.stringify(student));
</script>
</body>
</html>

出力結果

{"id":1,"name":"nani"}


ES6の新しい書き方（1ステップ）

コード例

ES6では「計算済みプロパティ名（Computed Property Names）」と呼ばれる構文が導入されました。ブラケット [ ] の中に変数を指定することで、オブジェクトの宣言時にプロパティキーを直接動的に指定できます。これにより、コードが簡潔になり、可読性も大きく向上します。

<html>
<body>
<script>
   let person = 'name';
   let student = {
      id: 1,
      [person] : "nani"   // 1ステップで動的にプロパティを定義
   };
   document.write(JSON.stringify(student));
</script>
</body>
</html>

出力結果

{"id":1,"name":"nani"}


まとめ

両者の違いを整理すると以下のようになります。

  • ES6以前： オブジェクトを作成した後に、別途プロパティを代入する必要があり、2ステップが必要でした。
  • ES6以降： ブラケット記法 [変数名] を使うことで、オブジェクト宣言時に動的なプロパティキーを1ステップで定義できます。

動的なキーを持つオブジェクトを頻繁に扱う場合は、ES6の計算済みプロパティ名を活用することで、より短く保守しやすいコードを書くことができます。

  1. JavaScriptオブジェクトからプロパティを削除する方法｜delete演算子の使い方

    JavaScriptのオブジェクトからプロパティを削除するには、delete演算子を使用します。delete演算子を使うと、指定したプロパティがオブジェクトから完全に取り除かれます。なお、単にプロパティに undefined を代入した場合と異なり、delete演算子を使えばプロパティそのものをオブジェクトから削除できる点に注意してください。サンプルコード<!DOCTYPE html> <html> <body> <h1>JavaScript Object Properties Example</h1> <h2 class=&q

  2. JavaScriptでオブジェクトの値を動的に設定する方法をわかりやすく解説

    JavaScriptでは、オブジェクトのプロパティ（値）を後から動的に変更・設定することができます。本記事では、ボタンをクリックしたタイミングでオブジェクトの値を書き換える具体的なコード例を紹介します。 実装例：オブジェクトの値を動的に変更する 以下のコードでは、student オブジェクトの name プロパティと age プロパティを、ボタンクリック時に動的に更新しています。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" />