ホームページ > 記事 > ウェブフロントエンド > JavaScript で複数のネストされたキーと値のペアを持つ複数のオブジェクトの配列を作成するにはどうすればよいですか?
JavaScript で複数のネストされたキーと値のペアを持つ複数のオブジェクトの配列を作成するにはどうすればよいですか?
- WBOY転載
- 2023-09-04 20:13:081207ブラウズ
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 サイトの他の関連記事を参照してください。