JavaScript で複数のネストされたキーと値のペアを持つ複数のオブジェクトの配列を作成するにはどうすればよいですか?-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

JavaScript で複数のネストされたキーと値のペアを持つ複数のオブジェクトの配列を作成するにはどうすればよいですか?

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 04, 2023 pm 08:13 PM

如何在 JavaScript 中创建具有多个嵌套键值对的多个对象的数组？

JavaScript は、動的 Web アプリケーションの作成に広く使用されている汎用言語です。 JavaScript で最も一般的に使用されるデータ構造の 1 つは配列です。配列は、オブジェクトを含む任意の型の要素のコレクションです。この記事では、JavaScript で複数のネストされたキーと値のペアを持つ複数のオブジェクトの配列を作成する方法について説明します。

配列とは何ですか?

配列は、値のコレクションを格納するために使用される特別なタイプのオブジェクトです。値は、数値、文字列、ブール値、またはその他の配列など、任意のデータ型にすることができます。配列は、さまざまな種類のアプリケーションで使用できる JavaScript の非常に強力な機能です。

＃＃＃文法＃＃＃リーリー

複数のオブジェクトを含む配列を作成する

まず、JavaScript で複数のオブジェクトを含む配列を作成するには、[] 表記を使用できる空の配列を定義する必要があります。配列を定義した後、push() メソッドを使用して 1 つ以上のオブジェクトを配列に追加できます。例えば -＃＃＃リーリー

与えられた例では、2 つのオブジェクトを持つ「arr」という名前の配列を拒否しています。 Push() メソッドを使用して、各オブジェクトを配列の末尾に追加しました。ここで、配列オブジェクトは、キーと値のペアを持つ中括弧 {} を使用して定義されています。オブジェクトを含む配列を作成したら、JavaScript のメソッドまたは操作を使用して、オブジェクトとそのプロパティにアクセスし、操作できるようになります。

配列内のオブジェクトにアクセスするには多くの方法があります。1 つの方法は、forEach メソッド () を使用して配列をループし、各オブジェクトとそのプロパティに個別にアクセスすることです。または、map() などのメソッドを使用することもできます。または filter() は配列内の要素を変換または操作します。

ネストされたキーと値のペアをオブジェクトに追加する

配列を作成した後、別のオブジェクト内でオブジェクトを定義することで、ネストされたキーと値のペアをオブジェクトに追加できます。例えば -＃＃＃リーリー

指定された例では、myObj を 2 つのキーと値のペアを持つオブジェクトとして定義します。 key2 ペアの値は、2 つのネストされたキーと値のペアを持つ別のオブジェクトです。

ネストされたキーと値のペアを持つオブジェクトを使用して配列を作成する

ネストされたキーと値のペアを持つオブジェクトの配列を作成するには、上で説明した手法を組み合わせることができます。例えば -＃＃＃リーリー

上では、空の配列 arr を定義し、push() メソッドを使用してそれに 2 つのオブジェクトを追加しました。各オブジェクトには 2 つのキーと値のペアが含まれています。key2 の値は、2 つのネストされたキー値を持つもう 1 つの値です。右側のオブジェクトです。

ネストされたキーと値のペアを使用してオブジェクト配列内のデータにアクセスする

方法1

このアプローチでは、ドット表記と括弧表記を組み合わせて使用し、ネストされたキーと値のペアを持つオブジェクトの配列内のデータにアクセスします。ドット表記ではオブジェクトのプロパティに直接アクセスできますが、角括弧表記では変数を使用してプロパティにアクセスできます。

例として、次のドット表記を使用して、arr -

の最初のオブジェクトの name 属性にアクセスできます。リーリー

ここでは、arr の最初のオブジェクトを objOne という名前の変数に割り当てます。ドット表記を使用すると、objOne の任意のプロパティにアクセスし、それを object という名前の変数に割り当てることができます。

arr の 2 番目のオブジェクトの address 属性の state 属性にアクセスするには、次の括弧表記 -

を使用できます。リーリー

ここでは、arr 内の別のオブジェクトを objTwo という名前の変数に割り当てます。ここで括弧表記を使用すると、objTwo の city プロパティにアクセスし、ネストされたオブジェクトの state プロパティをアドレス変数に割り当てることができます。

方法 2

ネストされたキーと値のペアを持つオブジェクトの配列内のデータにアクセスするもう 1 つの方法は、forEach() メソッドを使用することです。このメソッドでは、forEach() メソッドを使用して配列が反復され、配列内の各オブジェクトに対して for...in ループを使用して各キーと値のペアの値が抽出されます。これらの値は新しい配列にプッシュされます。

例 1

この例では、ネストされたキーと値のペアを持つ複数のオブジェクトを含む配列を作成する方法を示します。

arr という名前の空の配列を作成し、push() メソッドを使用して 3 つのオブジェクトをそれに追加しました。各オブジェクトにはキーと値のペアがあります。key1 は値「value1」、key2 は値「value2」などです。 Push() メソッドは、項目を配列に追加し、追加する項目を表す 1 つ以上のパラメーターを受け取り、最後に 3 つのオブジェクトが個別のパラメーターとして渡されます。

リーリー

例 2

この例では、ネストされたキーと値のペアを持つ複数のオブジェクトを含む 2 つの配列を作成し、それらを 1 つの配列に追加する方法を示します。

以下のコードでは、for...in ループを使用して arr1 と arr2 の各オブジェクトをループし、各キーに関連付けられた値にアクセスします。次に、arr3.push(object[key]) を使用して、値のみを arr3 配列にプッシュします。

<!DOCTYPE html>
<html>
   <body>
      <p id="array"></p>
      <script>
         const arr1 = [
            { key1: "value 1" },
            { key2: "value 2" },
            { key3: "value 3" },
         ];
         const arr2 = [
            { key4: "value 4" },
            { key5: "value 5" },
            { key6: "value 6" },
         ];
         const arr3 = [];
         arr1.forEach(function (object) {
            for (const key in object) {
               arr3.push(object[key]);
            }
         });
         arr2.forEach(function (object) {
            for (const key in object) {
               arr3.push(object[key]);
            }
         });
         document.getElementById("array").innerHTML = JSON.stringify(arr3);
      </script>
   </body>
</html>

结论

数组是 JavaScript 中的一种重要数据结构，可以存储任何数据类型（包括对象）的信息集合。创建具有多个嵌套键值对的多个对象的数组是一个简单的过程，为此，我们首先定义一个空数组并使用 push() 方法向其中添加对象，其中每个对象都使用 {} （花括号）定义)，包含使用逗号分隔的键值对。要访问和操作对象及其属性，我们可以使用 JavaScript 方法。

我们还可以通过在另一个对象中定义一个对象来向对象添加嵌套键值对。使用带有嵌套键值对的对象的方法可以在 JavaScript 中创建更强大、更灵活的数据结构。我们看到了不同的方法，包括点符号和括号符号的组合，或者使用 forEach() 方法和 for...in 循环来提取每个键值对的值，以访问嵌套对象数组中的数据键值对。

以上がJavaScript で複数のネストされたキーと値のペアを持つ複数のオブジェクトの配列を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事はtutorialspointで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。

Python vs. JavaScript：パフォーマンスと効率の考慮事項Apr 30, 2025 am 12:08 AM

PythonとJavaScriptのパフォーマンスと効率の違いは、主に以下に反映されています。1）解釈された言語として、Pythonはゆっくりと実行されますが、開発効率が高く、迅速なプロトタイプ開発に適しています。 2）JavaScriptはブラウザ内の単一のスレッドに限定されていますが、マルチスレッドおよび非同期I/Oを使用してnode.jsのパフォーマンスを改善でき、両方とも実際のプロジェクトで利点があります。

JavaScriptの起源：その実装言語の調査Apr 29, 2025 am 12:51 AM

JavaScriptは1995年に発信され、Brandon Ikeによって作成され、言語をCに実現しました。 2。JavaScriptのメモリ管理とパフォーマンスの最適化は、C言語に依存しています。 3. C言語のクロスプラットフォーム機能は、さまざまなオペレーティングシステムでJavaScriptを効率的に実行するのに役立ちます。

舞台裏：JavaScriptをパワーする言語は何ですか？Apr 28, 2025 am 12:01 AM

JavaScriptはブラウザとnode.js環境で実行され、JavaScriptエンジンに依存してコードを解析および実行します。 1）解析段階で抽象的構文ツリー（AST）を生成します。 2）ASTをコンパイル段階のバイトコードまたはマシンコードに変換します。 3）実行段階でコンパイルされたコードを実行します。

PythonとJavaScriptの未来：傾向と予測Apr 27, 2025 am 12:21 AM

PythonとJavaScriptの将来の傾向には、1。Pythonが科学コンピューティングの分野での位置を統合し、AI、2。JavaScriptはWebテクノロジーの開発を促進します。どちらもそれぞれのフィールドでアプリケーションシナリオを拡大し続け、パフォーマンスをより多くのブレークスルーを行います。

Python vs. JavaScript：開発環境とツールApr 26, 2025 am 12:09 AM

開発環境におけるPythonとJavaScriptの両方の選択が重要です。 1）Pythonの開発環境には、Pycharm、Jupyternotebook、Anacondaが含まれます。これらは、データサイエンスと迅速なプロトタイピングに適しています。 2）JavaScriptの開発環境には、フロントエンドおよびバックエンド開発に適したnode.js、vscode、およびwebpackが含まれます。プロジェクトのニーズに応じて適切なツールを選択すると、開発効率とプロジェクトの成功率が向上する可能性があります。

JavaScriptはCで書かれていますか？証拠を調べるApr 25, 2025 am 12:15 AM

はい、JavaScriptのエンジンコアはCで記述されています。1）C言語は、JavaScriptエンジンの開発に適した効率的なパフォーマンスと基礎となる制御を提供します。 2）V8エンジンを例にとると、そのコアはCで記述され、Cの効率とオブジェクト指向の特性を組み合わせて書かれています。3）JavaScriptエンジンの作業原理には、解析、コンパイル、実行が含まれ、C言語はこれらのプロセスで重要な役割を果たします。

JavaScriptの役割：WebをインタラクティブでダイナミックにするApr 24, 2025 am 12:12 AM

JavaScriptは、Webページのインタラクティブ性とダイナミズムを向上させるため、現代のWebサイトの中心にあります。 1）ページを更新せずにコンテンツを変更できます。2）Domapiを介してWebページを操作する、3）アニメーションやドラッグアンドドロップなどの複雑なインタラクティブ効果、4）ユーザーエクスペリエンスを改善するためのパフォーマンスとベストプラクティスを最適化します。

CおよびJavaScript：接続が説明しましたApr 23, 2025 am 12:07 AM

CおよびJavaScriptは、WebAssemblyを介して相互運用性を実現します。 1）CコードはWebAssemblyモジュールにコンパイルされ、JavaScript環境に導入され、コンピューティングパワーが強化されます。 2）ゲーム開発では、Cは物理エンジンとグラフィックスレンダリングを処理し、JavaScriptはゲームロジックとユーザーインターフェイスを担当します。

See all articles