JavaScript で動的な値とオブジェクトを作成するにはどうすればよいですか?-jsチュートリアル-php.cn

構文

アルゴリズム

例 2

ホームページ

ウェブフロントエンド

jsチュートリアル

JavaScript で動的な値とオブジェクトを作成するにはどうすればよいですか?

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 20, 2023 am 10:57 AM

如何在 JavaScript 中创建动态值和对象？

動的値は、動的変数に割り当てる値です。ダイナミック変数は、特定の名前のないコード内にハードコーディングされた変数であり、そのアドレスはコードの実行中に決定されます。「動的」という名前は、操作および変更できる値を指します。

ここでは、JavaScript で動的値 (オブジェクト値の一部) を作成し、今後グループにアクセスせずに動的変数名を変更する方法を説明します。これは、変数を宣言し、その同じ変数をオブジェクト内のキーの 1 つとして使用し、将来的に変数の名前を変更する必要がある場合に、オブジェクトにアクセスせずに変更できることを意味します。

上記のタスクを実行するには、以下に示すように角括弧 [ ] を使用してオブジェクトに変数名を割り当てるだけです -

構文

次は、動的な値とオブジェクトを作成するための構文です -

const key = &#39;KeyName&#39;;
const obj = { [key] : &#39;value&#39;};

ログイン後にコピー

ここで、key と value は、次の目的で使用されるキーと値のペアです。オブジェクトを作成する場合、「 obj 」と keyName > はキーの値です。

アルゴリズム

ステップ 1 - オブジェクトの作成に使用するキーを定義します。
ステップ 2 - オブジェクトを作成し、上で定義したキーを使用します。
ステップ 3 - 上で作成したオブジェクトに JSON.stringify() を適用して、オブジェクトを表示します。

例 1

次の HTML プログラムを使用して、動的変数の宣言を表示できます。

<!DOCTYPE html>
<html>
<body>
   <h2> JavaScript Dynamic values </h2>
   <div id = "result"> </div>
   <script>
      const key1 = "Haircolour";
      const key2 = "Eyecolour";
      const person = {
         f_name : "Rohan",
         l_name :"Joshi",
         [key1] : "Black",
         [key2] : "Brown"
      };

      // Converting the object value to show its value in html
      str = JSON.stringify(person);
      document.getElementById("result").innerHTML = str;

      // To print value of object in console
      console.log(person);
   </script>
</body>
</html>

ログイン後にコピー

つまり、上記のコードでは、中括弧 [] を使用せずにオブジェクト内で 2 つのキー f_name と l_name を宣言し、 key1 変数と key2 変数に中括弧を使用していることがわかります。動的な値。

出力では、key1 変数の名前が Eyecolour で、key2 変数の値が Haircolour であることがわかります。

例 2

これは、オブジェクトにアクセスせずに動的変数の名前を変更する方法を詳しく説明する別のコードです。ここでは、コード内の 2 つの動的変数の名前を交換するだけです。

<!DOCTYPE html>
<html>
<body>
   <h2> JavaScript Dynamic values </h2>
   <div id = "result"> </div>
   <script>
      const key1 = "Haircolour";
      const key2 = "Eyecolour";
      const person = {
         f_name : "Rohan",
         l_name :"Joshi",
         [key1] : "Black",
         [key2] : "Brown"
      };

      // Converting the object value to show its value in html
      str = JSON.stringify(person);
      document.getElementById("result").innerHTML = str;

      // To print value of object in console
      console.log(person);
   </script>
</body>
</html>

ログイン後にコピー

出力では、2 つの変数 key1 と key2 の値は同じままですが、それらの名前はオブジェクトにアクセスせずに変更されていることがわかります。つまり、これが JavaScript での動的作成方法です。の値とオブジェクト。

以上がJavaScript で動的な値とオブジェクトを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7360

Java チュートリアル

1628

CakePHP チュートリアル

1353

Laravel チュートリアル

1265

PHP チュートリアル

1214

Related knowledge

JavaScriptの文字列文字を交換します Mar 11, 2025 am 12:07 AM

JavaScript文字列置換法とFAQの詳細な説明この記事では、javaScriptの文字列文字を置き換える2つの方法について説明します：内部JavaScriptコードとWebページの内部HTML。 JavaScriptコード内の文字列を交換します最も直接的な方法は、置換（）メソッドを使用することです。 str = str.replace（ "find"、 "置換"）; この方法は、最初の一致のみを置き換えます。すべての一致を置き換えるには、正規表現を使用して、グローバルフラグGを追加します。 str = str.replace（/fi

カスタムGoogle検索APIセットアップチュートリアル Mar 04, 2025 am 01:06 AM

このチュートリアルでは、カスタムGoogle検索APIをブログまたはWebサイトに統合する方法を示し、標準のWordPressテーマ検索関数よりも洗練された検索エクスペリエンスを提供します。驚くほど簡単です！検索をyに制限することができます

8見事なjQueryページレイアウトプラグイン Mar 06, 2025 am 12:48 AM

楽なWebページレイアウトのためにjQueryを活用する：8本質的なプラグイン jQueryは、Webページのレイアウトを大幅に簡素化します。この記事では、プロセスを合理化する8つの強力なjQueryプラグイン、特に手動のウェブサイトの作成に役立ちます

独自のAjax Webアプリケーションを構築します Mar 09, 2025 am 12:11 AM

それで、あなたはここで、Ajaxと呼ばれるこのことについてすべてを学ぶ準備ができています。しかし、それは正確には何ですか？ Ajaxという用語は、動的でインタラクティブなWebコンテンツを作成するために使用されるテクノロジーのゆるいグループ化を指します。 Ajaxという用語は、もともとJesse Jによって造られました

＆＃x27; this＆＃x27; JavaScriptで？ Mar 04, 2025 am 01:15 AM

コアポイントこれは通常、メソッドを「所有」するオブジェクトを指しますが、関数がどのように呼び出されるかに依存します。現在のオブジェクトがない場合、これはグローバルオブジェクトを指します。 Webブラウザでは、ウィンドウで表されます。関数を呼び出すと、これはグローバルオブジェクトを維持しますが、オブジェクトコンストラクターまたはそのメソッドを呼び出すとき、これはオブジェクトのインスタンスを指します。 call（）、apply（）、bind（）などのメソッドを使用して、このコンテキストを変更できます。これらのメソッドは、与えられたこの値とパラメーターを使用して関数を呼び出します。 JavaScriptは優れたプログラミング言語です。数年前、この文はそうでした