ホームページ > ウェブフロントエンド > フロントエンドQ&A > javascript jsonオブジェクト変換配列

javascript jsonオブジェクト変換配列

王林
リリース: 2023-05-06 14:02:07
オリジナル
4376 人が閲覧しました

フロントエンド開発では、JavaScript オブジェクトと配列の変換が頻繁に行われます。一般的なシナリオの 1 つは、JSON オブジェクトを配列に変換することです。この記事では、JavaScript のメソッドを使用して JSON オブジェクトを配列に変換する方法を説明します。

JSON は、読み書きが簡単なシンプルな形式を備えた軽量のデータ交換形式です。 JavaScript では、組み込みの JSON オブジェクトを使用して JSON データを処理できます。通常、JSON.parse() メソッドを使用して、JSON 文字列を JavaScript オブジェクトに変換します。たとえば、次の JSON 文字列があるとします。

let jsonString = '{"name":"小明","age":18,"gender":"男"}';
ログイン後にコピー

JSON.parse() メソッドを使用して、それを JavaScript オブジェクトに変換できます。

let jsonObject = JSON.parse(jsonString);
ログイン後にコピー

このような操作の後、次のことができます。通常通りに動作します。 jsonObject 変数はオブジェクトと同じ方法で操作されます。しかし、JSON オブジェクトを配列に変換したい場合はどうすればよいでしょうか?次に 2 つの方法を検討します。

方法 1

簡単な方法は、JSON オブジェクトを手動で繰り返し、そのプロパティを配列に格納することです。たとえば、次のコードを使用して jsonObject を配列に変換できます。

let jsonArray = [];

for(let key in jsonObject ){
    jsonArray.push(jsonObject[key]);
}
ログイン後にコピー

上記のコードでは、まず空の配列 jsonArray を作成します。次に、for-in ループを使用して jsonObject オブジェクトの各プロパティを反復処理し、そのプロパティの値を jsonArray 配列にプッシュします。最後に、jsonObject のすべてのプロパティ値を含む配列 jsonArray を取得します。

このメソッドの欠点は、簡潔さが不十分で、オブジェクトを手動で走査する必要があり、組み込み関数の変換を直接使用できないことです。したがって、2 番目の方法を採用し、JavaScript によって提供される組み込みメソッドを使用して、オブジェクトと配列を相互に変換できます。

方法 2

2 番目の方法は、JavaScript で Object.values() メソッドを使用することです。 Object.values() メソッドは、オブジェクト自体のすべてのプロパティ値で構成される配列を返します。たとえば、次のコードを使用して jsonObject を配列に変換できます。

let jsonArray = Object.values(jsonObject);
ログイン後にコピー

上記のコードでは、Object.values() メソッドを使用して jsonObject のすべてのプロパティ値を抽出し、それらを配列 jsonArray。方法 1 と比較すると、この方法は明らかにシンプルで読みやすいです。同時に、組み込みメソッドを使用すると、コードがより簡潔になり、保守が容易になります。

概要:

この記事では、JSON オブジェクトを配列に変換する 2 つの方法を紹介します。 1 つ目の方法は、JSON オブジェクトを手動で反復処理し、プロパティ値を配列に格納することです。 2 番目の方法は、JavaScript で Object.values() メソッドを使用してプロパティ値を抽出し、配列に入れる方法です。 2 番目の方法は最初の方法よりも簡潔で、JavaScript が提供する組み込み関数を利用してコードの保守を容易にします。

以上がjavascript jsonオブジェクト変換配列の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート