JSON.stringify のさまざまな用途のまとめ

JSON.stringify のさまざまな用途のまとめ

序文

json を使用したことがある人なら、オブジェクトを文字列化してからバックエンドに送信するのが一般的な方法であることを知っているはずです。ただし、IE6-7 には JSON オブジェクトがないため、実装するには json2.js を使用する必要があります。

1. 古典的な用法

 varデータ = [
     {名前: "Wukong", 性別: 1, 年齢: 30},
     {名前: "Bajie", 性別:0, 年齢:20},
     {名前: "Tang Monk"、性別: 1、年齢: 30}
 ]; //JavaScript 配列にはオブジェクトが含まれています //JavaScript オブジェクトを JSON 形式の文字列に変換します var str_json = JSON.stringify(data);
コンソールにログ出力します。
//実行結果は次のとおりです:
//[{"name":"悟空","sex":1,"age":30},{"name":"八戒","sex":0,"age":20},{"name":"唐僧","sex":1,"age":30}]

とても簡単です!これは私たちが最もよく使う方法でもあります

2. 複雑なデータの抽出

たとえば、当社のデータは非常に複雑で、アバター、ニックネーム、個人の署名など​​の情報が含まれています。しかし、ローカルに保存したので、ユーザー名と性別だけが必要です。どうすればいいですか? 2 番目のパラメータを指定してデータを走査し、再抽出することでこれを実行できます。

a. 従来のデータ抽出方法

varデータ = [
    {名前: "Wukong", 性別: 1, 年齢: 30},
    {名前: "Bajie", 性別:0, 年齢:20},
    {名前: "Tang Monk"、性別: 1、年齢: 30}
];
// データを抽出する従来の方法 var new_data = [];
(var i=0, new_data=[]; i<data.length; i++) の場合 {
    //行配列を構築する new_data.push({
        名前: データ[i].名前、
        性別: データ[i].年齢
    });
}
var str_json = JSON.stringify(new_data);
コンソールにログ出力します。

b. stringifyの2番目のパラメータを使用してデータを抽出します

varデータ = [
    {名前: "Wukong", 性別: 1, 年齢: 30},
    {名前: "Bajie", 性別:0, 年齢:20},
    {名前: "Tang Monk"、性別: 1、年齢: 30}
];

var str_json = JSON.stringify(data,["名前","年齢"]);
コンソールにログ出力します。
//実行結果	
//[{"name":"悟空","age":30},{"name":"八戒","age":20},{"name":"唐僧","age":30}]

2 番目のパラメータに必要なキー配列が渡される限り、この処理は非常に簡単に完了できます。

もちろん、1,0 を男性または女性に変更するなど、より複雑な処理をしたい場合は、2 番目のパラメーターをコールバック関数で処理できます。

varデータ = [
    {名前: "Wukong", 性別: 1, 年齢: 30},
    {名前: "Bajie", 性別:0, 年齢:20},
    {名前: "Tang Monk"、性別: 1、年齢: 30}
];

var str_json = JSON.stringify(データ、関数(キー、値) {
    if(キー==="性別"){
        ["男の子","女の子"][値]を返します。
    }
    戻り値;
});
コンソールにログ出力します。
// [{"name":"悟空","sex":"女性","age":30},{"name":"八戒","sex":"男性","age":20},{"name":"唐僧","sex":"女性","age":30}]

3. 3番目のパラメータ「Wu Yong」

非常に役に立たないパラメータで、基本的には決して使用されませんが、状況によって異なります。

varデータ = [
    {名前: "Wukong", 性別: 1, 年齢: 30},
    {名前: "Bajie", 性別:0, 年齢:20},
    {名前: "Tang Monk"、性別: 1、年齢: 30}
];

var str_json = JSON.stringify(data,["名前","性別"],"\t");
コンソールにログ出力します。
/*
[
	{
		"名前": "悟空",
		「セックス」: 1
	},
	{
		"名前": "バジエ",
		「性別」: 0
	},
	{
		"名前": "唐僧",
		「セックス」: 1
	}
]
*/

わからない場合は、APIを確認してください

developer.mozilla.org/en-US/docs/…

要約する

JSON.stringify の使い方に関するこの記事はこれで終わりです。JSON.stringify の使い方に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Iframe の内外のページで JS がどのように動作するかの概要
  • JS で if 判定をスムーズに行う方法
  • JSON.stringify の簡易版の実装とその 6 つの主要機能の詳細な説明
  • Vue は PDF ファイルのオンライン プレビューを実装します (pdf.js/iframe/embed を使用)
  • JavaScript JSON.stringify() の使用法の概要
  • JSON.stringify を使用する際に発生する循環参照の問題を解決する方法の詳細な説明
  • json.stringify() と json.parse() の違いと使い方
  • Selenium+BeautifulSoup+jsonはスクリプトタグ内のjsonデータを取得します
  • JavaScript のカンマ式が含まれている場合について

<<:  Linux の vsftpd サービス構成の簡単な分析 (匿名、ユーザー、仮想ユーザー)

>>:  Win10 での MySQL 8.0 ログインでユーザー 'root'@'localhost' のアクセスが拒否される (パスワード使用: YES) 問題の解決方法

推薦する

Vueモバイル端末が指のスライド効果を実現

この記事の例では、Vueモバイル端末で指のスライド効果を実現するための具体的なコードを紹介します。具...

Node.js は、異なるリクエストパスに応じて異なるデータを返します。

目次1. 異なるリクエストパスに応じて異なるデータを返す方法を学びます。 2. 送信データ: データ...

高性能な HTML アプリケーションを作成するためのヒント

Web ページのパフォーマンスを向上させるにはどうすればよいでしょうか?ほとんどの開発者は、Java...

HTML テーブル マークアップ チュートリアル (16): タイトルの水平方向の配置属性 ALIGN

デフォルトでは、表のタイトルは水平方向に中央揃えされます。ALIGN 属性を使用して、タイトル テキ...

ウェブデザインのためのロイヤルブルーのカラーマッチング入門

古典的な色の組み合わせは力と権威を伝え、強いロイヤルブルーはあらゆる古典的な色の組み合わせの中心的な...

ウェブページデザインのための4つの実践的なヒント

関連記事: Web コンテンツ ページを作成するための 9 つの実用的なヒント<br />...

Dockerfile を使用して SpringBoot プロジェクトをデプロイする方法

1. SpringBoootプロジェクトを作成し、jarパッケージにパッケージ化する2. Linux...

文字列の GBK および GB2312 エンコードとデコードのフロントエンド実装 (概要)

序文プロジェクトを開発しているときに、かなり厄介な問題に遭遇しました。この製品では、判断のためにブラ...

MySQLの行数カウントに関する簡単な説明

各テーブルの行数をカウントするために使用される MySQL count() 関数は、誰もがよく知って...

JavaScript スネーク実装コード

この記事の例では、参考までに貪欲なスネークを実装するためのJavaScriptの具体的なコードを共有...

効率的なMySQLページングの詳細な説明

序文通常、大量のデータを扱う MySQL クエリには「ページング」戦略が採用されます。ただし、ページ...

JavaScriptとTypeScriptの関係

目次1. JavaScript とは何ですか? 2. JavaScript は何に使用されますか? ...

Dockerを使用してRedisクラスターを構築する方法

目次1. Redis Dockerベースイメージを作成する2. Redisノードイメージを作成する3...

JavaScript 開発における標準コミットメッセージの重要性の詳細な説明

目次標準コミットメッセージの重要性コミットするコミットリント依存関係をインストールする.commit...

Vue における nextTick の役割といくつかの簡単な使用シナリオ

目的nextTickの役割といくつかの簡単な使用シナリオを理解する文章その機能は何ですか?遅延コール...